Hi malar,
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Model
public class CustomerModel
{
public string CustomerID { get; set; }
public string ContactName { get; set; }
public string City { get; set; }
public List<Order> Orders { get; set; }
}
Controller
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
using (NorthwindEntities entites = new NorthwindEntities())
{
List<CustomerModel> model = new List<CustomerModel>();
foreach (Customer customer in entites.Customers.Take(5))
{
model.Add(new CustomerModel
{
CustomerID = customer.CustomerID,
ContactName = customer.ContactName,
City = customer.City,
Orders = entites.Orders.Where(o => o.CustomerID == customer.CustomerID).Take(5).ToList()
});
}
ViewBag.ProjectList = model;
return View();
}
}
}
View
@using Nested_Data_ModalPopup_MVC.Models
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<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>
</head>
<body>
<table class="table">
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>City</th>
<th>Orders</th>
</tr>
<tbody>
@foreach (CustomerModel customer in ViewBag.ProjectList)
{
<tr>
<td>@customer.CustomerID</td>
<td>@customer.ContactName</td>
<td>@customer.City</td>
<td>
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#@customer.CustomerID">
View
</button>
<div class="modal fade" id="@customer.CustomerID">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Order Details</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<table class="table">
<tr>
<th>Order Id</th>
<th>Freight</th>
</tr>
<tbody>
@foreach (Order order in customer.Orders)
{
<tr>
<td>@order.OrderID</td>
<td>@order.Freight</td>
</tr>
}
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
}
</tbody>
</table>
</body>
</html>
Screenshot
