Dotnet Awesome

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

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 6th Post about AngularJS. Here I have explained a little about AngularJS and What we will learn in this section part by part. 

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.
Part7 - Nested Tabuler Data using AngularJS
Contact Name Phone Address City Postal Code
+ {{O.Customer.ContactName}} {{O.Customer.Phone}} {{O.Customer.Address}} {{O.Customer.City}} {{O.Customer.PostalCode}}
Order ID Order Date Shipped Date Ship Name Address Postal Code
{{a.OrderID}} {{a.OrderDate.slice(6,-2) | date:'dd-MM-yyyy'}} {{a.ShippedDate.slice(6,-2) | date:'dd-MM-yyyy'}} {{a.ShipName}} {{a.ShipAddress}} {{a.ShipPostalCode}}
Part 7 - How to retrieve and display master details tabular data with AngularJS and ASP.NET MVC application.
Video Tutorial
Step Wise Guidlines
Download
Share This Tutorial
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <style>
        .menuUl {
            list-style:none;
            margin:0px;
            padding:0px;
        }
            .menuUl li {
                float:left;
                padding:3px;
                margin-right:2px;
                background-color:#f3f3f3;
            }
                .menuUl li a {
                    display:block;
                    line-height:30px;
                    padding:0px 5px;
                    color:#920f0f;
                    text-decoration:none;
                }
                    .menuUl li a:hover {
                        text-decoration:underline;
                    }
    </style>
</head>
    @* Here  ng-app="MyApp" is used for auto-bootstrap an AngularJS application. here ng-app="MyApp" means <body> element is the owner 
    of AngularJS application*@


<body ng-app="MyApp">
     <ul class="menuUl">
         <li><a href="#" style="color:black;"><b>Angular Example :</b></a></li>
         <li>@Html.ActionLink("Part 1", "Index")</li>
         <li>@Html.ActionLink("Part 2", "Part2")</li>
         <li>@Html.ActionLink("Part 3", "Part3")</li>
         <li>@Html.ActionLink("Part 4", "Part4")</li>
         <li>@Html.ActionLink("Part 5", "Part5")</li>
         <li>@Html.ActionLink("Part 6", "Part6")</li>
     </ul>
    <div style="height:1px; clear:both;"></div>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @* Add Angular Library Here *@
    @Scripts.Render("~/bundles/angular")
    <script src="~/Scripts/MyApp.js"></script>
    @RenderSection("scripts", required: false)
</body>
</html>
Posted By : Sourav Mondal