Hi micah,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used NorthWind database that you can download using the link given below.
Download Northwind Database
HTML
<div>
<asp:DataList ID="dlCustomers" runat="server" OnItemDataBound="dlCustomers_ItemDataBound">
<HeaderTemplate>
<table>
<tr>
<th>
Name
</th>
<th>
City
</th>
<th>
Order
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblContactName" runat="server" Text='<%#Eval("ContactName")%>'></asp:Label>
</td>
<td>
<asp:Label ID="lblCity" runat="server" Text='<%#Eval("City")%>'></asp:Label>
</td>
<td>
<asp:DataList ID="dlOrders" runat="server">
<HeaderTemplate>
<table>
<tr>
<th>
Order Id
</th>
<th>
Order Date
</th>
<th>
View
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="lblOrderId" Text='<%#Eval("OrderId")%>' runat="server" />
</td>
<td>
<asp:Label ID="lblDate" Text='<%#Convert.ToDateTime(Eval("OrderDate")).ToString("dd/MM/yyyy")%>'
runat="server" />
</td>
<td>
<asp:Button ID="Button1" runat="server" Text="View" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
<tr id="Tr1" runat="server" visible="<%#Boolean.Parse(dlCustomers.Items.Count = 0)%>">
<td colspan="3">
<asp:Label ID="Label1" runat="server" Text="No Record Found!">
</asp:Label>
</td>
</tr>
</table>
</FooterTemplate>
</asp:DataList>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
</div>
<div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="bs-example-modal-lgLabel"
aria-hidden="true">
<div class="modal-dialog ">
<!-- Modal content-->
<div class="modal-content ">
<div class="clearfix">
</div>
<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="H2">
<span class="reply ">
<asp:Label ID="Label18" runat="server" Text=" Reply to this post"></asp:Label>
</span>
</h4>
</div>
<div class="modal-header col-lg-12" style="margin-bottom: 4px">
Modal Header
</div>
<div class=" modal-body">
OrderId:<asp:Label ID="lblOrderId" runat="server" />
<br />
<br />
OrderDate:<asp:Label ID="lblOrderDate" runat="server" />
</div>
<div class="clearfix">
</div>
<div class="modal-footer" style="background-color: #F8F8F8">
</div>
</div>
</div>
</div>
<div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript">
$(function () {
$('[id*=Button1]').on("click", function () {
var orderId = $(this).closest('tr').find('[id*=lblOrderId]').html();
var orderDate = $(this).closest('tr').find('[id*=lblDate]').html();
$('#bs-example-modal-lg').modal('show');
$('#bs-example-modal-lg [id*=lblOrderId]').html(orderId);
$('#bs-example-modal-lg [id*=lblOrderDate]').html(orderDate);
return false;
});
});
</script>
</div>
Namespaces
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
dlCustomers.DataSource = GetData("SELECT TOP 3 CustomerID,ContactName,City FROM Customers");
dlCustomers.DataBind();
}
}
private static DataTable GetData(string query)
{
string constr = ConfigurationManager.ConnectionStrings["conString"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = query;
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
DataTable dt = new DataTable();
sda.Fill(dt);
return dt;
}
}
}
}
}
protected void dlCustomers_ItemDataBound(object sender, DataListItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
DataRowView dataRowView = e.Item.DataItem as DataRowView;
string customerId = dataRowView["CustomerID"].ToString();
DataList orderDataList = e.Item.FindControl("dlOrders") as DataList;
orderDataList.DataSource = GetData("SELECT TOP 1 OrderId,OrderDate FROM Orders WHERE CustomerID = '" + customerId + "'");
orderDataList.DataBind();
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
dlCustomers.DataSource = GetData("SELECT TOP 3 CustomerID,ContactName,City FROM Customers")
dlCustomers.DataBind()
End If
End Sub
Private Shared Function GetData(query As String) As DataTable
Dim constr As String = ConfigurationManager.ConnectionStrings("conString").ConnectionString
Using con As New SqlConnection(constr)
Using cmd As New SqlCommand()
cmd.CommandText = query
Using sda As New SqlDataAdapter()
cmd.Connection = con
sda.SelectCommand = cmd
Using ds As New DataSet()
Dim dt As New DataTable()
sda.Fill(dt)
Return dt
End Using
End Using
End Using
End Using
End Function
Protected Sub dlCustomers_ItemDataBound(sender As Object, e As DataListItemEventArgs)
If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType = ListItemType.AlternatingItem Then
Dim dataRowView As DataRowView = TryCast(e.Item.DataItem, DataRowView)
Dim customerId As String = dataRowView("CustomerID").ToString()
Dim orderDataList As DataList = TryCast(e.Item.FindControl("dlOrders"), DataList)
orderDataList.DataSource = GetData((Convert.ToString("SELECT TOP 1 OrderId,OrderDate FROM Orders WHERE CustomerID = '") & customerId) + "'")
orderDataList.DataBind()
End If
End Sub
Screenshot
