Proper way to use JQuery when using MasterPages in ASP.NET?

by

You would declare your main jQuery scripts within the master page, as you would normally:

<head runat="server">
  <link href="https://stackoverflow.com/Content/Interlude.css" rel="Stylesheet" type="text/css" />
  <script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
  <asp:ContentPlaceHolder ID="head" runat="server">
  </asp:ContentPlaceHolder>
</head>

And then any page specific JS files could be loaded within the Content controls that reference the Head ContentPlaceholder.

However, a better option would be to look into the ScriptManager and ScriptManagerProxy controls – these can provide you with a lot more control over the way your JS files are served to the client.

So you would place a ScriptManager control in you master page, and add a reference to the jQuery core code in that:

<body>
  <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery-1.3.2.min.js" />
      </Scripts>
    </asp:ScriptManager>

Then, in your page that requires some custom JS files, or a jQuery plugin, you can have:

<asp:Content ID="bodyContent" ContentPlaceholderID="body">
  <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
      <Scripts>
        <asp:ScriptReference Path="/Scripts/jquery.fancybox-1.2.1.pack.js" />
      </Scripts>
  </asp:ScriptManagerProxy>

The ScriptManager allows you to do things like control where on the page scripts are rendered with LoadScriptsBeforeUI (or better yet, after by setting it to False).

More Related Contents:

  1. How do I run different versions of jQuery on the same page?
  2. How to stop ASP.NET from changing IDs in order to use jQuery
  3. jQuery UI ” $(“#datepicker”).datepicker is not a function”
  4. ASP.NET Server does not process pages asynchronously
  5. Calling an ASP.NET server side method via jQuery
  6. How to use jQuery to call an ASP.NET web service?
  7. What does .d in JSON mean?
  8. Using jQuery for AJAX with ASP.NET Webforms [closed]
  9. jQuery Autocomplete and ASP.NET
  10. Pass Multiple Parameters to jQuery ajax call
  11. How can I run some javascript after an update panel refreshes?
  12. Call ASP.NET PageMethod/WebMethod with jQuery – returns whole page
  13. Rebinding events in jQuery after Ajax update (updatepanel)
  14. jQuery Validation plugin in ASP.NET Web Forms
  15. Unexpected Caching of AJAX results in IE8
  16. ASP.Net Master Page and File path issues
  17. file download by calling .ashx page
  18. can jquery ajax call external webservice?
  19. How can I produce JSONP from an ASP.NET web service for cross-domain calls?
  20. Jquery AJAX with ASP.NET WebMethod Returning Entire Page
  21. jqgrid add row and send data to webservice for insert
  22. how to access master page control from content page
  23. asp.net web forms json return result
  24. how to set a default ‘enter’ on a certain button
  25. How can I determine the element type of a matched element in jQuery?
  26. How to capture submit event using jQuery in an ASP.NET application?
  27. calling an ascx page method using jquery
  28. Change textbox’s css class when ASP.NET Validation fails
  29. asmx web service, json, javascript/jquery?
  30. Enable/disable asp.net validator controls within a specific “ValidationGroup” with jQuery?

Leave a Comment