Hi, micah
I have created sample code which fullfill your requirement.
HTML
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:DataList ID="Datalist1" runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="OnSelectedIndexChanged">
<HeaderTemplate>
<table id="Customers" border="0" cellpadding="1px" cellspacing="1px">
<tr>
<th>
<asp:Label ID="lblId" Text="Id" runat="server" />
</th>
<th>
<asp:Label ID="lblName" Text="Name" runat="server" />
</th>
<th>
<asp:Label ID="lblCountry" Text="Country" runat="server" />
</th>
<th>
<asp:Label ID="Label1" Text="Action" runat="server" />
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblId" Text='<%#Eval("CustomerId")%>' runat="server" />
</td>
<td>
<asp:Label ID="lblName" Text='<%#Eval("Name")%>' runat="server" />
</td>
<td>
<asp:Label ID="lblCountry" Text='<%#Eval("Country") %>' runat="server" />
</td>
<td>
<asp:LinkButton Text="Select" ID="linkbtn" CommandName="Select" runat="server" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
<div class="modal fade" id="myModal9t" role="dialog" style="display: none" data-backdrop="static">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="">
<button type="buttonclose" onclick="OnClose" class="close" data-dismiss="myModal9t">
×</button><h4 class="modal-title" style="color: #999999">
Share This</h4>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel2model" runat="server">
<ContentTemplate>
<p>
<asp:TextBox ID="TextBox2" runat="server" placeholder="Add Comment... " TextMode="MultiLine"
CssClass="form-control" Height="80px" Text="@"></asp:TextBox></p>
<br />
<asp:FormView ID="SharePost" runat="server" CssClass=" ">
<ItemTemplate>
<!-- Conversations are loaded here -->
<div class="">
<!-- Message. Default to the left -->
<div class="" style="margin-bottom: 1px; margin-left: 8px; margin-top: 8px; margin-right: 8px">
<div class=" " style="">
<ul class="media-list">
<li class="media">
<div class="media-body">
<asp:Label ID="lblId" Text='<%#Eval("CustomerId")%>' runat="server" />
<asp:Label ID="lblName" Text='<%#Eval("Name") %>' runat="server" />
<asp:Label ID="lblCountry" Text='<%#Eval("Country") %>' runat="server" />
<%--<asp:Label ID="lblpost2" runat="server" Text='<%# Eval("ContentPost").ToString().Length >100 ? Eval("ContentPost").ToString().Substring(0,100)+"..." : Eval("ContentPost").ToString()%>'
Font-Names="Comic Sans MS" Font-Bold="False" Font-Strikeout="False" ForeColor="#333333"></asp:Label>--%><div
class=" col-lg-12" style="margin-bottom: 2px; margin-top: 2px">
<%--<a href='<%#getUserHREF2(Container.DataItem)%>' class="">
<img src='<%#getSRCDD(Container.DataItem)%>' class="img-rounded img-responsive" style="width: 50%"
alt="" />
</a>--%>
</div>
<div class=" col-lg-12" style="margin-top: 2px; margin-bottom: 2px">
</div>
<!-- Nested media object -->
</div>
</li>
</ul>
</div>
</div>
<!--/.direct-chat-messages-->
<!-- Contacts are loaded here -->
</div>
<!-- /.box-body -->
</ItemTemplate>
</asp:FormView>
</ContentTemplate>
<%-- <Triggers>
<asp:PostBackTrigger ControlID="GetMergedAll" />
</Triggers>--%>
</asp:UpdatePanel>
<div class="col-sm-12">
<div id="" class="">
</div>
</div>
</div>
<div class="clearfix">
</div>
<div class="modal-footer">
<asp:LinkButton ID="LinkButton6" runat="server" CssClass=" btn-twitter btn-lg" Font-Bold="True"
BorderColor="#007ACC">
<i class="fa fa-retweet" style="font-weight: bold; margin-right: 3px; font-size: large;">
<asp:Label ID="Label7" runat="server" Text="Share"></asp:Label></i>
</asp:LinkButton></div>
</div>
</div>
</div>
<div>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
</div>
</form>
</body>
C#
System.Text.StringBuilder sb = new System.Text.StringBuilder();
private string constring = ConfigurationManager.ConnectionStrings["Constr"].ToString();
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("Select * from Customers", con))
{
DataTable dt = new DataTable();
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
sda.Fill(dt);
Datalist1.DataSource = dt;
Datalist1.DataBind();
}
}
}
}
}
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
int customersId = Convert.ToInt32((Datalist1.SelectedItem.FindControl("lblId") as Label).Text);
SharePost.DataSource = GetData(customersId);
SharePost.DataBind();
sb.Append(@"<script type='text/javascript'>");
sb.Append("$(function () {");
sb.Append("$('#myModal9t').dialog({modal: true,autoOpen: false ,width: 400,height: 400 });");
sb.Append(" $('#myModal9t').dialog('open');});");
sb.Append("</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "ModelScript", sb.ToString(), false);
}
private DataTable GetData(int customerId)
{
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("Select * from Customers Where CustomerId='" + customerId + "'", con))
{
DataTable dt = new DataTable();
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
sda.Fill(dt);
return dt;
}
}
}
}
Screenshot
