Refer the below sample and modify with your table and modal structure.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<!-- Bootstrap -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
// Button 1 click
$('[id*=Button1]').on('click', function () {
var id = $(this).closest('tr').find($('[id*=lblName]')).text();
$.ajax({
type: "POST",
url: "CS.aspx/GetNameUserName",
data: '{name:"' + id + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var table = $("#modalbody").find('table').eq(0).clone(true);
var customers = response.d;
$("#modalbody").find('table').eq(0).remove();
$(customers).each(function () {
$(".name", table).html(this.ContactName);
$(".companyname", table).html(this.CompanyName);
$("#modalbody").append(table);
table = $("#modalbody").find('table').eq(0).clone(true);
});
$('#myModal').modal('show');
$('#myModal1').modal('hide');
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
return false;
});
//Save Mopdal details
$("#btnSaveComments").on("click", function () {
var comments = $("#txtComments").val();
var tableModal = $(".tblCustomer").html();
var name = $(tableModal).find('.name').html().trim();
var companyName = $(tableModal).find('.companyname').html().trim();
$.ajax({
type: "POST",
url: "CS.aspx/InsertCommenttype",
data: '{name:"' + name + '",company:"' + companyName + '",comment:"' + comments + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert(response.d);
},
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:DataList ID="dlstProducts" runat="server" RepeatColumns="3" CellSpacing="10"
RepeatDirection="Horizontal" RepeatLayout="Table">
<ItemTemplate>
<table>
<tr>
<td>
<b>ID : </b>
<asp:Label ID="ProdID" runat="server" Text='<%#Eval("Id") %>' /><br />
<b>Name : </b>
<asp:Label ID="lblName" runat="server" Text='<%#Eval("Name") %>' />
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="Show" class="btn btn-primary btn-sm" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div class="container">
<div class="row">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />
<%--Modal 1 Start--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">
Name UserName Details</h4>
</div>
<div id="modalbody" align="center" class="modal-body">
<table class="tblCustomer" cellpadding="2" cellspacing="0" border="1">
<tr>
<td>
<b>Name: </b><span class="name">
<%# Eval("ContactName") %></span>
<br />
<b>Company: </b><span class="companyname">
<%# Eval("CompanyName")%></span><br />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<center>
<asp:TextBox runat="server" ID="txtComments" TextMode="MultiLine" />
<br />
<asp:Button ID="btnSaveComments" Text="Save Comments" runat="server" />
</center>
</div>
</div>
</div>
</div>
<%--Modal 1 End--%>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
dt.Rows.Add(1, "Thomas Hardy", "Ireland");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Ana Trujillo", "France");
dt.Rows.Add(4, "Antonio Moreno", "Brazil");
dlstProducts.DataSource = dt;
dlstProducts.DataBind();
}
}
[WebMethod]
public static List<Customer> GetNameUserName(string name)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT ContactName,CompanyName FROM Customers WHERE ContactName = '" + name + "'"))
{
cmd.Connection = con;
List<Customer> customers = new List<Customer>();
con.Open();
SqlDataReader sdr = cmd.ExecuteReader();
while (sdr.Read())
{
customers.Add(new Customer { ContactName = sdr["ContactName"].ToString(), CompanyName = sdr["CompanyName"].ToString() });
}
con.Close();
return customers;
}
}
}
// Insert into Customer Choice Description Table
[WebMethod]
public static string InsertCommenttype(string name, string company, string comment)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO customerchoice&description(Name,Company,Comment) VALUES(@Name,@Company,@Comment)"))
{
cmd.Connection = con;
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@Name", name);
cmd.Parameters.AddWithValue("@Company", company);
cmd.Parameters.AddWithValue("@Comment", comment);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
return "Saved";
}
public class Customer
{
public string ContactName { get; set; }
public string CompanyName { get; set; }
public string City { get; set; }
public string Country { get; set; }
public string PostalCode { get; set; }
public string Phone { get; set; }
public string Fax { get; set; }
}