I have just started reading Ajax and came across very nice topic to show the clock in the label and every one second it is changing without loading the page again and again. You can also use it as forming a software for stop watch and all.
Introduction
ASP.NET AJAX enables a Web application to retrieve data from the server asynchronously and to refresh parts of the existing page. This improves the user experience by making the Web application more responsive. In this article, I will show you how to build an AJAX-enabled ASP.NET MVC application.
Objective
Topic to show the clock in the label and every one second it is changing without loading the page again and again. You can also use it as forming a software for stop watch and all.
Using the code
In your default.aspx write......
|
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"></head>
<body><form id="form1" runat="server"><div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<br /><br /></div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers><asp:AsyncPostBackTrigger ControlID="Timer2" EventName="tick" /></Triggers>
<ContentTemplate>
<asp:Timer ID="Timer2" runat="server" Interval="1"></asp:Timer>
<br /><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate></asp:UpdatePanel>
<br /><br />
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers><asp:AsyncPostBackTrigger ControlID="Timer2" EventName="tick" /></Triggers>
<ContentTemplate><asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></ContentTemplate>
</asp:UpdatePanel><br /><br />
</form></body></html> |
In this I have used a script manager which can only be one in a webpage and many update panel. All the controls which I want to load without loading the page must be written within the update panel.
In the Default.aspx.cs file i will write the code for the time..
|
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToLongTimeString();
Label2.Text = DateTime.Now.TimeOfDay.ToString();
}
} |
The time will be automatically chnages every one second.
Conclusion
You can do many thing using Ajax. Here I have just showed how you can use Ajax in your programming. Any Suggestions to improve the code is Welcomed as I am only a beginner in the .Net development.
Happy Programming. Thank You