Puzzle Pieces

I have been using ASP.NET AJAX 4.0 quite a bit lately, as I’m sure most of you are aware from my recent posts. In those posts, I used standard HTML script references to show that ASP.NET AJAX is not reliant upon ASP.NET. I realize that many of you are in fact using ASP.NET, and today we will take a look at using the ScriptManager.

First we’ll look at using the Preview 4 scripts within an ASP.NET 3.5 application (with the ScriptManager of course) as well as using client templates and ADO.NET Data Services with the ScriptManager in ASP.NET 4.0 (Beta 1). After that, we’ll take a closer look at some of the new features of the ScriptManager in ASP.NET 4.0.

Preview 4 and the ASP.NET 3.5 ScriptManager

In my posts on ASP.NET AJAX 4.0 so far, I used standard HTML script references (as stated earlier). However, what if you wanted to incorporate the new ASP.NET AJAX 4.0 scripts with a ScriptManager. I tried this in a recent ASP.NET 3.5 SP1 project, and ran into some issues getting it all to work out. Thanks to this blog (and Bertrand LeRoy), I found the solution.

<asp:scriptmanager id="sm" runat="server">
    <scripts>
        <asp:scriptreference scriptmode="Inherit" name="MicrosoftAjax.js" path="~/scripts/MicrosoftAjax.js" />
        <asp:scriptreference scriptmode="Inherit" path="~/scripts/MicrosoftAjaxAdoNet.js" />
        <asp:scriptreference scriptmode="Inherit" path="~/scripts/MicrosoftAjaxTemplates.js" />
    </scripts>
</asp:scriptmanager>

Client Templates and ASP.NET 4.0 ScriptManager

If you are using Visual Studio 2010 (currently in Beta 1) and you want to use client templates (e.g. DataView) or ADO.NET Data Services, you may think you can just add a ScriptManager to the page (at least I initially did) and everything will work. This isn’t the case. These are new features of ASP.NET AJAX , so you need to add them as ScriptReferences. I’m not sure if this will change for the release, but in an effort to keep the size down, I’m thinking this may be the way it stays. Not that big of a deal, just something to be aware of.

<asp:ScriptManager ID="sm" runat="server">
    <Scripts>
        <asp:ScriptReference Name="MicrosoftAjaxTemplates.js" />
        <asp:ScriptReference Name="MicrosoftAjaxAdoNet.js" />
    </Scripts>
</asp:ScriptManager>

ASP.NET 4.0 ScriptManager - Activating Elements Declaratively

In my previous posts, you’ve seen both declarative and imperative examples using ASP.NET AJAX components and controls. To refresh your memory, let’s look at the “Simplest Live Binding Example” from my data binding post. This snippet uses live binding and client templates (the DataView). If you need a refresher on the basics of the DataView and using it declaratively, be sure to check out my client template post.

<body xmlns:sys="javascript:Sys"
      xmlns:dataview="javascript:Sys.UI.DataView"
      sys:activate="simpleForm">
    <div id="simpleForm" class="sys-template"
        sys:attach="dataview"
         dataview:data="{{ { name:'' } }}">
        Name: <input id="name" type="text" value="{binding name}" /><br />
        <span id="nameDisplay">{binding name}</span>
    </div>
</body>

One of the keys to getting this to work is to have it activate and bind when the page loads. In the declarative syntax, this is achieved through the sys:activate attribute found on the body tag. In some instances, such as working with a content page, you may not have access to the body tag. In this case the new ClientElementsToActivate property of the ScriptManager and ScriptManagerProxy controls, helps to alleviate this problem. The ClientElementsToActivate property accepts a comma-delimited list of elements to activate, just like the sys:activate attribute does. Taking the previous snippet as an example, we can see how using this new property can be used with the ScriptManager (note I have included the ScriptReference since this sample requires the DataView, not because it is needed to use the ClientElementsToActivate property).

<asp:ScriptManager ID="sm"  runat="server"
       ClientElementsToActivate="simpleForm">
    <Scripts>
        <asp:ScriptReference  Name="MicrosoftAjaxTemplates.js" />
    </Scripts>
</asp:ScriptManager>
<div id="simpleForm" class="sys-template"
    sys:attach="dataview"
     dataview:data="{{ { name:'' } }}">
    ...
</div>

ASP.NET 4.0 ScriptManager – ASP.NET AJAX Enhancements

A new feature of the ScriptManager in ASP.NET 4.0 is the ability to use only parts of the ASP.NET AJAX Library. In addition, you can also use the ScriptManager without using any of the ASP.NET AJAX framework. You can now get the benefits from ScriptManager such as support for debug / release modes, localization, script combining, etc, without having to have ASP.NET AJAX scripts rendered by default (as it is now in 3.5).

In ASP.NET 4.0, the default behavior is the same as the current behavior in ASP.NET 3.5, meaning the complete ASP.NET AJAX library is included by default. Remember from earlier that this does not include MicrosoftAjaxTemplates.js or MicrosoftAjaxAdoNet.js (at least in Beta 1).

The ScriptManager control has a new property, MicrosoftAjaxMode, which allows you to override the default behavior. The settings available for the MicrosoftAjaxMode are:

  • Enabled – The default value, all Microsoft AJAX script are included. This is the same as the current behavior (e.g. ASP.NET 3.5).
  • Explicit – This allows you to pick and choose what scripts are referenced. You need to make sure that you include all scripts that have dependencies on one another.
  • Disabled – All the the Microsoft ASP.NET AJAX scripts are disabled and no scripts are referenced automatically.

If you use Explicit mode, the following Microsoft AJAX scripts are available for reference:

  • MicrosoftAjaxCore.js
  • MicrosoftAjaxComponentModel.js
  • MicrosoftAjaxSerialization.js
  • MicrosoftAjaxGlobalization.js
  • MicrosoftAjaxHistory.js
  • MicrosoftAjaxNetwork.js
  • MicrosoftAjaxWebServices.js
  • MicrosoftAjaxApplicationServices.js
  • MicrosoftAjaxTemplates.js (New for ASP.NET AJAX 4.0)
  • MicrosoftAjaxAdoNet.js (New for ASP.NET AJAX 4.0)

For more information on the new functionality as well as the dependencies for the Microsoft AJAX Library scripts, refer to the ASP.NET 4.0 and Visual Studio 2010 Web Development Overview whitepaper.

More ASP.NET AJAX 4.0 Reading

If you are interested in ASP.NET AJAX 4.0, and have missed my past posts, be sure to check out: