First, download and install ASP.NET AJAX Framework from asp.net. Add the following entries into your web.config (ya, there's a lot of them) <configuration> <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> <system.web> <compilation debug="true"> <assemblies> <add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" /> </assemblies> </compilation> <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> <pages> <controls> <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </controls> </pages> </system.web> <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> </configuration> Now we'll start with a non-ajax sample page. The page below contains a literal control a textbox and a button. It will take the text entered in the textbox and append it to the literal control. Because this method is very fast, I sleep it for 2 seconds so you can see it. <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> protected void button1_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(2000); if (textbox1.Text != "") { literal1.Text += textbox1.Text + ""; textbox1.Text = ""; } } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>ASP.NET Sample</title> </head> <form id="form1" runat="server"> Page Time: <%=DateTime.Now.ToLongTimeString()%> <asp:Literal runat="server" id="literal1">onetwothree</asp:Literal> <aspanel id="panel1" runat="server" defaultbutton="button1"> <asp:TextBox runat="server" id="textbox1" text="four" /> <asp:button runat="server" id="button1" text="submit" onclick="button1_Click" /> </aspanel> </form> </body> </html> All that's left to do is AJAX it up a bit. Fortunately this part is pretty easy. Include the ScriptManager at the top of the page and wrap everything inside an UpdatePanel. To "pretty things up" a bit, I've also included an UpdateProgress control in the example. and here's the finished code... <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> protected void button1_Click(object sender, EventArgs e) { System.Threading.Thread.Sleep(2000); if (textbox1.Text != "") { literal1.Text += textbox1.Text + ""; textbox1.Text = ""; } } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>ASP.NET AJAX Sample</title> </head> <form id="form1" runat="server"> Page Time: <%=DateTime.Now.ToLongTimeString()%> <asp:scriptmanager id="scriptmanager1" runat="server" /> <asp:UpdatePanel id="updatepanel1" runat="server"> <ContentTemplate> <asp:Literal runat="server" id="literal1">onetwothree</asp:Literal> <aspanel runat="server" defaultbutton="button1"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td><asp:TextBox runat="server" id="textbox1" text="four" /> <asp:button runat="server" id="button1" text="submit" onclick="button1_Click" /></td> <td> <asp:UpdateProgress runat="server" id="updateprogress1"> <ProgressTemplate><img src="indicator.gif" style="margin-left:10px;" /> Updaing... please wait.</ProgressTemplate> </asp:UpdateProgress> </td> </tr> </table> </aspanel> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html> I've included these files as well as the indicator.gif in the ajax.zip Joel Thoms DiscountASP.NET http://www.DiscountASP.NET Post Edited (Joel Thoms) : 2/16/2007 3:23:11 AM GMT
Good tips. You can also enhance your web.config namespace tags like this: (Noticewe'readding the Microsoft.Web.Preview andAjaxControlToolkit...) <controls> <add tagPrefix="ajaxToolkit" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" /> <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add tagPrefix="asp" namespace="Microsoft.Web.Preview.UI" assembly="Microsoft.Web.Preview"/> <add tagPrefix="asp" namespace="Microsoft.Web.Preview.UI.Controls" assembly="Microsoft.Web.Preview"/> </controls> ...Now, if you use the ControlToolkit in your pages you won't need the page namespace header anymore.
