Display Child Table record in modal popup on Parent record selection in ASP.Net MVC

malar
 
on Aug 09, 2021 10:56 PM
Sample_189250.zip
621 Views

Hi Team,

Need to show the child table based on Parent table selection.

Both Parent and child records are available in single list.

List<ProjectUpload> projectlist = new List<ProjectUpload>();
TempData["ProjectList"] = projectlist;

Need to show Parent table and based on selection child records should display in modal popup in MVC.

Please guide me to achieve this.

I tried many things but not worked.

Thanks in Advance.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 10, 2021 02:36 AM
on Aug 10, 2021 02:39 AM

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">&times;</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