How to Create Auto Refresh Update GridView in Asp.Net

Description:-

In this Example we will Show How to Auto Update GridView in Asp.Net. When we Modify data in Sql then Updated Data Directly Shown in GridView. This is used for Online Services When We Have to Modify Data and Update Directly or in specific Time then We Can uses this.

Create Table:-

CREATE TABLE [dbo].[Details](
      [FirstName] [varchar](50) NOT NULL,
      [LastName] [varchar](50) NOT NULL,
      [Location] [varchar](50) NOT NULL,
      [ID] [int] IDENTITY(1,1) NOT NULL,
 CONSTRAINT [PK_Details] PRIMARY KEY CLUSTERED
(
      [ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY =OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
 
GO

Now Create Webpage in Visual Studio.

·         Insert Script Manager in Webpage.

<asp:ScriptManager ID="ScriptManager1" runat="server"/>

·         Insert UpdatePannel in Webpage.

<asp:UpdatePanel ID="UpdatePanel1" runat="server"></asp:UpdatePanel>

·         Insert Content template in Webpage.

<ContentTemplate></ContentTemplate>

·         Insert timer Control and Set Interval time to 5 Seconds.

<asp:Timer ID="AutoRefreshTimer" runat="server" Interval="5000"  OnTick="AutoRefreshTimer_Tick" />

·         Now Insert GridView in Webpage.

·         Now Create SqlConnection through Sql DataSource and Create Query for That.

·         Insert Label for Information in Webpage.

<asp:Label ID="lblMsg" runat="server" />

Default.aspx:-

   <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Timer ID="AutoRefreshTimer" runat="server" Interval="5000" OnTick="AutoRefreshTimer_Tick" />
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
                    <Columns>
                        <asp:BoundField DataField="Number" HeaderText="Number" />
                        <asp:BoundField DataField="Name" HeaderText="Name" />
                        <asp:BoundField DataField="Gender" HeaderText="Gender" />
                        <asp:BoundField DataField="Email" HeaderText="Email" />
                        <asp:BoundField DataField="BDate" HeaderText="BDate" />
                        <asp:BoundField DataField="MobileNumber" HeaderText="MobileNumber" />
                    </Columns>
                </asp:GridView>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DBCS_New %>"
                    SelectCommand="SELECT [Number], [Name], [Gender], [Email], [Bdate], [MobileNumber] FROM [Employeee]">
                </asp:SqlDataSource>
                <asp:Label ID="lblMsg" runat="server" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

Step 4: Generate AutoRefreshTimer Tick Event So We Can Easily See Time in Webpage.

protected void AutoRefreshTimer_Tick(object sender, EventArgs e)
{
  GridView1.DataBind();
  lblMsg.Text = "Last Updated at " + DateTime.Now;
}

Now run your Webpage in Browser.

After 5 Seconds you Can See timer Control Update Grid Data and Show time in webpage.

Now Change Data in Sql and See in Webpage it’s Changing.

Author : Umesh Patel

Related Posts