ASP.NET GridView Inside an Update Panel

Sometimes there can be situations where you need to update a gridview inside a ASP.NET page without refreshing the page. This is how you can do it with Update Panel in AJAX Extensions. In here I have two gridviews and one is inside the Update Panel and the other one is out of the Update Panel. I am using the timer control to update the gridview in a timely manner.

I am pasting the source code below.

_Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GridViewUpdate._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1" runat="server"/>

    <asp:Timer runat="server" ID="tmrTimer" Interval="30000" OnTick="tmrTimer_Tick" />

    <asp:UpdatePanel runat="server" id="pnlUpdate">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="tmrTimer" eventname="Tick"/>
        </Triggers>
        <ContentTemplate>
            <h2>Inside Update Panel</h2>
            <asp:GridView ID="gvCustomer" runat="server" 
                AutoGenerateColumns="False" GridLines="Both" AllowPaging="True">
                <Columns>
                    <asp:TemplateField HeaderText="Customer ID">
                        <ItemTemplate>
                            <asp:Label runat="server" ID="lblCustomerID" Text='<%# Eval("CUSTOMER_ID") %>' />
                        </ItemTemplate>                   
                    </asp:TemplateField>
                    
                    <asp:TemplateField HeaderText="First Name">
                        <ItemTemplate>                            
                            <asp:Label runat="server" ID="lblFirstName" Text='<%# Eval("CUSTOMER_FIRST_NAME") %>' />
                       </ItemTemplate>                    
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Last Name">
                        <ItemTemplate>
                            <asp:Label runat="server" ID="lblLastName" Text='<%# Eval("CUSTOMER_LAST_NAME") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
        </ContentTemplate>
    </asp:UpdatePanel>        

    <h2>Not Inside Update Panel</h2>
    <asp:GridView ID="gvCustomer1" runat="server" 
         AutoGenerateColumns="False" GridLines="Both" AllowPaging="True">
        <Columns>
            <asp:TemplateField HeaderText="Customer ID">
                <ItemTemplate>
                    <asp:Label runat="server" ID="lblCustomerID" Text='<%# Eval("CUSTOMER_ID") %>' />
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="First Name">
                <ItemTemplate>  
                  <asp:Label runat="server" ID="lblFirstName" Text='<%# Eval("CUSTOMER_FIRST_NAME") %>' />
                </ItemTemplate>
            </asp:TemplateField>

            <asp:TemplateField HeaderText="Last Name">
                <ItemTemplate>
                    <asp:Label runat="server" ID="lblLastName" Text='<%# Eval("CUSTOMER_LAST_NAME") %>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>    
    </asp:GridView>
</asp:Content>

In here Timer Interval is "30000" and that is in miliseconds. So the interval between every "Tick" event is 30 seconds.

_Default.aspx.cs

using System;

namespace GridViewUpdate
{
    public partial class _Default : System.Web.UI.Page
    {
        //my custom dbconnection class
        private readonly DbConnection _dbConnection = new DbConnection();

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Bind();
            }
        }

        private void Bind()
        {
            const string query = "SELECT CUSTOMER_ID,CUSTOMER_FIRST_NAME,CUSTOMER_LAST_NAME FROM CUSTOMER";

            //my custom method that is in the dbconnection class that 
            //accepts a string query and returns a dataset
            gvCustomer.DataSource = _dbConnection.SelectDataSet(query);
            gvCustomer.DataBind();

            //my custom method that is in the dbconnection class that 
            //accepts a string query and returns a dataset
            gvCustomer1.DataSource = _dbConnection.SelectDataSet(query);
            gvCustomer1.DataBind();
        }

        protected void tmrTimer_Tick(object sender, EventArgs e)
        {
            Bind();
        }
    }
}

That’s it. Now I am running it and I can see something like this.

Before

And then I am adding a new record to my customer table, but I am not refreshing my page. Then I can see something like this in few seconds.

After

You can see that, only the gridview which is inside the Update Panel is updated. Other is not. So hope this helps.

Happy Coding.

Regards,

Jaliya