Populate GridView with TemplateField using jQuery AJAX in ASP.Net

Hi mukesh1,

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

HTML

<asp:TextBox ID="txtmanagerid" runat="server" />
<asp:TextBox ID="txtclientid" runat="server" />
<div>
    <asp:GridView ID="grdchat" runat="server" AutoGenerateColumns="false" GridLines="None">
        <Columns>
            <asp:TemplateField HeaderText="direction message">
                <ItemTemplate>
                    <div class='<%# Eval("direction") %>'>
                        <span style="float: left; width: 70px" class="direction">
                            <%# Eval("direction") %></span> <span class="message">
                                <%# Eval("message") %></span> <span class="date" style="font-size: smaller; color: green;">
                                    <%# Eval("date") %></span>, <span class="time" style="font-size: smaller; color: green;">
                                        <%# Eval("time") %></span></div>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        var m = document.getElementById("<%=txtmanagerid.ClientID%>").value;
        var n = document.getElementById("<%=txtclientid.ClientID%>").value;
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetChat",
            data: '{managerid: "' + m + '",clientid:"' + n + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess
        });
        return false;
    });

    function OnSuccess(response) {
        var xmlDoc = $.parseXML(response.d);
        var xml = $(xmlDoc);
        var chats = xml.find("Table1");
        var row = $("[id*=grdchat] tr:last-child").clone(true);
        $("[id*=grdchat] tr").not($("[id*=grdchat] tr:first-child")).remove();
        $.each(chats, function () {
            $(".direction", row).html($(this).find("direction").text());
            $(".message", row).html($(this).find("message").text());
            $(".date", row).html($(this).find("date").text());
            $(".time", row).html($(this).find("time").text());
            $("[id*=grdchat]").append(row);
            row = $("[id*=grdchat] tr:last-child").clone(true);
        });
    }
</script>

Namespaces

C#

using System.Data;

Code

C#

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

[System.Web.Services.WebMethod]
public static string GetChat(string managerid, string clientid)
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[] { 
            new DataColumn("direction"),
            new DataColumn("message"),
            new DataColumn("date"),
            new DataColumn("time")});
    dt.Rows.Add("ok", "msg_a", "02 Jun 2018", "12:00:05");
    dt.Rows.Add("ok", "msg_a", "02 Jun 2018", "11:09:59");
    dt.Rows.Add("lets see what they doing", "msg_a", "31 May 2018", "17:22:02");
    DataSet ds5 = new DataSet();
    ds5.Tables.Add(dt);
    return ds5.GetXml();
}

Screenshot

Note: You need to change the design as per your requirement.