{infiniteZest}
// Articles. Tutorials. Utilities.
Home  |   Search  |   Login  
Categories Skip Navigation Links
New / All
AJAX
Apple
ASP.NET
.NET
Git
Google / Android
Python / IronPython
Miscellaneous
SQL Server
Adding Partial Page Rendering to an already existing non-AJAX page
Summary
In a lot of situations, web sites have already been created with extensive functionality using ASP.NET 2.0. Now you want to add Microsoft AJAX selectively to parts of certain pages. The Partial Page Rendering using the Update Panel is the first place you start for this situation.
 
Table of Contents

Make web.config changes

AJAX-enabled Page

 

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).

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
 
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:TextBox ID="txtName" runat="server" Width="75%" Font-Names="Verdana">
        </asp:TextBox>
        <asp:Button ID="btnName" Width="23%" runat="server" Text="Name" OnClick="btnName_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

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).

Bookmark and Share This

More Articles With Similar Tags
Google Suggest style autocomplete feature is readily available from the AutoCompleteExtender control from the AJAX Toolkit. This article shows how to use control with the data obtained from database.
icon-ajaxservercontrol-new-project.jpg
This article explains the various pieces of the code generated for beginning an AJAX Server Control. The class ScriptControl and the over-ridden methods GetScriptDescriptors() and GetScriptReferences() are explained, among others.
icon-ajaxservercontrol-toolbox.jpg
This article talks about using an AJAX Server Control from a web site. Registering the control and adding a ScriptManager are also discussed.
This test has questions about using an AJAX Server Control from a web site. Registering the control and adding a ScriptManager are also included.
This is a test on the various pieces of the code generated for an AJAX Server Control. This includes the class ScriptControl and the over-ridden methods GetScriptDescriptors() and GetScriptReferences().
About  Contact  Privacy Policy  Site Map