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:
8 Comments
I was just thinking about ASP.NET AJAX 4.0 and the ScriptManager Control and you’ve really helped out. Thanks!
thanks for your help!
fyfgoogle-
I think your issue is because your scripts are in the head. Specifically the line Sys.Application.add_init(appInit);. My guess is that the MicrosoftAjax.js script is being loaded AFTER this line, and therefore giving you the error.
-Damien
[b]The html examples work very well.[/b]
[b]I include the preview4.0 js using <script> without the scriptManager ,the codes work very well. the Codes: [/b]
<head runat="server">
<title></title>
<link href="styles/list.css"rel="stylesheet" type="text/css" />
[b]<script type="text/javascript" src="../MicrosoftAjax/MicrosoftAjax.debug.js"></script>
<script type="text/javascript" src="../MicrosoftAjax/MicrosoftAjaxTemplates.debug.js"></script>[/b]
<script type="text/javascript">
Sys.Application.add_init(appInit);
var images1 = [
{ Name: "Crashing water", Description: "A splash of waves captured." },
{ Name: "Dazed", Description: "Mid-day heat?" },
{ Name: "Close Zoom on Giraffe", Description: "Closeup of a Giraffe at Wild Animal Park." },
{ Name: "Pier", Description: "A pier in Morro Bay." },
{ Name: "Seagull reflections", Description: "Seagulls at peace." },
{ Name: "Spain", Description: "In Balboa Park, in downtown San Diego." },
{ Name: "Sumatran Tiger", Description: "Restful." }
];
function setData(data) {
$find("imageListView").set_data(data);
}
function appInit() {
$create(
Sys.UI.DataView,
{
data: images1
},
null,
null,
$get("imageListView")
);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<!–Client Template used by attached DataView–>
<ul id="imageListView" class="list sys-template">
<li>
<!–One-time expression evaluation: Evaluating fields–>
<span class="name">{{ Name }}</span>
<span class="value">{{ Description }}</span>
</li>
</ul>
</div>
</form>
</body>
</html>
[b]But i want to use the scriptManager ,then show erros:
[i]sys undefined;type undefined[/i]
[/b]
[b]why? where is the mistakes?[/b]
<head runat="server">
<title></title>
<link href="styles/list.css"rel="stylesheet" type="text/css" />
<script type="text/javascript">
Sys.Application.add_init(appInit);
var images1 = [
{ Name: "Crashing water", Description: "A splash of waves captured." },
{ Name: "Dazed", Description: "Mid-day heat?" },
{ Name: "Close Zoom on Giraffe", Description: "Closeup of a Giraffe at Wild Animal Park." },
{ Name: "Pier", Description: "A pier in Morro Bay." },
{ Name: "Seagull reflections", Description: "Seagulls at peace." },
{ Name: "Spain", Description: "In Balboa Park, in downtown San Diego." },
{ Name: "Sumatran Tiger", Description: "Restful." }
];
function setData(data) {
$find("imageListView").set_data(data);
}
function appInit() {
$create(
Sys.UI.DataView,
{
data: images1
},
null,
null,
$get("imageListView")
);
}
</script>
</head>
<body>
<form id="form1" runat="server">
[b]<asp:ScriptManager ID="sm" runat="server">
<Scripts>
<asp:ScriptReference ScriptMode="Inherit" Name="MicrosoftAjax.js" Path="~/MicrosoftAjax/MicrosoftAjax.debug.js" />
<asp:ScriptReference ScriptMode="Inherit" Path="~/MicrosoftAjax/MicrosoftAjaxTemplates.debug.js" />
<asp:ScriptReference ScriptMode="Inherit" Path="~/MicrosoftAjax/MicrosoftAjaxAdoNet.debug.js" />
</Scripts>
</asp:ScriptManager>[/b] <div>
<!–Client Template used by attached DataView–>
<ul id="imageListView" class="list sys-template">
<li>
<!–One-time expression evaluation: Evaluating fields–>
<span class="name">{{ Name }}</span>
<span class="value">{{ Description }}</span>
</li>
</ul>
</div>
</form>
</body>
</html>
fyfgoogle -
Does it work with the html examples? For example, in the samples, does 1_Basic_DataView/2_DataView_SetData_Declarative.htm work?
With the data samples, is it the same script error, or could it be that you don’t have SQLExpress installed? I can’t imagine why MicrosoftAjax.js wouldn’t be there.
-Damien
I didn’t use master page,and use 4.0 version of MicrosoftAjax.js ,errors continue。
I just downloaded the AspNetAjaxPreview4Samples.zip from
http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=24645 ,
and run AspNetAjaxPreview4Samples1_Basic_DataView3_Data_From_Service.aspx in vs2008sp1,
but it shows the same error.
why？
fyfgoogle -
Check out my latest post http://blogs.visoftinc.com/archive/2009/08/27/ASP.NET-4.0-AJAX-Issues.aspx . I found some issues with the ScriptManager when using a Composite Script. The key to most of the problems like you are describing is making sure that the 4.0 version of MicrosoftAjax.js gets loaded.
Hope this helps,
-Damien
I use Preview 4 and the ASP.NET 3.5 ScriptManager and
configure the scriptManager just like what you wrote,
but i got some problem like:
one is "sys undefined"; another is "type undefined".
why?how to fix it?