ansaurus

Question

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

Answer 1

+2 A:

Alright use a different contentplaceholder for your script. It should look like this

<script type="text/javascript" src="myscript.js" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server">

</asp:ContentPlaceHolder>

Place this tag at the bottom of your masterpage, close to the tag. This will allow you add scripts on the masterpage and also on your pages as well. Make sure that your scripts are loading in the right order by viewing the page source and ensuring the HTML rendered in the right way. Good luck.

Oh one more thing, make sure jQuery and then FancyBox load up before anything other js you may have out there or else it won't work. Javascript loads in the order it was called, jQuery must load first!

Al Katawazi 2009-04-08 19:19:10

Does javascript load before html markup?

Xaisoft 2009-04-08 19:40:26

In that example yes, it would.

Zhaph - Ben Duguid 2009-04-08 19:44:55

Answer 2

+10 A:

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

<head runat="server">
  <link href="/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 you 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).

Zhaph - Ben Duguid 2009-04-08 19:44:22

Answer 3

A:

I use this method.

<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>

Just place it above your tag...

<asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

Kieran 2010-02-11 01:40:25

ansaurus

tags:

views:

answers:

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

related questions