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

Print | posted on Monday, June 25, 2007 4:07 AM

Comments on this post

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

Requesting 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
Left by Ash on Sep 14, 2007 2:27 AM

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

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

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

Requesting 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"/>
Left by Emiliya on Jul 17, 2008 8:03 AM

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

Requesting 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..
Left by prasad on Aug 05, 2008 4:31 AM

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

Requesting Gravatar...
Thanks heaps , works fine
Left by Ashish on Oct 09, 2008 6:03 AM

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

Requesting Gravatar...
Great,
Thanks a lot. It helped my website instantly.
Left by Kishore on Dec 11, 2008 8:37 PM

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

Requesting 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.
Left by Kishore on Dec 11, 2008 9:08 PM

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

Requesting Gravatar...
Thank u very much...
this code is working fine ....
Left by Sasi on Dec 30, 2008 10:11 PM

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

Requesting Gravatar...
thanks, my website is now ajax enabled. thanks.
Left by shahid darbar on Jan 17, 2009 9:27 PM

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

Requesting 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.
Left by William Hill on Feb 01, 2009 10:40 PM

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

Requesting Gravatar...
Thanking You a lot. It Solves my problem...It works...great...
Left by Narvirsinh Raj on Jun 02, 2009 6:21 PM

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

Requesting Gravatar...
this is mind blowing
Left by navnath on Jun 21, 2009 10:03 AM

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

Requesting 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
Left by sarma on Aug 24, 2009 7:48 PM

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

Requesting Gravatar...
Thanks a ton! works great!!
Left by ajaxuser on Sep 16, 2009 11:35 AM

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

Requesting 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.
Left by Lester on Sep 22, 2009 9:13 PM

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

Requesting Gravatar...
now i cannot see the errors even adding <customErrors mode="Off"/>

is there something else i need to do?


Thanks!
Left by tanya on Dec 03, 2009 8:01 AM

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

Requesting Gravatar...
Thanks yaar.. It's cool and it also works.. was searching in web for this problem.. U fixed it.. Thanks once again
Left by Pranesh on Dec 21, 2009 7:20 PM

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

Requesting Gravatar...
my error is different what can I do error:
Error 1 Assembly 'AjaxControlToolkit, Version=3.0.30930.28736, Culture=neutral, PublicKeyToken=28f01b0e84b6d53e' uses 'System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' which has a higher version than referenced assembly 'System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35'
Left by Narinder on Jan 14, 2010 11:35 PM

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

Requesting Gravatar...
Hey thanks a lot, though i dont have an idea of how exactly these configurations work , i am happy that my application works fine at last :))

thanks a lot .
Left by Godwin on Feb 14, 2010 8:07 PM

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

Requesting Gravatar...
My web site is still not working as per the requiremnet. i have made all these chnages in config file. please suggest
Left by Shweta Agarwal on Dec 01, 2010 11:27 AM

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

Requesting Gravatar...
Thank you very much....
My Web site is working fine now with AJAX.
But there is an issue, the styles specified in CSS class are not applying but on the other hand Inline styles are working.

Once again thanks for this solution....
Left by Mrudul on Jan 27, 2011 4:43 PM

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

Requesting Gravatar...
thnk u very much... my code s wrkin gud nw
Left by RUTH on Mar 31, 2011 12:46 PM

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

Requesting Gravatar...
wiii thanks!
Left by Kary on Apr 26, 2011 5:33 AM

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

Requesting Gravatar...
THANK YOU THANK YOU THANK YOU
Thank you for the step by step!
MSDN articles were not as helpful as I had hoped, but your article solved my problem. THANK YOU!
Left by Maria on Jul 07, 2011 11:20 PM

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

Requesting Gravatar...
Thanks a lot! Finaly I can use AJAX tags!
Left by TL on Dec 28, 2011 9:38 PM

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

Requesting Gravatar...
thnxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx so so much.........
Left by karan on Jan 27, 2012 10:52 PM

Your comment:

 (will show your gravatar)