Showing Clock Without Page Load Every Time using ASP.NET AJAX

Gopesh9
Posted by in ASP.NET AJAX category on for Beginner level | Points: 250 | Views : 10839 red flag
Rating: 3 out of 5  
 1 vote(s)

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

Page copy protected against web site content infringement by Copyscape

About the Author

Gopesh9
Full Name: G. S.
Member Level:
Member Status: Member
Member Since: 8/3/2012 2:27:02 AM
Country: India
G. S. .Net Developer
http://www.dotnetfunda.com
A Dot Net Learner. Currently working in Software Company.

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)