Bind data to GridView with TemplateField Button, Image and Label with jQuery or JSON in ASP.Net

Here I have created sample that will help you out.

HTML

<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="ASPSnippets_Pager.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            GetCustomers();
        });

        function GetCustomers() {
            $.ajax({
                type: "POST",
                url: "CS.aspx/GetCustomers",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess,
                failure: function (response) {
                    alert(response.d);
                },
                error: function (response) {
                    alert(response.d);
                }
            });
        }

        function OnSuccess(response) {
            var xmlDoc = $.parseXML(response.d);
            var xml = $(xmlDoc);
            var customers = xml.find("Customers");
            var html = '<table id="gvCustomers">';
            var row = $("[id*=gvCustomers] tr:last-child").clone(true);
            $("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
            html += $("[id*=gvCustomers]").html();
            $.each(customers, function () {
                html += "<tr>";
                var customer = $(this);
                var image = $(this).find("Image").text();
                $(row).find("[id*=lblName]").html($(this).find("ContactName").text());
                $(row).find("[id*=img1]").attr('src', image);
                $(row).find("[id*=btnView]").val($(this).find("Viewed").text());
                html += $(row).html();
                html += "</tr>";
            });
            html += "</table>";
            $("[id*=gvCustomers]").html("")
            $("[id*=gvCustomers]").append(html);
        };
    </script>
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" RowStyle-BackColor="#A1DCF2"
        HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White">
        <Columns>
            <asp:TemplateField HeaderText="Name">
                <ItemTemplate>
                    <asp:Label ID="lblName" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Image">
                <ItemTemplate>
                    <asp:Image ID="img1" ImageUrl='<%#Eval("Image") %>' runat="server" Style="width: 100px;
                        height: 100px" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Views">
                <ItemTemplate>
                    <asp:Button ID="btnView" Text='<%#Eval("Viewed") %>' runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>

Code

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

private void BindDummyRow()
{
    DataTable dummy = new DataTable();
    dummy.Columns.Add("ContactName", typeof(string));
    dummy.Columns.Add("Image", typeof(string));
    dummy.Columns.Add("Viewed", typeof(bool));
    dummy.Rows.Add();
    gvCustomers.DataSource = dummy;
    gvCustomers.DataBind();
}

[WebMethod]
public static string GetCustomers()
{
    DataTable dt = new DataTable("Customers");
    dt.Columns.Add("ContactName", typeof(string));
    dt.Columns.Add("Image", typeof(string));
    dt.Columns.Add("Viewed", typeof(bool));
    dt.Rows.Add("Chrysanthemum", "Images/Chrysanthemum.jpg", true);
    dt.Rows.Add("Desert", "Images/Desert.jpg", true);
    dt.Rows.Add("Penguins", "Images/Penguins.jpg", true);
    DataSet ds = new DataSet();
    ds.Tables.Add(dt);
    return ds.GetXml();
}

Screenshot