Sample web application using Ajax in .NET

I would like to give a brief description with steps for creating a very simple web application using Ajax in .NET.
Please refer
Ajax in Prog.Findinmgs for brief descripton in Ajax,
Step 1:
Create a .NET project, right click on the solution file and say “Add New website”
Select “ASP.Net Ajax enabled web site “from the template and give some web site name.

You can observe after adding this ajax enabled website, “default.aspx” page is added and “asp:sriptmanager” is added in the page.

This script manager is used to support “Ajax” functionality while sending request and receiving response.
Step 2:
I would consider the same example explained in
Ajax in Prog.Findinmgs
My aspx page is designed as

Aspx page:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <asp:UpdateProgress ID="updPrgYes" runat="server" AssociatedUpdatePanelID="updYes"> <ProgressTemplate> Processing Yesterdays date... </ProgressTemplate></asp:UpdateProgress> <asp:UpdatePanel ID="updYes" runat="server"> <ContentTemplate> <table> <tr> <td><input type="button" value="What is Yesterday's date?" id="btnYes" runat="server" onserverclick="btnYes_ServerClick"/></td> </tr> <tr> <td><asp:Label ID="lblYes" runat="server"></asp:Label></td> </tr> </table> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="updPrgTo" runat="server" AssociatedUpdatePanelID="updTo"> <ProgressTemplate> Processing Todays date... </ProgressTemplate></asp:UpdateProgress> <asp:UpdatePanel ID="updTo" runat="server"> <ContentTemplate> <table> <tr> <td><input type="button" value="What is Today's date?" id="btnTod" runat="server" onserverclick="btnTod_ServerClick" /></td> </tr> <tr> <td><asp:Label ID="lblTod" runat="server"></asp:Label></td> </tr> </table> </ContentTemplate> </asp:UpdatePanel> </div> </form> </body> </html>

Code behind page:-

using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnYes_ServerClick(object sender, EventArgs e) { //Thread has been slept for 3 seconds, so that user //can see the processing message for a while before updating the response System.Threading.Thread.Sleep(3000); //Updating todays date lable with todays date lblYes.Text = DateTime.Now.ToString("dd/MM/yyyy"); } protected void btnTod_ServerClick(object sender, EventArgs e) { //Thread has been slept for 3 seconds, so that user //can see the processing message for a while before updating the response System.Threading.Thread.Sleep(3000); //Updating yesterdays date lable with yesterdays date lblTod.Text = (DateTime.Now.AddDays(-1)).ToString("dd/MM/yyyy"); } }

Step 3:
Output:-
When user clicks on “Todays” date button, we can find
1) processing message.
2) Page not getting post backed.




When user clicks on “Yesterdays” date button, we can find
1) Processing message.
2) Page not getting post backed.

Ajax – Asynchronous JavaScript

When we have some brief view of a web application, we are pretty sure that there exists a web server which is centralized to send responses for different requests from different clients.

We use “http” protocol for handling the communication between client and server.

Ajax has been introduced in the similar manner to send and receive response to and from web server using http, but the actual benefit of using Ajax adds more in way the request and response is handled.
In traditional way of sending and receiving request and response, if we consider a normal aspx page,
When user clicks on some button in aspx page to get some response, the entire page is reloaded when the response is received.
I mean though the response in deed is not required to refresh the whole page but just to update a part of page (a label control for example available among several controls), it is not really use full to reload the content of each and every control which are not required.

Ex:-
I have created an aspx page whose interface look like

When I request for this page,
user clicks on “Yesterdays button”, it is really required to just update the “lblYes” label to display “Yesterdays date” but not required to reload the entire page and update the other 2 components (Today’s date button and Today’s date label), similarly when user clicks on “Today’s date” button.
You can also see the entire page is post backed and reloaded, when user click on any one of these buttons.



This is traditional process,
Ajax helps at this kind of instants.
When user clicks on today’s button, we can handle the request and response using Ajax to update only the today’s label instead of reloading the entire page and updating the other 2 components (Yesterday’s date button and Yesterday’s date label) though not required.
Obviously, there are 2 advantages here
1) User can fell the page is not getting post backed.
2) Since the response is not reloading the entire page but only updating or refreshing a part of page, it does not take much time when compared to reloading the entire page.