Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Update Panel in ASP.NET

Article:
Viewed:  1665 
Posted On:  26/09/2012 10:28:50 
In this article I am going to show how we can use Update Panel in asp.net with AJAX. 

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:

Update1.png

Figure 1.

Current DateTime is showing and data is also showing in grid View.

 If I click on Edit Record

Update2.png

Figure 2.

DateTime is not update because full page is not referesh.

Update3.png

Figure 3.

Record updates successfully but DateTime still not referesh.

Update4.png

Figure 4.

If I click on delete button.

Update5.png

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.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us