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">
×</button>
</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
