In web technology Ajax
have played very important role. When we are developing asp.net application on that
case we always want to refresh the part of the page without refreshing the complete
page.
So for Ajax Microsoft have introduced
AjaxControlToolKit. UpdatePanel, Timer,
ScriptManager are some of the Ajax controls provide in the AjaxControlToolKit.
So in this article I will
show how you can refresh the part of the page using updatepanel and the Timer
control in your asP.net application.
Please check the some of my previous articles in asp.net as
follows: Email
Address Validation in Javascript in Asp.Net, Binding
Gridview By Access DataBase Using C#.Net in Asp.Net, How
to style input and submit button with CSS in Asp.net, Passing
Value From One Form to Another in Asp.net Using C#.Net, Free
jQuery Spell Checker Plugins For Asp.Net.
Now for this article first we will create a new asp.net
application and add UpdatePanel, Timer, ScriptManager are in your asp.net page.
After adding the controls your page code will look as shown below:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AsynchronousPageLoad.aspx.cs" Inherits="ProjectDemo_Asp.et.AsynchronousPageLoad"
%>
<!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">
<title>Asynchronous
Page Loading In Asp.net Using UpdatePanel and Timer Control</title>
<style type="text/css">
.style1
{
width:
213px;
}
.style2
{
width:
174px;
}
.style3
{
width:
213px;
text-align:
center;
font-weight:
bold;
}
.style4
{
width:
174px;
text-align:
center;
font-weight:
bold;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Timer ID="Timer1" runat="server" Interval="1000" ontick="Timer1_Tick">
</asp:Timer>
<table border="1">
<tr>
<td class="style4">Asynchronous Page Load</td>
<td class="style3">Static Content</td>
</tr>
<tr>
<td class="style2">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
</td>
<td class="style1">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
Now in your .cs page add the below code.
C#.Net
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ProjectDemo_Asp.et
{
public partial class AsynchronousPageLoad : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
Label2.Text = "Loading time.....";
Label1.Text = DateTime.Now.ToShortTimeString();
}
protected
void Timer1_Tick(object
sender, EventArgs e)
{
Label2.Text = DateTime.Now.ToLongTimeString();
}
}
}
|
VB.Net
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Namespace ProjectDemo_Asp.et
Partial Public Class AsynchronousPageLoad
Inherits
System.Web.UI.Page
Protected
Sub Page_Load(ByVal
sender As Object,
ByVal e As
EventArgs)
Label2.Text = "Loading time....."
Label1.Text =
DateTime.Now.ToShortTimeString()
End Sub
Protected
Sub Timer1_Tick(ByVal
sender As Object,
ByVal e As
EventArgs)
Label2.Text =
DateTime.Now.ToLongTimeString()
End Sub
End Class
End Namespace
|
In above code I have written to refresh the time after every
second and rest of the page will not refresh.
Now view page in browser for output.
About the Author
0 comments:
Please let me know your view