Part 7 - How to retrieve and display master details tabular data with AngularJS and ASP.NET MVC application.

Part 7 - How to retrieve and display master details tabular data with AngularJS and ASP.NET MVC application.

Introduction

In this post, I would like to explain Part 7 - How to retrieve and display master details tabular data with AngularJS and ASP.NET MVC application.
This is our 7th Post about AngularJS. Here I have explained a little about AngularJS and What we will learn in this section part by part. In Part4 of this post we seen How to Retrieve and Display tabular data with AngularJS and ASP.NET MVC application.
Displaying tabular data in a table is very common scenario for developers, But sometimes we need to provide users with a way to view a Master-details records. Like provide a way where a Admin user can view their valuable Customer as a Master record and When they click on any of the rows, a Details view appears with all records that are related to the Master view like customer order details.

Here we will use AngularJS ng-repeat directive, which is repeats an HTML element. This directive is one of the most commonly used and serves to define your template scope when looping through collections.

Steps :

Step-1: Create table(s) into the database.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have used two tables as below

Step-2: Update Entity Data Model.

Go to Solution Explorer > Open your Entity Data Model (here "MyModel.edmx") > Right Click On Blank area for Get Context Menu > Update Model From Database... > A popup window will come (Entity Data Model Wizard) > Select Tables > Finish.




Step-3: Create a ViewModel (Class) for store Master and Details record.

Here I have created a ViewModel in the Models folder.
Go to Solution Explorer > Right Click on Models folder form Solution Explorer > Add > Class > Enter name > Add.

Here I have created a model (class) Named "CustomerOrders".
public class CustomerOrders
{
    public Customer Customer { get; set; }
    public List<Order> Orders { get; set; }
}

Step-4: Add new action into your controller (here in the Data Controller) for Fetch Data and return as JsonResult from Database.

Here I have added "CustomerOrders" Action into "DataController". Please write this following code

[HttpGet]
public JsonResult CustomerOrders()
{
    List<CustomerOrders> CO = new List<CustomerOrders>();
    using (MyDatabaseEntities dc = new MyDatabaseEntities())
    {
        var cust = dc.Customers.OrderBy(a => a.ContactName).ToList();
        foreach (var i in cust)
        {
            var orders = dc.Orders.Where(a => a.CustomerID.Equals(i.CustomerID)).OrderBy(a=>a.OrderDate).ToList();
            CO.Add(new CustomerOrders
            {
                    Customer = i,
                    Orders = orders
            });
        }         
    }
    return new JsonResult { Data = CO, JsonRequestBehavior = JsonRequestBehavior.AllowGet};
}
        

Step-5: Add a new js File for add a new AngularJS controller and a Factory

Go to Solution Explorer > Right Click on folder (where you want to saved your AngularJS controller files, here I have created a folder named "AngularController"  under Scripts Folder) > Add > Select Javascript file > Enter name > Add.

Write following code in this file.

angular.module('MyApp')  //extending angular module from first part
.controller('Part7Controller', function ($scope, OrderService) { //explained about controller in Part2
    $scope.Orders = [];

    OrderService.GetOrders().then(function (d) {
        $scope.Orders = d.data;
    });
})
.factory('OrderService', function ($http) { //explained about factory in Part2
    var fac = {};
    fac.GetOrders = function () {
        return $http.get('/Data/CustomerOrders');
    }
    return fac;
});
        

Here I have created an angular controller named "Part7Controller" and a Factory named "EmployeeService" with $http injected service. I have explained a little about AngularJS controller here, about Factory here and about $http here.

Step-6: Add new action into your controller (here in the HomeController) for Get the view for show master details tabuler data.

Here I have added "Part7" Action into "Home" Controller. Please write this following code

            public ActionResult Part7() // Nested Tabuler Data
            {
                return View();
            }
        

Step-7: Add view for the Action & design.

Right Click on Action Method (here right click on Part7 action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.

Step-8: Add Jquery code for make it collapsible.

Write the following jquery code...

<script>
$(function () {
    $('body').on('click', '.CX span', function () {
        //When Click On + sign
        if ($(this).text() == '+') {
            $(this).text('-');
        }
        else {
            $(this).text('+');
        }
        $(this).closest('tr') // row of + sign
        .next('tr') // next row of + sign
        .toggle(); // if show then hide else show

    });
});
</script>
        
Complete View
@{
    ViewBag.Title = "Part7";
}

<style>
    /*Here I will add some css for looks good*/
    .tabContainer {
        max-height:400px;
        overflow:auto;
        width:80%;
    }
    .tableData {
        border-left:solid 1px #D8C3C3;
        border-top:solid 1px #D8C3C3;
        width:100%;
    }
        .tableData tr {
        }
        .tableData td,.tableData th {
            border-right:solid 1px #D8C3C3;
            border-bottom:solid 1px #D8C3C3;
            text-align:left;
            padding:5px;
        }
        .tableData td {
        }
        .tableData th {
            background-color:#FAFAFA;
            padding:7px 5px;
            border-bottom-color:#9C9C9C;
        }
    .odd {
        background-color:#f3f3f3;
    }
    .even {
        background-color:#ffffff;
    }
    
    tr.sub {
        display:none;
    }
    .CX {
        width:35px;
    }
    .CX span {
        font-family: fantasy;
        font-size: 15px;
        display: block;
        width: 100%;
        cursor: pointer;
        text-align: center;
    }
</style>

<h2>Part7 - Nested Tabuler Data using AngularJS</h2>
<div ng-controller="Part7Controller">
    <table class="tableData" border="0" cellspacing="0" cellpadding="0">
       <thead>
           <tr>
               <th></th>
               <th>Contact Name</th>
               <th>Phone</th>
               <th>Address</th>
               <th>City</th>
               <th>Postal Code</th>               
           </tr>
       </thead>
        <tbody ng-repeat="O in Orders">
            <tr ng-class-even="'even'" ng-class-odd="'odd'">
                <td class="CX"><span>+</span></td>
                <td>{{O.Customer.ContactName}}</td>
                <td>{{O.Customer.Phone}}</td>
                <td>{{O.Customer.Address}}</td>
                <td>{{O.Customer.City}}</td>
                <td>{{O.Customer.PostalCode}}</td>
            </tr>
            <tr class="sub">
                <td></td>
                <td colspan="5">
                    <table class="tableData" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <th>Order ID</th>
                            <th>Order Date</th>
                            <th>Shipped Date</th>
                            <th>Ship Name</th>
                            <th>Address</th>
                            <th>Postal Code</th>
                        </tr>
                        <tr ng-repeat="a in O.Orders" ng-class-even="'even'" ng-class-odd="'odd'">
                            <td>{{a.OrderID}}</td>
                            <td>{{a.OrderDate.slice(6,-2) | date:'dd-MM-yyyy'}}</td>
                            <td>{{a.ShippedDate.slice(6,-2) | date:'dd-MM-yyyy'}}</td>
                            <td>{{a.ShipName}}</td>
                            <td>{{a.ShipAddress}}</td>
                            <td>{{a.ShipPostalCode}}</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </tbody>
    </table>
</div>

@section Scripts{
    <script src="~/Scripts/AngularController/Part7Controller.js"></script>
    <script>
        $(function () {
            $('body').on('click', '.CX span', function () {
                //When Click On + sign
                if ($(this).text() == '+') {
                    $(this).text('-');
                }
                else {
                    $(this).text('+');
                }
                $(this).closest('tr') // row of + sign
                .next('tr') // next row of + sign
                .toggle(); // if show then hide else show

            });
        });
    </script>
}

        

Step-9: Run Application.

Part 7 - How to retrieve and display master details tabular data with AngularJS and ASP.NET MVC application.

Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.