Monday, June 25, 2007 4:07 AM
Well, as promised I would start posting the code snippets and samples which I demoed at TechMela. I hope many of you who attended TechMela chose to attend the Web Platform track and stuck to it for the three days where we delivered exciting sessions on ASP.NET Futures, Silverlight and Windows Live. On the first day, the first session I delivered was on AJAX Enabling or Upgrading your ASP.NET 2.0 applications to AJAX. This article explains the steps involved.
The first step in AJAX enabling your ASP.NET 2.0 Application is to install ASP.NET AJAX. You can download and install the same from http://ajax.asp.net/downloads/default.aspx?tabid=47
Once you have installed the same, when you open Visual Studio 2005 and create a new Web Site or open an existing Website, you would be able to see "AJAX Extensions" Tab in the Toolkit on the left. This provides you the set of ASP.NET AJAX Server controls that can be used in your applications. But that is only after you do some work.
In order for your ASP.NET 2.0 applications to understand AJAX, you need to modify your Web.Config file settings to explain what the server side controls like UpdatePanel mean. So, here it goes.
Start Visual Studio 2005 and open your existing ASP.NET 2.0 Website / Application. Open the Web.Config file and start adding the following settings to the same:- (Forewarning: Modifying Web.Config incorrectly makes your site inaccessible and I would suggest you take a back up of your existing web.config file before making the following changes. This article is intended for people with prior experience in dealing with web.config file, settings etc., and if you arent very convenient working with the Web.Config file, make your administrator or other experienced developers make these changes)
1. Below the <configuration> tag, add the following settings:-
<configSections>
<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/>
<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
</sectionGroup>
</sectionGroup>
</sectionGroup>
</configSections>
What we have done in this step is registering the System.Web.Extensions namespace, the assembly and its various handlers that are useful in handling AJAX for your ASP.NET 2.0 Application.
2. Then, below the <system.web> add the following settings:-
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</controls>
</pages>
In this step, we registered the tagprefix of ASP for the ASP.NET AJAX Server controls like UpdatePanel so that we can use the same <asp: prefix while using the same in your pages. Ex.- <asp:UpdatePanel>
3. Then find the <compilation debug="false" /> and you need to replace this line with the following settings:-
<compilation debug="true">
<assemblies>
<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</assemblies>
</compilation>
This step enables compilation for your website and adds the reference assembly for System.Web.Extensions.
4. Then below the compilation settings (above step), add the following:-
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
<httpModules>
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</httpModules>
What we have done here is to register the Http Handler and specify that Web Services might be handled using Javascript (asynchronous callback) as well as add the ScriptModule Http Module.
5. Then, after the </system.web> end tag, add the following system.web.extensions settings:-
<system.web.extensions>
<scripting>
<webServices>
<!-- Uncomment this line to customize maxJsonLength and add a custom converter -->
<!--
<jsonSerialization maxJsonLength="500">
<converters>
<add name="ConvertMe" type="Acme.SubAcme.ConvertMeTypeConverter"/>
</converters>
</jsonSerialization>
-->
<!-- Uncomment this line to enable the authentication service. Include requireSSL="true" if appropriate. -->
<!--
<authenticationService enabled="true" requireSSL = "true|false"/>
-->
<!-- Uncomment these lines to enable the profile service. To allow profile properties to be retrieved
and modified in ASP.NET AJAX applications, you need to add each property name to the readAccessProperties and
writeAccessProperties attributes. -->
<!--
<profileService enabled="true"
readAccessProperties="propertyname1,propertyname2"
writeAccessProperties="propertyname1,propertyname2" />
-->
</webServices>
<!--
<scriptResourceHandler enableCompression="true" enableCaching="true" />
-->
</scripting>
</system.web.extensions>
In this step, we have additional steps where we can play with JSON Serialization settings and enabling some of the Application Services like AuthenticationService, ProfileService etc.,
6. Thereafter, add the following system.webServer settings:-
<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<modules>
<add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</modules>
<handlers>
<remove name="WebServiceHandlerFactory-Integrated"/>
<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</handlers>
</system.webServer>
The above steps registers the ScriptHandlerFactory for Webservices and the AXD that needs to handle the requests.
Once you have added the above settings, you would be able to add Script Manager tag to your pages and also use the server side controls like UpdatePanel, UpdateProgress etc., as well as the Sys Microsoft AJAX Library namespace and its classes.
All of the above steps are required only when you are upgrading your existing ASP.NET 2.0 Applications to AJAX. However, if you use the "File - New - ASP.NET AJAX Enabled Website" template to create your website, all the above settings would be added automatically to your web.config file and you can directly start using the AJAX Server Side controls and other Library functions.
Hope this helps.
Cheers !!!