ASP.Net + AJAX

                Today in this web world we need to improve the performance of web site. Latest technology which is very famous today is the AJAX. All developers should know the AJAX. AJAX means Asynchronous JavaScript and XML. Without round tripping to server we send the data to the Client (User) just in seconds.

What is AJAX? A name given to an existing approach to building dynamic web applications.
       Web pages use JavaScript to make asynchronous calls to web-based services that typically return XML – allows user to continue interacting with web page
While waiting for data to be returned
– Page can be updated without refreshing browser
– Results in a better user experience
– There are Ajax libraries that reduce the amount of JavaScript code that must be written
Uses a JavaScript class called XMLHttpRequest
I here just explain how we can implement the AJAX in ASP.Net. Please go through the step by step:
We need to download and install the following.
1 > AJAX 1.0:
http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en
AJAX Control Toolkit (not the “No Source” zip file):
http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=1425
Extract the toolkit to: C:\Program Files\Microsoft ASP.NET\AJAX Controls Toolkit

Now we needs to do the following changes in web.config file.
a. Add the following AFTER “applicationSettings” sectionGroup node in /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>
b. add node in /configuration/system.web/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”/>
c. Add the following AFTER the httpHandlers section in /configuration/system.web:
<httpModules>
<add name=”ScriptModule” type=”System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″/>
</httpModules>
d. Add the following AT THE END of the assemblies section in /configuration/system.web/compilation:
<add assembly=”System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35″/>
<add assembly=”System.Web.Extensions.Design, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35″/>
e. Add the following AT THE END, right before the closing configuration tag:
<system.web.extensions>
<scripting>
<scriptResourceHandler enableCompression=”false” enableCaching=”true” />
</scripting>
</system.web.extensions>

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

Now you need to add the AjaxControlToolkit.dll reference in your project.

I am giving you an example. Please copy and past the code and run.
Copy and paste the following code in your Default.Aspx page:
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<br />
<asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” UpdateMode=”Conditional”>
<ContentTemplate>
<hr />
<asp:Label ID=”Label1″ runat=”server” Text=”Label” Width=”258px”></asp:Label><br />
<br />
<asp:Label ID=”Label2″ runat=”server” Text=”Label” Width=”258px”></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”Button1″ EventName=”Click” />
</Triggers>
</asp:UpdatePanel>
<hr />
<br />
<asp:UpdatePanel ID=”UpdatePanel2″ runat=”server” UpdateMode=”Conditional”>
<ContentTemplate>
<asp:Label ID=”Label3″ runat=”server” Text=”Label” Width=”258px”></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID=”Button2″ EventName=”Click” />
</Triggers>
</asp:UpdatePanel>
<br />
<asp:Button ID=”Button1″ runat=”server” Text=”Button” Width=”261px” OnClick=”Button1_Click” />
<br />
<asp:Button ID=”Button2″ runat=”server” Text=”Button” Width=”261px” OnClick=”Button2_Click” />
<br />
</div>
</form>
</body>

And copy and paste the following code in you Default.Aspx.cs file.

protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
Label2.Text = DateTime.Now.ToString();
Label3.Text = DateTime.Now.ToString();
}
protected void Button1_Click(object sender, EventArgs e)
{

}
protected void Button2_Click(object sender, EventArgs e)
{

}

Now run the project and enjoy using AJAX. Please feel free to write your comments and suggestions.
Best Regards,
VBM

Advertisements

About Vijay Modi

Having 12+ years of experience in web application development. Expertise in various domains like E-Commerce, E-Learning, Insurance. I have expertise in web application development, window application development, Performance improvement, bug fixing etc. I have worked on various Microsoft technologies including ASP.Net, MVC, WebApi, WCF, Entity Framework, WPF, Window Application Development, AWS, Azure, AngularJS 2.0 / 1.5.2, .NetCore framework, jQuery. I am believing in quality work and achieving deadlines. Also like to work on new technologies and quick learner.
This entry was posted in Uncategorized and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s