InsertScript for ASP.NET MVC

I recently had a situation where a custom control I was using in a page required jQuery.  Since I like the idea of keeping such controls self-contained, I added the usual <script type="text/javascript" src="jquery-1.2.6.min.js"></script> tag.

No problem – until I then loaded a page that included this control AND also had its own requirement for jQuery.  It seems that jQuery doesn’t like begin included twice, so I had a choice.  I could:

• Include jQuery once in the header (or wherever) of each page (i.e. in the Master Page), hence breaking the self-containment of my control, or;
• Write a helper method to keep track of which script files had been included in each page and hence allow a script file to only be included once per request.

It should come as no surprise (as otherwise there would be no point in this post) that I went for the second option.

The HttpContext object has an Items collection, and since the HttpContext has a lifetime of one request, we can use this Items collection to keep track of our included files.  Just add the following static method to a static class (Don’t you just love Extension Methods!):

public static string InsertScript(this HtmlHelper helper, string jsFile)
{
    const string RESID = "__resources";

    List<string> _resources = (List<string>)helper.ViewContext.HttpContext.Items[RESID];
    if (_resources == null)
    {
        _resources = new List<string>();
        helper.ViewContext.HttpContext.Items[RESID] = _resources;
    }

    string url = ScriptUrl(jsFile);
    if (!_resources.Contains(url.ToLower()))
    {
        _resources.Add(url.ToLower());
        return "<script type=\"text/javascript\" src=\"" + url + "\"></script>";
    }
    else
        return "";
}

Notice the call to ScriptUrl(jsFile) – this is just a static helper method to map javascript file names to the Scripts folder in my web app. It’s up to you whether you use such a method.

It’s now just a matter of calling this from your .aspx pages, replacing the usual
<script type="text/javascript" src="myjavascriptfile.js"></script>
with
<%= Html.InsertScript("myjavascriptfile.js") %>

JSON and the Great Uncaching

Internet Explorer has this annoying little habit of caching AJAX calls.  This recently came out to bite me on a site I was working on which used AJAX to fill some drop-down boxes on an edit page.  The first time through was fine (eg. editing an existing item).  If I then created a new item, lo and behold the drop-down boxes were already selected on the previous item’s value!

This problem only occurs in IE, but there’s an easy solution.  Write a quck javascript function as follows:

function uncache(url) {
    var d = new Date();
    var time = d.getTime();
    return url + ((url.indexOf('?') == -1) ? '?' : '&') + 'time=' + time;
}

Then, whenever you make a parameterless AJAX call (eg. to /GetValues/), run it through the above function instead (eg. uncache(‘/GetValues/’) ).

Web Development Helper

A while ago, I posted a quick note on my desire to use the new ASP.NET MVC framework to create a photo sales website.  In the end, it didn’t work out that way, and I am using the framework to build a new website for my church.

While a huge benefit to ASP.NET MVC is (IMHO) the ability to shed the ASP server side tags, and hence gain complete control over markup and layout within the page, I am amazed at the amount of Javascript I seem to be writing to keep the application ‘Web-2.0-ish’.  In fact, one particular page in the site probably contains more Javascript than the sum total of all Javascript I had written in many years before.

In this, jQuery has been a huge help, but sometimes it’s nice to see exactly what script calls are being made (this applies particularly to Ajax calls) and what is returned.

Enter Nikhil Kothari’s Web Development Helper.  In his words,

Web Development Helper is a free browser extension for Internet Explorer that provides a set of tools and utilities for the Web developer, esp. Ajax and ASP.NET developers. The tool provides features such as a DOM inspector, an HTTP tracing tool, and script diagnostics and immediate window.

My understanding is that Firefox now has a similar tool built in (Firebug) but I have not tried this yet, mainly because the VS2008 development system works with IE.  Tools of this calibre are more than welcome in my opinion.