Make web.config changes

The first and the most important thing to do to AJAX-enable an existing site is to set up the web.config file with all the proper configuration settings. Several groups of configuration settings must be added. These settings include Http Handlers and Http Modules as well.

Best way is to create an empty AJAX-enabled site and copy the configuration settings from that web.config file. You can do that by choosing "ASP.NET AJAX-Enabled Web Site" template from the New Web Site dialog box. This will create a very simple, empty (Default.aspx) web site, but web.config file will be filled with tons and tons of configuration settings.

There are two approaches to confidently copying all the AJAX settings into your existing web.config file:

1. Replace your web.config file entirely with the web.config file from the newly create AJAX-enabled site. On top of that add the config settings specific to your site. This works perfectly if your current web.config isn’t filled with tons and tons of config settings. A simpler site might have a few settings like connectionStrings, roleManager, authentication, etc. Just add these settings back.

2. Second approach is copy-paste the individual sections from the newly created AJAX-enabled site’s web.config file. If you have a cluttered, dense, filled-up web.config file, this approach is better suited.

You will be copy-pasting the following sections:

• configSections pages/controls compilation/assemblies
• httpHandlers
• httpModules
• system.web.extensions
• system.webServer

You will know you have not added the above settings properly, if: - Project doesn’t compile (obviously) - You might get an error like "Sys is undefined" on the AJAX-enabled page (the example below)

AJAX-enabled Page

After the web.config changes, adding partial rendering to a page is very simple. Drag ScriptManager from the Toolbox on to the page. Then wrap the controls you want inside an UpdatePanel.

ScriptManager must appear before the Update Panel (or the AJAX control that uses the ScriptManager).

In the sample above, I have wrapped a textbox and a button inside UpdatePanel/ContentTemplate. When I click the button, a name is generated for me. With the UpdatePanel, there won’t be an entire page refresh (just the name in the text box will be updated).