Ajax to Update GridView after certain Time interval using Asp.net C# VB.Net

In most of the cases like Dashboard developers often need to update GridView data after certain interval. In this Asp.Net article i am going to discuss Updating GridView using AJAX in same time difference. To do that first create a new aspx page in your project. Then drag and drop the below controls within the page.

1. ScriptManager
2. UpdatePanel
3. GridView

The Html Mark Up Will Be:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <asp:GridView runat="server" id="GridView1" HeaderStyle-BackColor="CornflowerBlue" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White" CellPadding="5">
        <asp:Timer ID="Timer1" runat="server" ontick="Timer1_Tick" Interval="4000">

To do the Example First Create a Database Table:

CREATE TABLE [dbo].[tblStock](
    [BrandName] [varchar](max) NULL,
    [CategoryName] [varchar](max) NULL,
    [ProductName] [varchar](max) NULL,
    [LogicalQuantity] [bigint] NULL,
    [PhysicalQuantity] [bigint] NULL,
    [QuarentineQuantity] [bigint] NULL

Now Insert some Data:

INSERT INTO tblStock VALUES('Kohinoor','Soap','Tibbet Handwash',55781,55780,1)
INSERT INTO tblStock VALUES('Kohinoor','Soap','Tibbet Soap',38786,38780,6)
INSERT INTO tblStock VALUES('Kohinoor','ToothPaste','Tibbet Clear',34503,34500,3)
INSERT INTO tblStock VALUES('Proctor & Gamble','Bubble','',43809,43800,9)
INSERT INTO tblStock VALUES('Telenor','Mobile','Data SIM',43876,43870,6)
INSERT INTO tblStock VALUES('Telenor','Mobile','GP Modem',23907,23900,7)
INSERT INTO tblStock VALUES('Uniliver','Soap','Lux',19806,19800,6)
INSERT INTO tblStock VALUES('Uniliver','TeleProducts','Brittle',20703,20700,3)
INSERT INTO tblStock VALUES('Uniliver','ToothPaste','Close Up',16755,16750,5)

Now modify the Web.Config File to Connect to Database:

    <add name="DBConnection" connectionString="Data Source=.\SQLEXPRESS;Initial Catalog=TESTDB;Trusted_Connection=yes;" providerName="System.Data.SqlClient"/>
    <!--<add name="BONConnection" connectionString="Data Source=XXX.com;Initial Catalog=DBNAME;User Id=UserName;Password=YourPassword;" providerName="System.Data.SqlClient" />-->

Note: If you use windows authentication then use the first key. Otherwise use second key line. Update server name, Database name, User name, Password as per your settings.

Now if you see that i have wrapped up GridView Control under Asp.Net Ajax UpdatePanel. Now bind the GridView data within the Timer Control Tick Event. Adjust time interval as per your requirement.

C# Code:

    protected void Timer1_Tick(object sender, EventArgs e)
        string consString = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
        using (SqlConnection conn = new SqlConnection(consString))
            SqlCommand cmd = new SqlCommand("SELECT * FROM [tblStock]", conn);
            cmd.CommandType = CommandType.Text;
            SqlDataReader drStock = cmd.ExecuteReader();
            GridView1.DataSource = drStock;

Note: Don’t forget to add “System.Data”, “System.Data.SqlClient”, “System.Configuration” namespaces.

VB.Net Code:

    Protected Sub Timer1_Tick(sender As Object, e As System.EventArgs) Handles Timer1.Tick
        Dim consString As String = ConfigurationManager.ConnectionStrings("DBConnection").ConnectionString
        Using conn As New SqlConnection(consString)
            Dim cmd As New SqlCommand("SELECT * FROM [tblStock]", conn)
            cmd.CommandType = CommandType.Text
            Dim drStock As SqlDataReader = cmd.ExecuteReader()
            GridView1.DataSource = drStock
        End Using
    End Sub

Note: Don’t forget to add “System.Data”, “System.Data.SqlClient”, “System.Configuration” namespaces.

Ajax to update GridView after certain interval using Asp.net Csharp VB.Net

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Ajax, Asp.net, C#, Database, Gridview, SQL Server, VB.Net
One comment on “Ajax to Update GridView after certain Time interval using Asp.net C# VB.Net
  1. akash choudhary says:

    thanx for all lovely examples

Leave a Reply

Your email address will not be published. Required fields are marked *