Populate ASP.Net Repeater inside Bootstrap Modal Popup using jQuery Ajax

Hi ramco1917,

Please refer below sample.

Database

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

Download Northwind Database

HTML

<div class="container-fluid">
    <asp:PlaceHolder ID="PlaceHolderTable" runat="server"></asp:PlaceHolder>
</div>
<div id="modal_form_horizontal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info">
                <h5 class="modal-title">
                    Add/Update Record</h5>
                <button type="button" class="close" data-dismiss="modal">
                    &times;</button>&nbsp;
            </div>
            <div class="form-horizontal">
                <div class="modal-body" style="padding-left: 40px;">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="form-group">
                                <label>
                                    Orders</label>
                                <div id="dvOrders">
                                    <asp:Repeater ID="rptOrders" runat="server">
                                        <ItemTemplate>
                                            <table class="table table-responsive">
                                                <tr>
                                                    <td>
                                                        <input type="checkbox" />
                                                    </td>
                                                    <td class="customerID">
                                                        <%# Eval("CustomerID") %>
                                                    </td>
                                                    <td class="orderID">
                                                        <%# Eval("OrderID")%>
                                                    </td>
                                                    <td class="freight">
                                                        <%# Eval("Freight")%>
                                                    </td>
                                                </tr>
                                            </table>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-link" data-dismiss="modal">
                    Close</button>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
    function BindData(ele) {
        var id = $(ele).closest('tr').find('td').eq(0).html();
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetOrders",
            data: '{id:"' + id + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var table = $("#dvOrders table").eq(0).clone(true);
                $("#dvOrders table").remove();
                $(response.d).each(function () {
                    $(".customerID", table).html(this.CustomerId);
                    $(".orderID", table).html(this.OrderID);
                    $(".freight", table).html(this.Freight);
                    $("#dvOrders").append(table);
                    table = $("#dvOrders table").eq(0).clone(true);
                });
                $('#modal_form_horizontal').modal("show");
            }
        });
    };
</script>

Namespaces

C#

using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;

VB.Net

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        StringBuilder htmlTable = new StringBuilder();
        htmlTable.Append("<table class='table table-bordered table-hover datatable-highlight' id='tbldata'>");
        htmlTable.Append("<thead><tr><th style='display:none;'>#</th><th>Name</th><th>Country</th><th class='text-center nosort'>Actions</th><th class='text-center nosort'>Add</th></tr></thead>");
        htmlTable.Append("<tbody>");
        foreach (var colum in GetCustomers())
        {
            htmlTable.Append("<tr>");
            htmlTable.Append("<td style='display:none;'>" + colum.CustomerId + "</td>");
            htmlTable.Append("<td>" + colum.ContactName + "</td>");
            htmlTable.Append("<td>" + colum.Country + "</td>");
            htmlTable.Append("<td class='text-center'> <a id='btnEdit' style='cursor:pointer;' class='list-icons-item text-primary-600' title='Edit' href='NewTraining.aspx?val=" + colum.CustomerId.ToString() + "'><i class='icon-pencil7 mr-1'></i> Edit </a>" + "</td>");
            htmlTable.Append("<td class='text-center'> <a id='btnAdd' style='cursor:pointer;' class='list-icons-item text-primary-600' data-toggle='modal' data-backdrop='static' data-keyboard='false' onclick='BindData(this);'><i class='icon-pencil7 mr-1'></i>Add</a></td>");
            htmlTable.Append("</tr>");
        }
        htmlTable.Append("</tbody>");
        htmlTable.Append("</table>");

        PlaceHolderTable.Controls.Add(new Literal { Text = htmlTable.ToString() });

        List<Order> orders = new List<Order>();
        orders.Add(new Order());
        rptOrders.DataSource = orders;
        rptOrders.DataBind();
    }
}

public List<Customer> GetCustomers()
{
    List<Customer> items = new List<Customer>();
    items.Add(new Customer { CustomerId = "ALFKI", ContactName = "Alfreds Futterkiste", Country = "UK" });
    items.Add(new Customer { CustomerId = "ANATR", ContactName = "Around the Horn", Country = "Germany" });
    items.Add(new Customer { CustomerId = "ANTON", ContactName = "Island Trading", Country = "France" });
    return items;
}

[WebMethod]
public static List<Order> GetOrders(string id)
{
    List<Order> orders = new List<Order>();
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT CustomerID,OrderID,Freight FROM [Orders] WHERE CustomerID = @Id", con))
        {
            cmd.Parameters.AddWithValue("@Id", id);
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    orders.Add(new Order
                    {
                        CustomerId = sdr["CustomerID"].ToString(),
                        OrderID = sdr["OrderID"].ToString(),
                        Freight = sdr["Freight"].ToString()
                    });
                }
            }
            con.Close();
        }
    }

    return orders;
}

public class Customer
{
    public string CustomerId { get; set; }
    public string ContactName { get; set; }
    public string Country { get; set; }
}

public class Order
{
    public string CustomerId { get; set; }
    public string OrderID { get; set; }
    public string Freight { get; set; }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim htmlTable As StringBuilder = New StringBuilder()
        htmlTable.Append("<table class='table table-bordered table-hover datatable-highlight' id='tbldata'>")
        htmlTable.Append("<thead><tr><th style='display:none;'>#</th><th>Name</th><th>Country</th><th class='text-center nosort'>Actions</th><th class='text-center nosort'>Add</th></tr></thead>")
        htmlTable.Append("<tbody>")
        For Each colum In GetCustomers()
            htmlTable.Append("<tr>")
            htmlTable.Append("<td style='display:none;'>" & colum.CustomerId & "</td>")
            htmlTable.Append("<td>" & colum.ContactName & "</td>")
            htmlTable.Append("<td>" & colum.Country & "</td>")
            htmlTable.Append("<td class='text-center'> <a id='btnEdit' style='cursor:pointer;' class='list-icons-item text-primary-600' title='Edit' href='NewTraining.aspx?val=" & colum.CustomerId.ToString() & "'><i class='icon-pencil7 mr-1'></i> Edit </a>" & "</td>")
            htmlTable.Append("<td class='text-center'> <a id='btnAdd' style='cursor:pointer;' class='list-icons-item text-primary-600' data-toggle='modal' data-backdrop='static' data-keyboard='false' onclick='BindData(this);'><i class='icon-pencil7 mr-1'></i>Add</a></td>")
            htmlTable.Append("</tr>")
        Next

        htmlTable.Append("</tbody>")
        htmlTable.Append("</table>")
        PlaceHolderTable.Controls.Add(New Literal With {
            .Text = htmlTable.ToString()
        })
        Dim orders As List(Of Order) = New List(Of Order)()
        orders.Add(New Order())
        rptOrders.DataSource = orders
        rptOrders.DataBind()
    End If
End Sub

Public Function GetCustomers() As List(Of Customer)
    Dim items As List(Of Customer) = New List(Of Customer)()
    items.Add(New Customer With {
        .CustomerId = "ALFKI",
        .ContactName = "Alfreds Futterkiste",
        .Country = "UK"
    })
    items.Add(New Customer With {
        .CustomerId = "ANATR",
        .ContactName = "Around the Horn",
        .Country = "Germany"
    })
    items.Add(New Customer With {
        .CustomerId = "ANTON",
        .ContactName = "Island Trading",
        .Country = "France"
    })
    Return items
End Function

<WebMethod()>
Public Shared Function GetOrders(ByVal id As String) As List(Of Order)
    Dim orders As List(Of Order) = New List(Of Order)()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand("SELECT CustomerID,OrderID,Freight FROM [Orders] WHERE CustomerID = @Id", con)
            cmd.Parameters.AddWithValue("@Id", id)
            con.Open()
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    orders.Add(New Order With {
                        .CustomerId = sdr("CustomerID").ToString(),
                        .OrderID = sdr("OrderID").ToString(),
                        .Freight = sdr("Freight").ToString()
                    })
                End While
            End Using
            con.Close()
        End Using
    End Using

    Return orders
End Function

Public Class Customer
    Public Property CustomerId As String
    Public Property ContactName As String
    Public Property Country As String
End Class

Public Class Order
    Public Property CustomerId As String
    Public Property OrderID As String
    Public Property Freight As String
End Class

Screenshot