Sample web application using Ajax in .NET

Monday, February 9, 2009

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");
}
}