ansaurus

Question

Where should a script block with jquery code be placed on an ASP.NET MVC Master Page?

Answer 1

+9 A:

Hmmm ...

To answer your first question: They should be put in the <head> element.

Also, usually I use the 'bind' method when sinking events in the DOM (like it looks like you're trying to do).

So, code would look like:

$(document).ready(function()
{
    //  Bind each link to a handler:
    $("a").bind('click dblclick', function(event)
    {
         alert('click');
    })
});

Also, a few design tips (since you're working with something close to my heart (ASP.NET MVC with jQuery):

Add an extra 'ContentPlaceHolder' at the bottom of your master page's <head> element. This will allow you to have page specific javascript run in it's proper location: in the 'head' section of the page, and it'll allow you to make page-specific javascript includes.

It'll look something like this:

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

Why is this useful? I'll tell you: That jQuery rounded corners plugin you're using might only be used on a few pages -- why include it on every page?

Dan Esparza 2008-11-23 05:33:23

Answer 2

+2 A:

I agree with Dan to add the content placeholder for linking in scripts. However, the head is usually not the best place to put your JavaScript in terms of performance. The best place is at the bottom of the page. So your HTML can load before your JavaScript. See Yahoo's YSlow tip. Your code should still work in the head section though.

I like to put most of my site's JavaScript in one file and link it in to all the pages. If it gets very big you can separate it into several files. This takes advantage of the browser's caching.

As for what's wrong with the jQuery code. I'm not sure. It looks pretty correct. The only thing I'm wondering about is the event parameter. Try taking that out altogether. I know the function is allowed a parameter, but I generally use "this" instead. Also, try renaming the parameter.

Lance Fisher 2008-11-23 07:06:49

Good call on the YSlow tip. I hadn't realized that scripts block parallel downloading.

Dan Esparza 2008-11-23 16:13:37

Answer 3

+1 A:

B) I checked your inline script on quick test page and it works ok, so i advice using Firefox with FireBug plugin installed for finding the problem:

In Firebug's "script" tab use the Watch window on the right to insert and check parts of your script and see what do they return.
I'd start with putting $ in watch window and checking if it's recognized as function(): perhaps jQuery is not linked propertly
Then put $("a") in watch window and check if the set it returns has correct number of items corresponding to "a" selector in a set
Keep running parts of script until you encounter something wrong

æther 2008-11-23 09:09:48

Answer 4

+1 A:

The master page is usually stored in /Views/Shared/Site.Master while scripts are located in /Scripts so these:

<script src="../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>            
<script src="../Scripts/jquery.corner.js" type="text/javascript"></script>

should be

<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.corner.js" type="text/javascript"></script>

but I would suggest using a helper:

  public static class Helper
    {
        private static string ScriptsRoot = "~/scripts/";

        public static string ScriptUrl (string scriptFile)
        {
         return VirtualPathUtility.ToAbsolute (ScriptsRoot + scriptFile);
        }
    }

And then referencing your script like this:

<script type="text/javascript" src="<%= Helper.ScriptUrl("jquery-1.2.6.min.js") %>"></script>
<script type="text/javascript" src="<%= Helper.ScriptUrl("jquery.corner.js") %>"></script>

Todd Smith 2008-11-24 21:09:43

ansaurus

tags:

views:

answers:

Where should a script block with jquery code be placed on an ASP.NET MVC Master Page?

related questions