Populate (Bind) GridView using JSON Array with jQuery AJAX in ASP.Net

Hi mukesh1,

This way you can achieve your task. You can add any value at any place and bind GridView.

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

HTML

<asp:GridView ID="grdchat" runat="server">
</asp:GridView>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetChatDatas",
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            error: function (r) { alert(r.responseText); }
        });
        return false;
    });
    function OnSuccess(response) {
        var chatDatas = response.d;
        var row = $("[id*=grdchat] tr:last-child").clone(true);
        $("[id*=grdchat] tr").not($("[id*=grdchat] tr:first-child")).remove();
        for (var i = 0; i < chatDatas.length; i++) {
            for (var j = 0; j < chatDatas[i].length; j++) {
                $("td", row).eq(j).html(chatDatas[i][j]);
            }
            $("[id*=grdchat]").append(row);
            row = $("[id*=grdchat] tr:last-child").clone(true);
        }
    }
</script>

Namespaces

C#

using System.Data;
using System.Web.Services;
using System.Collections.Generic;

VB.Net

Imports System.Data
Imports System.Web.Services

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        DataTable dummy = new DataTable();
        dummy.Columns.Add("message");
        dummy.Columns.Add("sender");
        dummy.Columns.Add("date");
        dummy.Columns.Add("time");
        dummy.Columns.Add("direction");
        dummy.Rows.Add();
        grdchat.DataSource = dummy;
        grdchat.DataBind();
    }
}

[WebMethod]
public static List<object> GetChatDatas()
{
    // Get DataSet from Database.
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] {
        new DataColumn("message"),
        new DataColumn("sender"),
        new DataColumn("date"),
        new DataColumn("time"),
        new DataColumn("direction")});
    dt.Rows.Add("msg_a", "Sender 1", "02 Jun 2018", "12:00:05", "left");
    dt.Rows.Add("msg_b", "Sender 2", "02 Jun 2018", "11:09:59", "right");
    dt.Rows.Add("msg_c", "Sender 3", "31 May 2018", "17:22:02", "left");

    List<object> chatDatas = new List<object>();

    // Add Rows to array.
    for (int i = 0; i < dt.Rows.Count; i++)
    {
        List<object> chatData = new object[dt.Columns.Count];
        for (int j = 0; j < dt.Columns.Count; j++)
        {
            chatData[j] = dt.Rows[i][j];
        }
        chatDatas.Add(chatData);
    }

    return chatDatas;
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Dim dummy As DataTable = New DataTable()
        dummy.Columns.Add("message")
        dummy.Columns.Add("sender")
        dummy.Columns.Add("date")
        dummy.Columns.Add("time")
        dummy.Columns.Add("direction")
        dummy.Rows.Add()
        grdchat.DataSource = dummy
        grdchat.DataBind()
    End If
End Sub

<WebMethod()>
Public Shared Function GetChatDatas() As List(Of Object)
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn() {
                        New DataColumn("message"),
                        New DataColumn("sender"),
                        New DataColumn("date"),
                        New DataColumn("time"),
                        New DataColumn("direction")})
    dt.Rows.Add("msg_a", "Sender 1", "02 Jun 2018", "12:00:05", "left")
    dt.Rows.Add("msg_b", "Sender 2", "02 Jun 2018", "11:09:59", "right")
    dt.Rows.Add("msg_c", "Sender 3", "31 May 2018", "17:22:02", "left")

    Dim chatDatas As List(Of Object) = New List(Of Object)()

    ' Add Rows to array.
    For i As Integer = 0 To dt.Rows.Count - 1
        Dim chatData As Object() = New Object(dt.Columns.Count - 1) {}
        For j As Integer = 0 To dt.Columns.Count - 1
            chatData(j) = dt.Rows(i)(j)
        Next
        chatDatas.Add(chatData)
    Next

    Return chatDatas
End Function

Screenshot