ASP.NET MVC Html Helper Extensions and Rendering Their Required "include"s

Question

I have build a custom Html Helper extension as follows:

public static string DatePicker(this HtmlHelper helper, string name, string value)
{
        return string.Format(@"<script type='text/javascript'>
$(document).ready(function(){{
    $('#{0}').datepicker({{ 
        changeMonth: true, 
        changeYear:true, 
        dateFormat: 'd-M-yy', 
        firstDay: 1, showButtonPanel: 
        true, 
        showWeek: true 
    }});
}});
</script>
<input type='text' name='{0}' id='{0}' value='{1}'>", name, value);
}

The problem is that this now requires the page to "include" the following:

<script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.ui.datepicker.min.js" type="text/javascript"></script>

And a few other items. The questions are as follows:

1. Is there a serious processing overhead if I were to include these items in EVERY page (like in the Site.Master for example) thus negating the need for the HtmlHelper to organise the "includes" - considering there would end up being about 20 includes for all the different types of jQuery UI widgets used throughout the site.

2. If the HtmlHelper sorts out the "includes", it will add one every time this DatePicker is used (often there are two on a page) Does anyone have a way of determining whether or not the user has already rendered the same type of control on the page, thus not re-including the same jquery libraries when multiple instances of the DatePicker (for example) are used?

Answer 1

Regarding:

1: no processing overhead at all, and no significant size overhead (as in: the files are normally loaded only first time by the browser). I normally would go this approach.

2: no idea, sorry ;) Someone else will pick that up, i think.

Answer 2

To answer number 2, you could do something like the following

<script type='text/javascript'>
    if (typeof jQuery == 'undefined') // test to see if the jQuery function is defined
        document.write("<script type='text/javascript' src='jquery.js'></script>");
</script>

Answer 3

Maybe something of these code pieces will help you to get an idea or two about it:

private static readonly SortedList<int, string> _registeredScriptIncludes = new SortedList<int, string>();

    public static void RegisterScriptInclude(this HtmlHelper htmlhelper, string script)
    {
        if (!_registeredScriptIncludes.ContainsValue(script))
        {
            _registeredScriptIncludes.Add(_registeredScriptIncludes.Count, script);
        }
    }

    public static string RenderScript(this HtmlHelper htmlhelper, string script)
    {
        var scripts = new StringBuilder();
        scripts.AppendLine("<script src='" + script + "' type='text/javascript'></script>");
        return scripts.ToString();
    }

    public static string RenderScripts(this HtmlHelper htmlhelper)
    {
        var scripts = new StringBuilder();
        scripts.AppendLine("<!-- Rendering registered script includes -->");
        foreach (string script in _registeredScriptIncludes.Values)
        {
            scripts.AppendLine("<script src='" + script + "' type='text/javascript'></script>");
        }
        return scripts.ToString();
    }