Thursday, September 24, 2009

ASP NET AJAX Coding for Refresh Date Time without Refresh

Introduction AJAX
AJAX stands for Asynchronous JavaScript And XML.
AJAX is a new technique to develop a interative web page and responsible to exchange data with the behind server without reload the web page.
AJAX increase the speed and usability of the web application.
AJAX is based on JavaScript and XMLHttpRequest.

ASP.NET AJAX combines the power of ASP.NET on the server with the richness of client-side AJAX execution. Asp.net AJAX is a free framework for quickly develop a more interative and usability web page that work almost across all browsers - IE, Firefox and etc.
To download asp.net ajax library click here
Sample asp.net ajax below show you a simple coding for asp.net ajax to refresh date time without reload the page

Result - After compile the code, Both date time is same.

Result - After user click the refresh button, is only update the date time in <asp:update panel>

.aspx - asp net Front Page
<body>
<form id="form1" runat="server">
Outside of update panel <br />
<asp:Label ID="noAjaxtimetxt" Text="" runat="server"></asp:Label>
<br /><br />
<table bgcolor="yellow"><tr><td>

Inside update panel
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<asp:Label ID="Ajaxtimetxt" Text="" runat="server" />
<asp:Button ID="btn" Text="refresh" runat="server" />

</ContentTemplate>
</asp:UpdatePanel>

</td></tr></table>
</form>
</body>

.vb - asp net Code Behind Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
noAjaxtimetxt.Text = Date.Now()
Ajaxtimetxt.Text = Date.Now()
End Sub

No comments: