Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying ASP.NET jQuery Cookbook (Second Edition)
  • Table Of Contents Toc
  • Feedback & Rating feedback
ASP.NET jQuery Cookbook (Second Edition)

ASP.NET jQuery Cookbook (Second Edition) - Second Edition

By : Sonal Merchant, Aneel Allana
3.5 (2)
Buy this Book
close
close
ASP.NET jQuery Cookbook (Second Edition)

ASP.NET jQuery Cookbook (Second Edition)

3.5 (2)
By: Sonal Merchant, Aneel Allana
Buy this Book

Overview of this book

jQuery is a lightweight JavaScript library that has changed the landscape of client scripting in web applications. Developed by John Resig in 2006, it has taken the web by storm because of its cross-browser compatibility and the ability to get more done with less code. It has gained popularity with ASP.NET developers and is now distributed with Visual Studio and the NuGet package manager. ASP.NET jQuery Cookbook explores the wide range of utilities that the jQuery library provides. It teaches you the nitty-gritty of plugging in these features in ASP.NET web applications. It covers every aspect of interfacing the library, right from downloading and including jQuery on web pages to selecting controls, handling events, and creating animations. This book also walks you through DOM traversal and manipulation in ASP.NET and then through visual effects and graphics in ASP.NET sites. It explores advanced features such as posting AJAX requests and writing plugins. It will provide you with all the information you need to use this library confidently with ASP.NET.
Table of Contents (10 chapters)
close
close
close
Preface
Icon
Preface
Icon
What this book covers
Icon
What you need for this book
Icon
Who this book is for
Icon
Sections
Icon
Conventions
Icon
Reader feedback
Icon
Customer support
Lock Free Chapter
1
1. Getting Started with jQuery in ASP.NET
chevron up
Icon
1. Getting Started with jQuery in ASP.NET
Icon
Introduction
Icon
Downloading jQuery from jQuery.com
Icon
Understanding CDN for jQuery
Icon
Using NuGet Package Manager to download jQuery
Icon
Adding jQuery to an empty ASP.NET web project using a script block
Icon
Adding jQuery to an empty ASP.NET web project using ScriptManager control
Icon
Adding jQuery to an ASP.NET Master Page
Icon
Adding jQuery programmatically to a web form
Icon
Understanding jQuery reference in the default web application template
Icon
Hello World in a web project using jQuery
Icon
Bundling jQuery in ASP.NET MVC
Icon
Using CDN to load jQuery in MVC
Icon
Hello World in ASP.NET MVC using jQuery
Icon
Debugging jQuery code in Visual Studio
2
2. Using jQuery Selectors with ASP.NET Controls
Icon
2. Using jQuery Selectors with ASP.NET Controls
Icon
Introduction
Icon
Selecting a control using ID and displaying its value
Icon
Selecting a control using the CSS class
Icon
Selecting a control using HTML tag
Icon
Selecting a control by its attribute
Icon
Selecting an element by its position in the DOM
Icon
Enabling/disabling controls on a web form
Icon
Using selectors in MVC applications
3
3. Event Handling Using jQuery
Icon
3. Event Handling Using jQuery
Icon
Introduction
Icon
Responding to mouse events
Icon
Responding to keyboard events
Icon
Responding to form events
Icon
Using event delegation to attach events to future controls
Icon
Running an event only once
Icon
Triggering an event programmatically
Icon
Passing data with events and using event namespacing
Icon
Detaching events
4
4. DOM Traversal and Manipulation in ASP.NET
Icon
4. DOM Traversal and Manipulation in ASP.NET
Icon
Introduction
Icon
Adding/removing DOM elements
Icon
Accessing parent and child controls
Icon
Accessing sibling controls
Icon
Refining selection using a filter
Icon
Adding items to controls at runtime
5
5. Visual Effects in ASP.NET Sites
Icon
5. Visual Effects in ASP.NET Sites
Icon
Introduction
Icon
Animating the Menu control
Icon
Animating a Label control to create a digital clock
Icon
Animating the alt text of the AdRotator control
Icon
Animating images in the TreeView control
Icon
Creating scrolling text in a Panel control
Icon
Creating a vertical accordion menu using Panel controls
Icon
Showing/hiding the GridView control with the explode effect
6
6. Working with Graphics in ASP.NET Sites
Icon
6. Working with Graphics in ASP.NET Sites
Icon
Introduction
Icon
Creating a spotlight effect on images
Icon
Zooming images on mouseover
Icon
Creating an image scroller
Icon
Building a photo gallery using z-index property
Icon
Building a photo gallery using ImageMap control
Icon
Using images to create effects in the Menu control
Icon
Creating a 5 star rating control
Icon
Previewing image uploads in MVC
7
7. Ajax Using jQuery
Icon
7. Ajax Using jQuery
Icon
Introduction
Icon
Setting up Ajax with ASP.NET using jQuery
Icon
Consuming page methods
Icon
Consuming Web services
Icon
Consuming WCF services
Icon
Retrieving data from a Web API
Icon
Making Ajax calls to a controller action
Icon
Making Ajax calls to a HTTP handler
8
8. Creating and Using jQuery Plugins
Icon
8. Creating and Using jQuery Plugins
Icon
Introduction
Icon
Creating and using a simple plugin
Icon
Using the $ alias in the plugin
Icon
Calling methods on DOM elements
Icon
Providing default values
Icon
Providing method chaining
Icon
Adding actions to plugins
Icon
Using the form validation plugin
Icon
Downloading plugins using the NPM
9
Index
Icon
Index

Adding jQuery to an ASP.NET Master Page

Master Pages are used to achieve a uniform look and feel in the website. They maintain a consistent layout across all the content pages. Including jQuery in the Master Page ensures that all the content pages using that Master Page will also have the library included by default. This recipe will demonstrate how this can be done.

Note

A Master Page is an ASP.NET file with the .Master extension. It has a @Master directive at the top of the layout instead of the @Page directive in an ordinary .aspx page.

Getting ready

  1. Create a new ASP.NET Web Application project using the Empty template by following the steps listed in the Adding jQuery to an empty ASP.NET web project using a script block recipe. Name the project WebApplicationWithMaster (or any other suitable name).
  2. Follow the steps in the previous recipe to add the jQuery library (the uncompressed and compressed formats) to the Scripts folder.
  3. In the Solution Explorer tab, right-click on the project, and go to Add | New Item.... This will launch a dialog box, as shown in the following screenshot. From the dialog box, select Web Forms Master Page. Name the Master Page Default.Master, and click on Add:
    Getting ready
  4. To add a web form—that is, a content page—to the project, right-click on the project in the Solution Explorer tab again, and navigate to Add | New Item.... From the dialog box, this time select Web Form with Master Page, as shown in the following screenshot. Name the web form Default.aspx, and click on Add:
    Getting ready
  5. This will launch a dialog box so that you can select the Master Page. From the dialog box, as shown in the following screenshot, select the Master Page to be associated with the content page, and click on OK:
    Getting ready

How to do it…

To incorporate jQuery in an ASP.NET Master Page, follow these steps:

  1. Open the Default.Master Master Page in the Source mode, and add a reference to the jQuery library using either the <script> block (refer to the Adding jQuery to an empty ASP.NET web project using a script block recipe) or the ScriptManager control (refer to the Adding jQuery to an empty ASP.NET web project using the ScriptManager control recipe), as shown in the following screenshot:
    How to do it…
    How to do it…

    Note

    When using the <script> block, the jQuery reference should preferably be placed in the <head> element.

    When using the ScriptManager control, the control should preferably be placed in the <form> element before the ContentPlaceHolder in which the jQuery code will be added later to the content pages. The Global.asax file should also be updated in order to add the required ScriptResourceDefinition , as described in the Adding jQuery to an empty ASP.NET web project using the ScriptManager control recipe.

  2. The required jQuery code can now be added to the ContentPlaceHolder (with ID = "ContentPlaceHolder1") in the Default.aspx web form.

How it works…

On running the application, when the Default.aspx content page is loaded, the HTML markup from the Master page adds the reference to the jQuery library. This makes the content page jQuery-ready so that any jQuery code can be executed.

To check whether the jQuery reference has been added to the page, run the project and launch Default.aspx in the browser. Right-click on the page in the browser window and select View Source. The jQuery reference will be seen on the page, as shown in the following screenshot:

How it works…

See also

The Adding jQuery to an empty ASP.NET web project using the ScriptManager control recipe

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
ASP.NET jQuery Cookbook (Second Edition)
End of Section 1
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon