Book Image

ASP.NET jQuery Cookbook - Second Edition

By : Sonal Aneel Allana
Book Image

ASP.NET jQuery Cookbook - Second Edition

By: Sonal Aneel Allana

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 (15 chapters)
ASP.NET jQuery Cookbook Second Edition
About the Author
About the Reviewer

Adding jQuery to an empty ASP.NET web project using a script block

To create ASP.NET 4 .6 Web Applications, Visual Studio provides various ready templates such as Empty, Web Forms, MVC, Web API, and so on. This recipe will use the Empty template, which provides the developer with an empty project structure that consists of only the web.config file.


Downloading the example code

You can download the example code files for this book from your account at If you purchased this book elsewhere, you can visit and register to have the files e-mailed directly to you.

Getting ready

Following are the steps to create a project by using Empty template:

  1. Create a new project in Visual Studio by going to File | New | Project..., as shown in the following screenshot:


    Website or web project?

    Instead of creating a new project, you can also create a new website. Unlike a project, a website does not contain a collective project file to track individual files in the application. To create a website, go to File | New | Web Site.... This will launch the New Website dialog box with the list of available templates. Select the ASP.NET Empty WebSite template.

  2. This will launch the New Project dialog box, as shown in the following screenshot. From the left-hand side panel, select your desired programming language, Visual C# or Visual Basic, and then, select ASP.NET Web Application from the middle panel:

  3. Enter WebApplication1 (or any suitable name) in the Name field. Click on the Browse button to go to the desired Location where you would like to save the application. Click on OK.

  4. This will launch the Select a template dialog box, as shown in the following screenshot:

  5. From ASP.NET 4.6 Templates, select Empty, and click on OK. Visual Studio will create an empty project in the Solution Explorer tab, as shown in the following screenshot:


In the remaining recipes, when asked to create a Web Application project using the Empty template, follow the steps listed in this section.

How to do it…

Following are the steps to include jQuery using script block:

  1. JavaScript files are usually placed in a folder named Scripts in the web application. So, in the Solution Explorer tab, right-click on the project and go to Add | New Folder from the menu:

  2. Rename the folder to Scripts. Now, right-click on the Scripts folder, and go to Add | Existing Item... as shown in the following screenshot:

  3. Now, browse to the location where you have saved the downloaded copy of the jQuery files (refer to the Downloading jQuery from recipe), and click on OK. It is recommended that you add both the uncompressed and compressed versions. The Scripts folder will be updated, as shown in the following screenshot:

  4. Next, create a new web form in the project by right-clicking on the project and navigating to Add | New Item.... From the dialog box, select Web Form, and enter a suitable name for the web form, such as Default.aspx:

  5. To use jQuery on the web form, simply drag and drop the required jQuery file, that is, uncompressed or compressed on the web form. Or alternatively, include the following <script> tag in the <head> element:

    For development mode, the code is as follows:

    <script src="Scripts/jquery-2.1.4.js"></script>

    For release mode, the code is as follows:

    <script src="Scripts/jquery-2.1.4.min.js"></script>

See also

The Downloading jQuery from recipe