Refresh GridView regular intervals using JavaScript in ASP.Net

Hi nauna,

Use JavaScript setInterval function to bind GridView at specific interval without reloading the page.

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        setInterval(function () {
            GetCustomers();
        }, 1000);
    });
    function GetCustomers() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetCustomers",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: function (response) {
                alert(response.d);
            }
        });
    }
    var row;
    function OnSuccess(response) {
        var customers = response.d;
        if (row == null) {
            row = $("[id*=gvCustomers] tr:last-child").clone(true);
        }
        $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
        if (customers.length > 0) {
            $.each(customers, function () {
                $("td", row).eq(0).html($(this)[0].CustomerID);
                $("td", row).eq(1).html($(this)[0].ContactName);
                $("td", row).eq(2).html($(this)[0].City);
                $("[id*=gvCustomers]").append(row);
                row = $("[id*=gvCustomers] tr:last-child").clone(true);
            });
        } else {
            var empty_row = row.clone(true);
            $("td:first-child", empty_row).attr("colspan", $("td", row).length);
            $("td:first-child", empty_row).attr("align", "center");
            $("td:first-child", empty_row).html("No records found for the search criteria.");
            $("td", empty_row).not($("td:first-child", empty_row)).remove();
            $("[id*=gvCustomers]").append(empty_row);
        }
    };
</script>
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" />
        <asp:BoundField DataField="ContactName" HeaderText="Name" />
        <asp:BoundField DataField="City" HeaderText="City" />
    </Columns>
</asp:GridView>

Code

C#

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

private void BindDummyRow()
{
    NorthwindModel.NorthwindEntities entities = new NorthwindModel.NorthwindEntities();
    List<NorthwindModel.Customer> customers = new List<NorthwindModel.Customer>();
    //Add a Dummy Row.
    customers.Insert(0, new NorthwindModel.Customer());
    gvCustomers.DataSource = customers;
    gvCustomers.DataBind();
}


[System.Web.Services.WebMethod]
public static List<NorthwindModel.Customer> GetCustomers()
{
    using (NorthwindModel.NorthwindEntities entities = new NorthwindModel.NorthwindEntities())
    {
        Random rand = new Random();
        int toSkip = rand.Next(0, entities.Customers.ToList().Count);
        return entities.Customers.OrderBy(c => c.CustomerID).Skip(toSkip).Take(5).ToList();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        BindDummyRow()
    End If
End Sub

Private Sub BindDummyRow()
    Dim entities As NorthwindModel.NorthwindEntities = New NorthwindModel.NorthwindEntities()
    Dim customers As List(Of NorthwindModel.Customer) = New List(Of NorthwindModel.Customer)()
    'Add a Dummy Row.
    customers.Insert(0, New NorthwindModel.Customer())
    gvCustomers.DataSource = customers
    gvCustomers.DataBind()
End Sub

<Services.WebMethod()>
Public Shared Function GetCustomers() As List(Of NorthwindModel.Customer)
    Using entities As NorthwindModel.NorthwindEntities = New NorthwindModel.NorthwindEntities()
        Dim rand As Random = New Random()
        Dim toSkip As Integer = rand.Next(0, entities.Customers.ToList().Count)
        Return entities.Customers.OrderBy(Function(c) c.CustomerID).Skip(toSkip).Take(5).ToList()
    End Using
End Function

Screenshot

Note: For demonstration purpose i have selected random record. You need to select record according to your requirement. Use Order by in the query to get latest inserted record first.