In this article I am going to show the us e of update panel
control in asp.net AJAX.
To perform partially refresh of a page we can use update
panel .
In the below example I am using a label to show current Date
Time and also I am using a Grid View to show record from database. In this Grid
View I am giving option to delete and edit record. If we edit or delete any
record from Grid View then page refresh but only that part will refresh which
is under Update Panel. In this example you can see time will not change because
on delete or edit full page is not refreshing...
This is my aspx code:
<%@ 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">
<title>Use Of
Update Panel</title></head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table>
<tr>
<td>
Current Time:
<asp:Label ID="lblTime" runat="server"></asp:Label>
</td>
</tr>
</table>
<table cellpadding="2" cellspacing="2" width="50%" align="center">
<tr>
<td>
<asp:UpdatePanel runat="Server" ID="UpdatePanel1" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GridView1"
runat="server"
DataSourceID="SqlDataSource1"
AllowPaging="True"
AllowSorting="True"
AutoGenerateEditButton="true"
DataKeyNames="ID"
PageSize="5"
CellPadding="2"
CellSpacing="1"
EmptyDataText="<b>
There is no records </b>">
<Columns>
<asp:TemplateField HeaderText="Delete?">
<ItemTemplate>
<asp:LinkButton ID="lnk1" runat="server"
Text="Delete"
OnClientClick="return
confirm('Are
you sure to Delete?')"
CommandName="Delete"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1"
runat="server"
ConnectionString='<%$
ConnectionStrings:ConnStr %>'
SelectCommand="Select *
FROM Student ORDER BY [ID]" DeleteCommand="Delete FROM Student WHERE ID = @ID"
UpdateCommand="UPDATE
Student SET Name = @Name, Class = @Class, Country = @Country WHERE ID = @ID">
<DeleteParameters>
<asp:Parameter Name="ID" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="ID" Type="Int32"
/>
<asp:Parameter Name="Name" Type="string" Size="50" />
<asp:Parameter Name="Class"
Type="string"
Size="200"
/>
<asp:Parameter Name="Country"
Type="string"
Size="200"
/>
</UpdateParameters>
</asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
This is my aspx.cs code:
using System;
using
System.Configuration;
using
System.Data;
using
System.Linq;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using
System.Xml.Linq;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if
(!Page.IsPostBack)
lblTime.Text = System.DateTime.Now.ToString();
}
}
This is when I run the application:
Figure 1.
Current DateTime is showing and data is also showing in grid
View.
If I click on Edit Record
Figure 2.
DateTime is not update because full page is not referesh.
Figure 3.
Record updates successfully but DateTime still not referesh.
Figure 4.
If I click on delete button.
Figure 5.
Record deleted and grid refreshed but DateTime not
refreshed.
So this is the use of Update Panel to partially refresh of a
Page.