Science Report | Biology News, Economics News, Computer Science News, Mathematics News, Physics News, Psychology News
Chris Pietschmann
The ASP.NET AJAX ScriptManager makes it really easy to include JavaScript references and register JavaScript blocks into the rendered Page output of an ASP.NET WebForms application. However nice the ScriptManager control is, it’s still just a WebForms control for use with ASP.NET AJAX; thus it’s use isn’t really supported with ASP.NET MVC. Also, to make things just a little more difficult, ASP.NET MVC doesn’t have it’s own “ScriptManager” implementation. This brings me to the point of posting this…
I have worked out a really simple “ScriptManager” component for use with ASP.NET MVC, and I think it works really nice to help simplify the effort of including JavaScript blocks and references in a page.
Setting up the “SimpleScriptManager” for use
To use the “SimpleScriptManager” with ASP.NET MVC you must first Import the “SimpleScriptManager” namespace into your Master Page. Then you must place a single line of code in the Master Page file at the location you want to Render the Script Includes and Blocks to the Page. In order for it to work properly, the Render code needs to be place at the very end of the Master Page; preferably just before the closing Body tag.
Here’s a really short example Master Page file with the “SimpleScriptManager” namespace imported and the call to “SimpleScriptManager().Render()” located at the very end of the page just before the closing Body tag.
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %> <%-- The SimpleScriptManager Namespace must be Imported to be able to use the Html.SimpleScriptManager Extension --%> <%@ Import Namespace="SimpleScriptManager" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title> <link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> </head> <body> <asp:ContentPlaceHolder ID="MainContent" runat="server" /> <%-- Render all the Scripts to the Page --%> <%-- Must be located at the very end of the Master Page to work properly --%> <% Html.SimpleScriptManager().Render(); %> </body> </html>
This may look a little strange to you since you may be used to placing all your JavaScript Blocks and Script Includes at the top of the page within the <HEAD> tags. However, in order for the “SimpleScriptManager” to work property the call to Render to the page MUST be located at the end of the Master Page file. This allows any other server controls, user controls or pages to add Script Blocks and Includes at any time during the process or building/rendering the page, and then at the end of the Master Page (when the page is just about finished being rendered) the “SimpleScriptManager().Render()” method is called and the scripts are all rendered out to the page at that time. If the “"SimpleScriptManager().Render()” method is called prior to all other components on the Page, then any Script Blocks or Includes added to the “SimpleScriptManager” after Render is called will not be included within the final rendering of the Page that gets sent to the client.
Using the “SimpleScriptManager”
The “SimpleScriptManager” has only two fairly simple methods: ScriptInclude and Script.
“SimpleScriptManager.ScriptInclude” Method
To add a simple Script Include within the page, you just call the “ScriptManager.ScriptInclude” method and pass in the Location / Url of the JavaScript file to include within the page. The Script Location / Url can be either an Absolute or Virtual (“App Relative”) Url.
<% Html.SimpleScriptManager().ScriptInclude("~/Scripts/jquery-1.3.2.js"); %>
<% Html.SimpleScriptManager().ScriptInclude("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"); %>
You can also pass in a “Key” for the specific Script Include you’re registering. This key is a unique identifier used within your application for the specified Script Include, and it allows you to ensure that only a single include/reference to that specific script will get rendered within the Page.
<% Html.SimpleScriptManager().ScriptInclude("jquery", "~/Scripts/jquery-1.3.2.js"); %>
For instance the second example of “ScriptInclude” above specifies the Key of “jquery”. You would be able to include this “ScriptInclude” call within any User Controls and/or Pages within your application that require that the “jquery-1.3.2.js” script be included within the page to work, and no matter how many of those controls are rendered to the page, the script would only have a single include/reference rendered to the Page.
I know this isn’t a very good example of adding a script reference that may only be needed within a couple pages of an application, since you’ll most likely want jQuery included within every Page of your Application. To do this you’ll just add the “ScriptInclude” call to top of the Master Page file itself. However, I’m sure you …