Hi,
Refer the below sample.
<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 () {
$('[id*=Button1]').on('click', function () {
var id = $(this).closest('tr').find($('[id*=lblName]')).text();
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: '{name:"' + id + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
return false;
});
});
function OnSuccess(response) {
var table = $(".modal-body").find('table').eq(0).clone(true);
var customers = response.d;
$(".modal-body").find('table').eq(0).remove();
$(customers).each(function () {
$(".name", table).html(this.ContactName);
$(".city", table).html(this.City);
$(".postal", table).html(this.PostalCode);
$(".country", table).html(this.Country);
$(".phone", table).html(this.Phone);
$(".fax", table).html(this.Fax);
$(".image", table).attr("src", this.Image);
$(".modal-body").append(table);
table = $(".modal-body").find('table').eq(0).clone(true);
});
$('#myModal').modal('show');
}
</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 />
<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">
Customer Details</h4>
</div>
<div align="center" class="modal-body">
<table class="tblCustomer" cellpadding="2" cellspacing="0" border="1">
<tr>
<td>
<b>Name: </b><u><span class="name">
<%# Eval("ContactName") %></span></u>
<br />
<b>City: </b><span class="city">
<%# Eval("City") %></span><br />
<b>Postal Code: </b><span class="postal">
<%# Eval("PostalCode") %></span><br />
<b>Country: </b><span class="country">
<%# Eval("Country")%></span><br />
<b>Phone: </b><span class="phone">
<%# Eval("Phone")%></span><br />
<b>Fax: </b><span class="fax">
<%# Eval("Fax")%></span><br />
<b>Photo: </b>
<img class="image" src='<%# Eval("Image")%>' /><br />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
C#
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> GetCustomers(string name)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT ContactName,City,PostalCode,Country,Phone,Fax FROM Customers WHERE ContactName = '" + name.Trim() + "'"))
{
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().Trim(),
City = sdr["City"].ToString().Trim(),
PostalCode = sdr["PostalCode"].ToString().Trim(),
Country = sdr["Country"].ToString().Trim(),
Phone = sdr["Phone"].ToString().Trim(),
Fax = sdr["Fax"].ToString().Trim(),
Image = "Images/" + sdr["ContactName"].ToString().Trim() + ".jpg",
});
}
con.Close();
return customers;
}
}
}
public class Customer
{
public string ContactName { 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; }
public string Image { get; set; }
}
Screenshot
