Proper way to include scripts in an asp.net page

Question

I've got an ASP.NET application that uses a mixture of ASP.NET AJAX (Including UpdatePanel) and jQuery written by several developers of differing backgrounds.

Some included scripts within the ScriptManager itself <asp:ScriptManager><Scripts><asp:ScriptReference...., while others used Page.ClientScript.RegisterClientScriptInclude in the code behind, and others used straight <script src=""> to include scripts.

I'd like to consolidate to a single way of handling this if possible, but I'm not sure what the pros/cons of each way are and which way is preferred.

---

One example would be:

protected override void Render(HtmlTextWriter writer)
 {
    Page.ClientScript.RegisterClientScriptInclude("jQuery", ResolveClientUrl("~/scripts/jquery/js/jquery-1.4.2.min.js"));    
    base.Render(writer);
}

vs

<asp:ScriptManager ID="ScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/scripts/jquery/js/jquery-1.4.2.min.js" />
    </Scripts>
</asp:ScriptManager>

vs

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

Graybill

Answer 1

It's not always possible to include all script in the markup.
If the script depends on dynamic data then you'll need to "inject" the script from the code behind.

My rule is to always try to avoid "injecting" script from code behind if possible and only use that as a last resort.

Edit:
Using scriptmanager is prefered if you have many different script files.
When using scriptmanager all scripts will be "concatenated" into a single file. This has an impact on how the browser downloads the scripts. Browsers usually have a limit of 2 concurrent connections and if you have 10 scripts then you'll need to download them all in 5 steps. Scriptmanager will see to it that it all happens in a single step.

Agog

There's nothing depending on dynamic data, so I would prefer to move them to markup. My gut feeling is putting them in the ScriptManager would be "better", but I've got nothing to support that. – Graybill

Answer 2

An <asp:scriptreference> is the declarative equivalent of calling ScriptManager.RegisterScriptBlock(), much like any other asp.net control declaration is similar to doing a programmatic Controls.Add().

That being said, there really isn't a "preferred way". If you're building distributable web controls, then you'll want to be calling the various .RegisterScript...() methods from your control's setup routines, rather than relying on the user having to add markup.

If you just want to include scripts in a website, it's probably more convenient to use the markup method.

If you're adding scripts during Ajax calls, then you would want to use the ScriptManager to do it. If you're adding scripts on regular postbacks, then you would want to use the ClientScriptManager to do it.

So... it's tough to enumerate the pros and cons. In your case, if you're not building redistributable code, then the most obvious and straightforward way is to include script references via markup, because it tends to be more visible. But I'm not sure you'll be able to consolidate every occurrence to one method, because all the methods exist for a reason, and you may need to use more than one.

Moria

Great answer. This gives me a better sense of when to use each approach, and in my case it's just including scripts in a website. I don't think our script-includes differ between gets and posts. – Graybill

Answer 3

I would recommend the Ajax script loader (if you are working in an asp.net, asp.net ajax library, jquery environment)

http://www.asp.net/ajaxlibrary/Ajax%20Script%20Loader.ashx

http://www.asp.net/ajaxlibrary/HOW%20TO%20Combine%20Scripts%20using%20the%20Script%20Loader.ashx

Officialdom