JQuery

Include jQuery Library In A View Or Page In Different Ways

How to include jQuery in an ASP.NET page

For adding a jQuery library reference to an ASP.Net page, you just need to specify the source of the library in the script tag.

If you are referencing a library from the project folder,

  1. <script src="Scripts/jquery-ui-1.10.3.min.js"></script>  

If you are referencing the library from a CDN (Content Delivery Network),

  1. <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.2.js" type="text/javascript"></script>  

The above line will include the jQuery library form the Microsoft CDN.

How to include jQuery in an MVC View.

You can do this in different ways.

Direct reference to page/view

If you are not using any layouts for your Views, simply include the reference of the library in the View.

If you are referencing a library in a Razor View from the project folder.

  1. <script src="@Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>  

If you are referencing the library from Microsoft CDN.

  1. <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.7.2.js" type="text/javascript"></script>  

Bundling

We use bundling for better performance. Let’s see how to include it when you use bundling.

There is a BundleConfig.cs file in your project’s App_Start folder. Add the below line of code in your BundleConfig class.

  1. bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));  

Normally, that line is added when you create the project; if not, add it.

The above line of code will do three things:

  1. Will create a bundle with name ~/bundles/jquery.
  2. Will include the latest version of the jQuery library from your project’s folder.
  3. Bundler is smart enough to include the .js file in Debug mode and the .min.js file in the Release mode.
    1. bundles.UseCdn = true;  
    2. bundles.Add(new ScriptBundle("~/bundles/jquery", @ "//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.js").Include("~/Scripts/jquery-{version}.js")); 

If you want to use the library from a CDN, use the below code.

The above code will do the below things.

  1. Will create a bundle with name ~/bundles/jquery.
  2. Will include the latest version of the jQuery library from the Microsoft CDN if it is in Release mode.
  3. Will include the latest version of the jQuery library from your project’s folder if it is in Debug mode.

Finally, use the @Scripts.Render to include the bundle in your Razor View.

  1. @model BundlesDemo.Models.WeightStatus  
  2. @{  
  3.     Layout = null;  
  4. }  
  5. <!DOCTYPE html>  
  6. <html>  
  7.   
  8. <head>  
  9.     <title>Index</title>  
  10. </head>  
  11.   
  12. <body>  
  13.     <div>  
  14.         <p> Welcome to Bundles Demo Home View! </p>  
  15.     </div>  
  16. </body> @Scripts.Render("~/bundles/jquery")  
  17.   
  18. </html> 

How to Use Bundling with Layout

If you have many Views which have a common layout, you will need to use layouts.

Adding Layout file to your project

By default, a _Layout.cshtml page will be created when you create an MVC project. If not created, create one.

Right-click on Shared folder, Add -> New Item -> Layout Page.

jQuery

You can add your common functionality in the layout page.

Advantage of using bundling with layout

If you are using layout, you can include your bundle (render bundle) in your layout.

The benefit of this approach is, you don’t have to use the @Scripts.Render in all the Views where you use layout which already includes the @Scripts.Render section.

Adding jQuery library or file to Layout page

Add the @Scripts.Render section at the end of the layout page. You can render these all the bundles that you want to use in your layout.

  1. <!DOCTYPE html>  
  2. <html>  
  3.   
  4. <head>  
  5.     <meta charset="utf-8" />  
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  7.     <title>@ViewBag.Title - My Bundles Demo Application</title> @Styles.Render("~/Content/css") </head>  
  8.   
  9. <body>  
  10.     <p> Bundles Demo Application Is to Demonstrate the Use and Advantages of Bundling. </p>  
  11.     <div class="container body-content"> @RenderBody()  
  12.         <hr />  
  13.         <footer>  
  14.             <p>© @DateTime.Now.Year - My Bundles Demo Application</p>  
  15.         </footer>  
  16.     </div> @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @RenderSection("scripts", false) </body>  
  17.   
  18. </html>  
Adding <script> element to view or page

After including the jQuery libraries, we may need to use some jQuery scripts in the page like below:

  1. <script>  
  2.     $(document).ready(function() {  
  3.         alert("Hey! I am ready");  
  4.     });  
  5. </script>  

We will define a scripts section in the Layout like we have done in the Layout page code above.

@RenderSection("scripts", false)

Or

@RenderSection("scripts", required: false)

The second parameter in the RenderSection tells that this section is not mandatory in the View where the layout is included, otherwise, the section is mandatory.

Adding Layout to View

Now, go to the View where we include the _Layout.cshtml.

Add the below line of code to include the layout in your View.

  1. @{  
  2.     Layout = "~/Views/Shared/_Layout.cshtml";  
  3. }  

Define scripts section

In the View, you need to define the scripts section and use your <script></script> element inside the section.

  1. @model BundlesDemo.Models.WeightStatus  
  2. @ {  
  3.     ViewBag.Title = "Home Page";  
  4.     Layout = "~/Views/Shared/_Layout.cshtml";  
  5. }  
  6. @section scripts { < script > $(document).ready(function() {  
  7.         alert("Hey! I am ready ");  
  8.     }); < /script>  
  9. }  
ViewStart

The above use _Layout has one disadvantage. We need to include the layout in all the Views where we want to include the layout.

_ViewStart.cshtml was introduced in MVC3 to overcome this issue. It is placed in the Views folder. It is designed to give common functionality to all the Views under the folder where the _ViewStart.cshtml is present.

In my Bundles Demo project,

jQuery

All the Views inside Views folder including the one in Home folder will get the layout mentioned in the _ViewStart.cshtml.

You can have multiple _ViewStart.cshtml files if you want to enforce different styles for different folders.

Apply Layout using _ViewStart.cshtml

_ViewStart.cshtml is Layout file which allows writing codes.

All you need to do is to specify the path of the Layout file to apply the layout, as below.

  1. @ {  
  2.     Layout = "~/Views/Shared/_Layout.cshtml";  
  3. }  
Conditionally load Layout pages using ViewStart

Since _ViewStart.cshtml allow codes to be written apart from the _Layout file path, we can use it to conditionally change the layout of the View.

Some practical scenarios are,

  • Different layout for the user, say for admin and normal user.
  • Different layout based on device, say for desktop and mobile.
    1. @ {  
    2.     if (User.IsInRole("admin")) {  
    3.         Layout = "~/Views/Shared/_AdminLayout.cshtml";  
    4.     } else {  
    5.         Layout = "~/Views/Shared/_UserLayout.cshtml";  
    6.     }  
    7. } 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs