mvc and angular

Introduction

This article shows how to create a Master and Detail Grid using AngularJS and WCF. In this article we will see:

  1. How to create a WCF Rest service and retrieve data from the database.

  2. How to install an AngularJS Package in our MVC application.

  3. How to create our AngularJS application to create our own Master Detail Grid.

  4. How to use a WCS service in AngularJS and bind the data of both a Master and Detail to our MVC View.
Note: a prerequisite is Visual Studio 2013. If you don't have Visual Studio 2013, you can download it from the Microsoft website.

Here we can see some basic and reference links for the following.

Windows Communication Foundation (WCF): WCF is a framework for building service-oriented applications.

Service-oriented application: Using this protocol the service can be shared and used over a network.

For example let's consider now we are working on a project and we need to create some common database function and those functions need to be used in multiple projects and the projects are in multiple places and connected via a network such as the internet.

In this case we can create a WCF service and we can write all our common database functions in our WCF service class. We can deploy our WCF in IIS and use the URL in our application to do DB functions. In the code part let's see how to create a WCF REST service and use it in our AngularJS application.

If you are interested in reading more details about WCF then kindly go to this link.

AngularJS

We might be be familiar with what is Model, View and View Model (MVVM) and Model, View and Controller (MVC) are. AngularJS is a JavaScript framework that is purely based on HTML CSS and JavaScript .

Similar to the MVC and MVVM patterns AngularJS uses the Model, View and Whatever (MVW) pattern.

In our example I have used Model, View and Service. In the code part let's see how to Install and create AngularJS in our MVC application.

If you are interested in reading more details about AngularJS then kindly go to this link.

Code Part

Create Database and Table

We will create an Order Master and Order Detail table to be used for the Master and Detail Grid data binding.

The following is the script to create a database, table and sample insert query.

Run this script in your SQL Server. I have used SQL Server 2008 R2.

  1. --create DataBase
  2. Create Database OrderManagement
  4. -- Create OrderMasters Table
  6. CREATE TABLE [dbo].[OrderMasters](
  7. [Order_No] [varchar](20) NOT NULL,
  8. [Table_ID] [varchar](20) NOT NULL,
  9. [Description] [varchar](200) NOT NULL,
  10. [Order_DATE] [datetime] NOT NULL,
  11. [Waiter_Name] [varchar](20) NOT NULL
  12. CONSTRAINT [PK_OrderMasters] PRIMARY KEY CLUSTERED
  13. (
  14. [Order_No] ASC
  15. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  16. ) ON [PRIMARY]
  18. -- Insert OrderMasters sample data
  20. INSERT INTO [OrderMasters]
  21. ([Order_No],[Table_ID] ,[Description],[Order_DATE],[Waiter_Name])
  22. VALUES
  23. ('ORD_001','T1','Order for Table T1',GETDATE(),'SHANU' )
  25. INSERT INTO [OrderMasters]
  26. ([Order_No],[Table_ID] ,[Description],[Order_DATE],[Waiter_Name])
  27. VALUES
  28. ('ORD_002','T2','Order for Table T2',GETDATE(),'Afraz' )
  30. INSERT INTO [OrderMasters]
  31. ([Order_No],[Table_ID] ,[Description],[Order_DATE],[Waiter_Name])
  32. VALUES
  33. ('ORD_003','T3','Order for Table T3',GETDATE(),'Afreen')
  36. CREATE TABLE [dbo].[OrderDetails](
  37. [Order_Detail_No] [varchar](20) NOT NULL,
  38. [Order_No] [varchar](20) CONSTRAINT fk_OrderMasters FOREIGN KEY REFERENCES OrderMasters(Order_No),
  39. [Item_Name] [varchar](20) NOT NULL,
  40. [Notes] [varchar](200) NOT NULL,
  41. [QTY] INT NOT NULL,
  42. [Price] INT NOT NULL
  43. CONSTRAINT [PK_OrderDetails] PRIMARY KEY CLUSTERED
  44. (
  45. [Order_Detail_No] ASC
  46. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
  47. ) ON [PRIMARY]
  50. --Now let’s insert the 3 items for the above Order No 'Ord_001'.
  51. INSERT INTO [OrderDetails]
  52. ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
  53. VALUES
  54. ('OR_DT_001','ORD_001','Ice Cream','Need very Cold',2 ,160)
  56. INSERT INTO [OrderDetails]
  57. ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
  58. VALUES
  59. ('OR_DT_002','ORD_001','Coffee','Hot and more Suger',1 ,80)
  61. INSERT INTO [OrderDetails]
  62. ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
  63. VALUES
  64. ('OR_DT_003','ORD_001','Burger','Spicy',3 ,140)
  66. INSERT INTO [OrderDetails]
  67. ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
  68. VALUES
  69. ('OR_DT_004','ORD_002','Pizza','More Chees and Large',1 ,350)
  71. INSERT INTO [OrderDetails]
  72. ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
  73. VALUES
  74. ('OR_DT_005','ORD_002','Cola','Need very Cold',3 ,50)
  76. INSERT INTO [OrderDetails]
  77. ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
  78. VALUES
  79. ('OR_DT_006','ORD_003','IDLY','Hot',3 ,40)
  80. INSERT INTO [OrderDetails]
  81. ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price])
  82. VALUES
  83. ('OR_DT_007','ORD_003','Thosa','Hot',3 ,50)
  85. -- To Select and test Order Master and Details
  86. Select * FROM OrderMasters
  88. Select * From OrderDetails

Create WCF REST Service

Open Visual Studio 2013 then select "File" -> "New" -> "Project..." then select WCF Service Application then select your project path and name your WCF service and click OK.

new wcf service

Once we have created our WCF Service we can see “IService.CS” and “Service1.svc” in the Solution Explorer as in the following.

solution explorer

The following code will be automatically created for all the IService.CS files. We can change and write our own code here.

  1. public interface IService1
  2. {
  4. [OperationContract]
  5. string GetData(int value);
  7. [OperationContract]
  8. CompositeType GetDataUsingDataContract(CompositeType composite);
  10. // TODO: Add your service operations here
  11. }
  12. // Use a data contract as illustrated in the sample below to add composite types to service operations.
  13. [DataContract]
  14. public class CompositeType
  15. {
  16. bool boolValue = true;
  17. string stringValue = "Hello ";
  19. [DataMember]
  20. public bool BoolValue
  21. {
  22. get { return boolValue; }
  23. set { boolValue = value; }
  24. }
  26. [DataMember]
  27. public string StringValue
  28. {
  29. get { return stringValue; }
  30. set { stringValue = value; }
  31. }
  32. }

Data Contract

In our example we need to get both an Order Master and an Order Details from the database, so I have created two Data Contracts, “OrderMasterDataContract” and “OrderDetailDataContract”.

Here we can see we have declarared all our Table column names as Data Member.

  1. public class OrderDataContract
  2. {
  3. [DataContract]
  4. public class OrderMasterDataContract
  5. {
  6. [DataMember]
  7. public string Order_No { get; set; }
  8. [DataMember]
  9. public string Table_ID { get; set; }
  10. [DataMember]
  11. public string Description { get; set; }
  12. [DataMember]
  13. public string Order_DATE { get; set; }
  14. [DataMember]
  15. public string Waiter_Name { get; set; }
  17. }
  20. [DataContract]
  21. public class OrderDetailDataContract
  22. {
  23. [DataMember]
  24. public string Order_Detail_No { get; set; }
  25. [DataMember]
  26. public string Order_No { get; set; }
  27. [DataMember]
  28. public string Item_Name { get; set; }
  29. [DataMember]
  30. public string Notes { get; set; }
  31. [DataMember]
  32. public string QTY { get; set; }
  33. [DataMember]
  34. public string Price { get; set; }
  35. }
  37. }

Service Contract

In the Operation Contract we can see “WebInvoke” and “WebGet” for retrieving the data from the database in the REST Serivce.

  1. RequestFormat = WebMessageFormat.Json,
  2. ResponseFormat = WebMessageFormat.Json,

Here we can see both of the request and response formats. Here I have used the JavaScript Object Notation (JSON) format.

Here I have declared the 3 methods “GetOrderMaster”, “SearchOrderMaster” and “OrderDetails” . The “GetOrderMaster” method gets the Order Master records. In the “OrderDetails” method the Order_No parameter provides the order detail filter by Order Number.

  1. [ServiceContract]
  2. public interface IService1
  3. {
  5. [OperationContract]
  6. [WebInvoke(Method = "GET",
  7. RequestFormat = WebMessageFormat.Json,
  8. ResponseFormat = WebMessageFormat.Json,
  9. UriTemplate = "/GetOrderMaster/")]
  10. List<OrderDataContract.OrderMasterDataContract> GetOrderMaster();
  12. [OperationContract]
  13. [WebGet(RequestFormat = WebMessageFormat.Json,
  14. ResponseFormat = WebMessageFormat.Json,
  15. UriTemplate = "/SearchOrderMaster/{Order_No}")]
  16. OrderDataContract.OrderMasterDataContract SearchOrderMaster(string Order_No);
  18. [OperationContract]
  19. [WebInvoke(Method = "GET",
  20. RequestFormat = WebMessageFormat.Json,
  21. ResponseFormat = WebMessageFormat.Json,
  22. UriTemplate = "/OrderDetails/{Order_No}")]
  23. List<OrderDataContract.OrderDetailDataContract> OrderDetails(string Order_No);
  24. }

Iservice.Cs: Complete Source Code

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Runtime.Serialization;
  5. using System.ServiceModel;
  6. using System.ServiceModel.Web;
  7. using System.Text;
  8. namespace Shanu_WCFDBService
  9. {
  10. // NOTE: You can use the "Rename" command on the "Refactor" menu to change the interface name "IService1" in both code and config file together.
  11. [ServiceContract]
  12. public interface IService1
  13. {
  15. [OperationContract]
  16. [WebInvoke(Method = "GET",
  17. RequestFormat = WebMessageFormat.Json,
  18. ResponseFormat = WebMessageFormat.Json,
  19. UriTemplate = "/GetOrderMaster/")]
  20. List<OrderDataContract.OrderMasterDataContract> GetOrderMaster();
  22. [OperationContract]
  23. [WebGet(RequestFormat = WebMessageFormat.Json,
  24. ResponseFormat = WebMessageFormat.Json,
  25. UriTemplate = "/SearchOrderMaster/{Order_No}")]
  26. OrderDataContract.OrderMasterDataContract SearchOrderMaster(string Order_No); [OperationContract]
  27. [WebInvoke(Method = "GET",
  28. RequestFormat = WebMessageFormat.Json,
  29. ResponseFormat = WebMessageFormat.Json,
  30. UriTemplate = "/OrderDetails/{Order_No}")]
  31. List<OrderDataContract.OrderDetailDataContract> OrderDetails(string Order_No);
  32. }
  34. public class OrderDataContract
  35. {
  36. [DataContract]
  37. public class OrderMasterDataContract
  38. {
  39. [DataMember]
  40. public string Order_No { get; set; }
  41. [DataMember]
  42. public string Table_ID { get; set; }
  43. [DataMember]
  44. public string Description { get; set; }
  45. [DataMember]
  46. public string Order_DATE { get; set; }
  47. [DataMember]
  48. public string Waiter_Name { get; set; }
  49. }
  51. [DataContract]
  52. public class OrderDetailDataContract
  53. {
  54. [DataMember]
  55. public string Order_Detail_No { get; set; }
  56. [DataMember]
  57. public string Order_No { get; set; }
  58. [DataMember]
  59. public string Item_Name { get; set; }
  60. [DataMember]
  61. public string Notes { get; set; }
  62. [DataMember]
  63. public string QTY { get; set; }
  64. [DataMember]
  65. public string Price { get; set; }
  66. }
  67. }
  68. }

Add Database using ADO.NET Entity Data Model

Right-click your WCF project and select Add New Item tehn select ADO.NET Entity Data Model and click Add.

adonet entity data

Select EF Designer from the Database and click "Next".

ef designer from database

Click "New Connection".

new connection

Here we can select our Database Server Name and enter your DB server SQL Server Authentication User ID and Password. We have already created our database as “OrderManagement” so we can select the database and click OK.

connection properties

Click Next and select tables that need to be used. In our example we need to use “OrderMasters" and “orderDetails”. Select both tables and click "Finish".

entity data model wizard

Here we can see that now we have created our OrderManagementModel.

order management model

Service1.SVC

“Service.SVC.CS” implements the IService Interface and overrides and defines all the methods of the Operation Contract.

For example here we can see I have implemented the IService1 in the Service1 class. Created the object for our Entity model and in GetOrderMaster using a LINQ Query I have selected the data from the OrderMasters table and the result was added to the list.

  1. public class Service1 : IService1
  2. {
  3. OrderManagementEntities OME;
  4. public Service1()
  5. {
  6. OME = new OrderManagementEntities();
  7. }
  8. public List<OrderDataContract.OrderMasterDataContract> GetOrderMaster()
  9. {
  10. var query = (from a in OME.OrderMasters
  11. select a).Distinct();
  12. List<OrderDataContract.OrderMasterDataContract> orderMasterList = new List<OrderDataContract.OrderMasterDataContract>();
  13. query.ToList().ForEach(rec =>
  14. {
  15. orderMasterList.Add(new OrderDataContract.OrderMasterDataContract
  16. {
  17. Order_No = Convert.ToString(rec.Order_No),
  18. Table_ID = rec.Table_ID,
  19. Description = rec.Description,
  20. Order_DATE = Convert.ToString(rec.Order_DATE),
  21. Waiter_Name = rec.Waiter_Name
  22. });
  23. });
  24. return orderMasterList;
  25. }

Service.SVC.CS: Complete Source Code

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Runtime.Serialization;
  5. using System.ServiceModel;
  6. using System.ServiceModel.Web;
  7. using System.Text;
  8. using Shanu_WCFDBService.Model;
  10. namespace Shanu_WCFDBService
  11. {
  12. public class Service1 : IService1
  13. {
  14. OrderManagementEntities OME;
  16. public Service1()
  17. {
  18. OME = new OrderManagementEntities();
  19. }
  21. public List<OrderDataContract.OrderMasterDataContract> GetOrderMaster()
  22. {
  23. var query = (from a in OME.OrderMasters
  24. select a).Distinct();
  26. List<OrderDataContract.OrderMasterDataContract> orderMasterList = new List<OrderDataContract.OrderMasterDataContract>();
  28. query.ToList().ForEach(rec =>
  29. {
  30. orderMasterList.Add(new OrderDataContract.OrderMasterDataContract
  31. {
  32. Order_No = Convert.ToString(rec.Order_No),
  33. Table_ID = rec.Table_ID,
  34. Description = rec.Description,
  35. Order_DATE = Convert.ToString(rec.Order_DATE),
  36. Waiter_Name = rec.Waiter_Name
  37. });
  38. });
  39. return orderMasterList;
  40. }
  42. public OrderDataContract.OrderMasterDataContract SearchOrderMaster(string Order_No)
  43. {
  44. OrderDataContract.OrderMasterDataContract OrderMaster = new OrderDataContract.OrderMasterDataContract();
  46. try
  47. {
  49. var query = (from a in OME.OrderMasters
  50. where a.Order_No.Equals(Order_No)
  51. select a).Distinct().FirstOrDefault();
  53. OrderMaster.Order_No = Convert.ToString(query.Order_No);
  54. OrderMaster.Table_ID = query.Table_ID;
  55. OrderMaster.Description = query.Description;
  56. OrderMaster.Order_DATE = Convert.ToString(query.Order_DATE);
  57. OrderMaster.Waiter_Name = query.Waiter_Name;
  58. }
  59. catch (Exception ex)
  60. {
  61. throw new FaultException<string>
  62. (ex.Message);
  63. }
  64. return OrderMaster;
  65. }
  67. public List<OrderDataContract.OrderDetailDataContract> OrderDetails(string Order_No)
  68. {
  69. var query = (from a in OME.OrderDetails
  70. where a.Order_No.Equals(Order_No)
  71. select a).Distinct();
  73. List<OrderDataContract.OrderDetailDataContract> OrderDetailList = new List<OrderDataContract.OrderDetailDataContract>();
  75. query.ToList().ForEach(rec =>
  76. {
  77. OrderDetailList.Add(new OrderDataContract.OrderDetailDataContract
  78. {
  79. Order_Detail_No = Convert.ToString(rec.Order_Detail_No),
  80. Order_No = Convert.ToString(rec.Order_No),
  81. Item_Name = rec.Item_Name,
  82. Notes = rec.Notes,
  83. QTY = Convert.ToString(rec.QTY),
  84. Price = Convert.ToString(rec.Price)
  85. });
  86. });
  87. return OrderDetailList;
  88. }
  89. }
  90. }

Web.Config

In the WCF project's “Web.Config”, make the following changes:

  1. Change <add binding="basicHttpsBinding" scheme="https" /> to <add binding="webHttpBinding" scheme="http" />

  2. Replace the </behaviors> to:
    1. <endpointBehaviors>
    2. <behavior>
    3. <webHttp helpEnabled="True"/>
    4. </behavior>
    5. </endpointBehaviors>
    6. </behaviors>
Run WCF Service

Now we have created our WCF Rest service, let's run and test our service.

run wcf service

In our service URL we can add our method name and we can see the JSON result data from the database.

get order master

So now we have completed our WCF and now it's time to create our MVC AngularJS application.

We can add a new project to our existing project and create a new MVC web application as in the following.

Right-click the project in the solution and click Add New Project then enter your project name and click "OK".

ass aspnet web app

Select MVC and click "OK".

select mvc

Now we have created our MVC application and it's time to add our WCF Service and install the AngularJS package to our solution.

Add WCF Service: Right-click MVC Solution and click Add then click Service Reference.

add reference

Enter your WCF URL and click GO. Here my WCF URL is http://localhost:2505/Service1.svc.

Add your name and click "OK".

add service reference

Now we have successfully added our WCF Service to our MVC application.

wcf service added

Procedure to Install AngularJS package

Right-click your MVC project and click "Manage NuGet Packages".

manage nuget package

Select Online and Search for AngularJS. Select the AngularJs and click Install.

install angularjs

Now we have Installed the AngularJS package into our MVC Project. Now let's create our AngularJs.

Procedure to Create AngularJs Script Files

Right-click the Script folder and create your own folder to create the AngularJs Model/Controller and Service JavaScript. In your script folder add three JavaScript files and name them Modules.js, Controllers.js and Services.js as in the following.

scripts

Modules.js: Here we add the reference to the Angular.js JavaScript and create an angular module named “RESTClientModule”.

  1. /// <reference path="../angular.js" />
  2. /// <reference path="../angular.min.js" />
  4. var app;
  6. (function () {
  7. app = angular.module("RESTClientModule", []);
  8. })();

Services.js: Here we add the reference to the Angular.js JavaScript and our Module.js.

Here we provide a name for our service and we use this name in controllers.js. Here for the Angular service I have given the name "AngularJs_WCFService". You can give your own name but be careful of changing the name in Controllers.js. Here we can see in the method since I have passed the URL of our webservice.

  1. /// <reference path="../angular.js" />
  2. /// <reference path="../angular.min.js" />
  3. /// <reference path="Modules.js" />
  5. app.service("AngularJs_WCFService", function ($http) {
  6. //Get Order Master Records
  7. this.getOrdermaster = function () {
  8. return $http.get("http://localhost:2505/Service1.svc/GetOrderMaster");
  9. };
  11. //Search Order Master Records
  12. this.getSearchOrder = function (OrderNO) {
  13. return $http.get("http://localhost:2505/Service1.svc/SearchOrderMaster/" + OrderNO);
  14. }
  16. //Search Order Details Records
  17. this.getOrderDetail = function (OrderNO) {
  18. return $http.get("http://localhost:2505/Service1.svc/OrderDetails/" + OrderNO);
  19. }
  21. });

Controllers.js: Here we add the reference to the Angular.js JavaScript and our Module.js and Services.js. The same as for the services for the controller I have given the name "AngularJs_WCFController".

First I get the current data and store the date using $scope.date.

I have created the method GetOrderMasters() and using the Services module I get the obtained Order Master table and bind the result to the “$scope.OrderMastersDisp = pl.data”. The same as that we create all the rest of the methods.

  1. /// <reference path="../angular.js" />
  2. /// <reference path="../angular.min.js" />
  3. /// <reference path="Modules.js" />
  4. /// <reference path="Services.js" />
  5. app.controller("AngularJs_WCFController", function ($scope, $window, AngularJs_WCFService) {
  6. $scope.date = new Date();
  7. GetOrderMasters();
  8. //To Get All Records
  9. function GetOrderMasters() {
  10. var promiseGet = AngularJs_WCFService.getOrdermaster();
  11. promiseGet.then(function (pl) {
  12. $scope.OrderMastersDisp = pl.data
  13. },
  14. function (errorPl) {
  15. });
  16. }
  17. Hidetables()
  18. function Hidetables() {
  19. $scope.isRowHidden = false;
  20. }
  22. $scope.get = function (Order) {
  23. if (Order == null) {
  24. return;
  25. }
  26. if (Order.isRowHidden == true) {
  27. Order.isRowHidden = false;
  28. var promiseGet = AngularJs_WCFService.getOrderDetail(Order.Order_No);
  29. promiseGet.then(function (pl) {
  30. $scope.OrderDetailDisp = pl.data
  31. },
  32. function (errorPl) {
  33. });
  34. }
  35. else {
  36. Order.isRowHidden = true;
  37. }
  38. }
  39. });

So now we have created our Angular Js Module, Controller and Service. So what is next?

Create MVC Control and View to display our result.

Add Controller

Right-click Controllers then select Add Controller then select MVC 5 Controller –Empty then click Add.

add controler

Change the Controller name and here I have given it the name “OrderManagementController” and click OK.

Add View

Right-click on the Controller Index and click Add View.

add view

Name the View “Index”.

In the View design your page and reference angular.Js, Modules.js, Services.js and Controllers.js.

In AngulaJS we use {{ }} to bind or display the data. Here we can see that first I create one table and for that a table.

First in the table I have used the data-ng-controller="AngularJs_WCFController" and here we can see the data-ng-controller will be used to bind the data of the controller to our HTML table.

Using <tbody data-ng-repeat="detail in OrderDetailDisp"> we can get all the records and using the <td><span>{{order.Order_No}}</span></td> bind all the data inside the table. The same as that we create an Inner Table. When the user clicks on the Details button I will display the Order Details table.

  1. <html data-ng-app="RESTClientModule">
  2. @{
  3. ViewBag.Title = "SHANU AngularJs / WCF and Master Detail Grid";
  4. }
  7. <body>
  8. <img src="~/Images/blank.gif" alt="" width="1" height="10" />
  9. <table width="99%" style=" border-bottom:3px solid #3273d5;">
  10. <tr>
  12. <td width=" 250">
  13. <table width="99%">
  14. <tr>
  15. <td>
  16. Welcome Mr. {{'SHANU'}} .
  18. </td>
  21. </tr>
  22. </table>
  23. </td>
  24. <td class="style1" align="center">
  25. <h3>Order Master / Detail Grid using Angular JS and WCF in MVC :)</h3>
  28. </td>
  29. <td align="right">
  30. <div ng-controller="AngularJs_WCFController">
  31. Today Date is :
  32. {{date | date:'yyyy-MM-dd'}}
  33. </div>
  35. </td>
  36. </tr>
  37. </table>
  38. <img src="~/Images/blank.gif" alt="" width="1" height="10" />
  42. <table id="tblContainer" data-ng-controller="AngularJs_WCFController" style='width: 99%;table-layout:fixed;'>
  44. <tr>
  46. <td>
  47. <table style=" background-color:#ECF3F4; border: solid 2px #3273d5; padding: 5px;width: 99%;table-layout:fixed;">
  49. <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;">
  51. <th width="60"></th>
  53. <th>Order No</th>
  55. <th>Table ID</th>
  57. <th>Notes</th>
  59. <th>Order DATE</th>
  61. <th>Waiter Name</th>
  65. <th></th>
  67. </tr>
  69. <tbody data-ng-repeat="order in OrderMastersDisp">
  71. <tr>
  73. <td width="60">
  74. <input type="button" id="Detail" value="Detail" data-ng-click="get(order)" />
  76. </td>
  78. <td><span>{{order.Order_No}}</span></td>
  80. <td><span>{{order.Table_ID}}</span></td>
  82. <td><span>{{order.Description}}</span></td>
  84. <td><span>{{order.Order_DATE}}</span></td>
  86. <td><span>{{order.Waiter_Name}}</span></td>
  90. <td></td>
  94. </tr>
  95. <tr id={{order.Order_No}} ng-hide="order.isRowHidden" ng-init="get(order)">
  97. <td> </td>
  98. <td colspan="6">
  100. <table style=" background-color:#ECF3F4; border: solid 2px #3273d5; padding: 5px;width: 99%;table-layout:fixed;">
  102. <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;">
  104. <th>Order No</th>
  106. <th>Order Detail No</th>
  108. <th>Item Name</th>
  110. <th>Comments</th>
  112. <th>QTY</th>
  114. <th>Price</th>
  116. </tr>
  118. <tbody data-ng-repeat="detail in OrderDetailDisp">
  120. <tr>
  124. <td><span>{{detail.Order_No}}</span></td>
  126. <td><span>{{detail.Order_Detail_No}}</span></td>
  128. <td><span>{{detail.Item_Name}}</span></td>
  130. <td><span>{{detail.Notes}}</span></td>
  132. <td><span>{{detail.QTY}}</span></td>
  134. <td><span>{{detail.Price}}</span></td>
  136. </tr>
  137. </tbody>
  139. </table>
  140. </td>
  142. </tr>
  144. </tbody>
  146. </table>
  147. </td>
  149. </tr>
  151. </table>
  153. </body>
  155. </html>
  156. <script src="~/Scripts/angular.js"></script>
  157. <script src="~/Scripts/ShanuAngularScript/Modules.js"></script>
  158. <script src="~/Scripts/ShanuAngularScript/Services.js"></script>
  159. <script src="~/Scripts/ShanuAngularScript/Controllers.js"></script>

Run your program

Here we can see that when I run the program, first I display the Order Master records in the table.

run program

When the user clicks on the Detail button I will display the details of the order in the next row.

order details

Supported browsers: Chrome and Firefox.