AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

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 !!! 

posted @ Monday, June 25, 2007 4:07 AM

Print

Comments on this entry:

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by Ash at 9/14/2007 2:27 AM
Gravatar
I've tried everything that you've written above, and then without even adding any AJAX controls to my page, I tried to compile my website but I get a huge long list of errors, the first being "MasterPage" is abiguous and a whole load of other errors - most of which say things like "XXX" is not a valid member of ASp.masterpage

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by Kelly at 6/16/2008 4:07 PM
Gravatar
thanks heaps, I found your article really helpful and my ajax is working perfectly now.

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by Emiliya at 7/17/2008 8:03 AM
Gravatar
Thank you, everything is working fine now.
I had one more problem. In order to make it working I have to remove <xhtmlConformance mode="Legacy"/>

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by prasad at 8/5/2008 4:31 AM
Gravatar
Thanks a lot...
Its toooo good.. You have mentioned everything in such a way that there is no chance of confusion..
Thanks a lot again..

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by Ashish at 10/9/2008 6:03 AM
Gravatar
Thanks heaps , works fine

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by Kishore at 12/11/2008 8:37 PM
Gravatar
Great,
Thanks a lot. It helped my website instantly.

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by Kishore at 12/11/2008 9:08 PM
Gravatar
I just realized that if you start your page by using AjaxEnabledWebsite, you will see that the web.config of that page has all these elements.
But atleast now we know what was missing.

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by Sasi at 12/30/2008 10:11 PM
Gravatar
Thank u very much...
this code is working fine ....

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by shahid darbar at 1/17/2009 9:27 PM
Gravatar
thanks, my website is now ajax enabled. thanks.

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by William Hill at 2/1/2009 10:40 PM
Gravatar
After adding these to my web.config I was still getting an error that ScriptManager was an unrecognized tag. I added a reference to System.Web.Extensions to my project and the error went away. Hope that helps someone.

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by Narvirsinh Raj at 6/2/2009 6:21 PM
Gravatar
Thanking You a lot. It Solves my problem...It works...great...

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by navnath at 6/21/2009 10:03 AM
Gravatar
this is mind blowing

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by sarma at 8/24/2009 7:48 PM
Gravatar
I tried everything mentioned above but still shows
element scriptmanager is not a known element. This can occur if there is a compilation error in the websit

Please let me know what is the problem

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by ajaxuser at 9/16/2009 11:35 AM
Gravatar
Thanks a ton! works great!!

# re: AJAX Enabling your ASP.NET 2.0 Applications - My first session at Tech Mela

Left by Lester at 9/22/2009 9:13 PM
Gravatar
Thank You, made me to understand that I can create a new site using the AjaxEnabledWebsite template, copy the webconfig, add my custom changes like authorisation, connection strings etc. Make sure I add missing dll's to my bin directory after I make reference to them in order to avoid the cannot find system.web.extensions, etc. errors. Great! Job..Tks a alot.

Your comment:



 (will not be displayed)


 
 
 
 
 

Live Comment Preview:

 
«November»
SunMonTueWedThuFriSat
25262728293031
1234567
891011121314
15161718192021
22232425262728
293012345