Book Image

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

By : Sonal Merchant, Aneel Allana
Book Image

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

By: Sonal Merchant, 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 (10 chapters)
9
Index

Understanding jQuery reference in the default web application template

So far, all examples have used the Empty template for the ASP.NET Web Application project. When using a non-empty built-in web application template, ASP.NET adds a reference to the jQuery library in the Master Page using the ScriptManager control. This recipe walks you through the important details of this mapping.

How to do it...

Here are the steps to create an ASP.NET web application using the default web application template:

  1. Create a new project by navigating to File | New | Project.... From the dialog box, select ASP.NET Web Application. Name the project DemoWebApplication (or any other suitable name), and click on OK.
  2. A new dialog box will be launched. Select Web Forms from the available templates. Note that the Web Forms checkbox is checked by selecting the Web Forms template (refer to the following screenshot) and click on OK as shown in the following screenshot:
    How to do it...
  3. Open the Site.Master Master Page in the Source mode, as shown in the following screenshot:
    How to do it...
  4. Notice that the ScriptManager control that is added to the <form> element has the following reference to jQuery:
    <asp:ScriptReference Name="jquery" />

How it works…

When you follow the preceding steps, this is how the web application is mapped to the jQuery library:

  1. The ScriptManager control switches the jQuery library between the development and release versions, depending on the debug attribute of the <compilation> element in web.config:
    <compilation debug="true"/>
  2. When the debug attribute is true, the uncompressed version is used. When debug is false, the minified version is used.
  3. The default template is shipped with the AspNet.ScriptManager.jQuery package. This package adds the following ScriptMappings to jQuery in the PreApplicationStart method of the application as follows:

    For C#, the code is as follows:

    string str = "2.4.1";
    ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition
    {
        Path = "~/Scripts/jquery-" + str + ".min.js", 
        DebugPath = "~/Scripts/jquery-" + str + ".js", 
        CdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + str + ".min.js", 
       CdnDebugPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-" + str + ".js", 
       CdnSupportsSecureConnection = true, 
       LoadSuccessExpression = "window.jQuery"
    });

    Note

    The default Web Forms template adds the Microsoft CDN URL, as shown in the preceding code.

  4. When the EnableCdn property of the ScriptManager control is set to true, CdnPath and CdnDebugPath are used in release and development modes, respectively, to serve scripts from the Microsoft CDN:
    <asp:ScriptManager runat="server" EnableCdn="true">
  5. However, if the CDN is down or if the application is offline, the ScriptManager control will include a fallback mechanism to serve the local copy of jQuery, as shown in the following screenshot:
    How it works…
  6. To change the CDN to another, for example Google CDN, we need to change ScriptResourceMapping in the RegisterBundles method in BundleConfig, as shown in the following code. This module/class is located in the App_Start folder:

    For VB, the code is as follows:

    ScriptManager.ScriptResourceMapping.AddDefinition("jquery", New ScriptResourceDefinition() With {
       .Path = "~/Scripts/jquery-2.1.4.min.js",
       .DebugPath = "~/Scripts/jquery-2.1.4.js",
       .CdnPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js",
       .CdnDebugPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js",
       .CdnSupportsSecureConnection = True,
       .LoadSuccessExpression = "window.jQuery"})

    For C#, the code is as follows:

    ScriptManager.ScriptResourceMapping.AddDefinition("jquery", new ScriptResourceDefinition
    {
       Path = "~/Scripts/jquery-2.1.4.min.js",
       DebugPath = "~/Scripts/jquery-2.1.4.js",
       CdnPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js",
       CdnDebugPath = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js",
       CdnSupportsSecureConnection = true,
       LoadSuccessExpression = "window.jQuery"
    });
  7. By running the page and viewing the source in the browser window, note that Microsoft CDN is replaced with Google CDN as required:
    How it works…
  8. Open the Global.asax page to view the registration of bundles in the Application_Start event handler as follows:

    For VB, the code is as follows:

    BundleConfig.RegisterBundles(BundleTable.Bundles)

    For C#, the code is as follows:

    BundleConfig.RegisterBundles(BundleTable.Bundles);

See also

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