Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML

MVC Angular JS and WCF Rest Service for Master/Detail HTML Grid

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
27 May 2015CPOL8 min read 34.1K   3K   19   10
MVC, AngularJS and WCF Rest Service for Master / Detail HTML Grid
In this article, you will learn about MVC, AngularJS and WCF Rest Service for Master / Detail HTML Grid.

Image 1

Introduction

You can also view my previous articles related to AngularJs using MVC and WCF REST Service.

In this article, we will create a Master Detail Grid using Angular JS and WCF. In this article, we will see:

  1. how to create WCF Rest service and retrieve data from database
  2. how to install Angular JS Package to our MVC application
  3. how to create our Angular JS application to create our own Master Detail Grid
  4. how to use WCS service in Angular JS and bind the data of both Master and Detail to our MVC View

Note: Prerequisite -> Visual Studio 2013 (If you don’t have Visual Studio 2013, you can download it from the Microsoft website here).

Here, we can see some basic and reference links for:

  • Windows Communication Foundation (WCF): WCF is a framework for building service-oriented applications.
  • Service-oriented application: Using 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 projects are in different place and connected via 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 perform DB functions. In code part, let’s see how to create a WCF REST service and use it in our Angular JS application.

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

Angular JS

We might know about what is MVVM (Model, View, View Model) and MVC (Model, View and Controller). Angular JS is a JavaScript framework which is purely based on HTML CSS and JavaScript.

Similar to MVC and MVVM pattern Angular JS MVW pattern (Model View Whatever).

In our example, I have used Model, View and Service. In code part, let’s see how to Install and create Angular JS in our MVC Application.

If you are interested in reading more details about Angular JS, then kindly go through this link.

Using the Code

Create Database and Table

We will create a Order Master and Order Detail table to be used for Master/Detail Grid data bind.

Below 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.

SQL
-- create DataBase

Create Database OrderManagement

-- Create OrderMasters Table

CREATE TABLE [dbo].[OrderMasters]( 
[Order_No] [varchar](20) NOT NULL, 
[Table_ID] [varchar](20) NOT NULL, 
[Description] [varchar](200) NOT NULL, 
[Order_DATE] [datetime] NOT NULL, 
[Waiter_Name] [varchar](20) NOT NULL
CONSTRAINT [PK_OrderMasters] PRIMARY KEY CLUSTERED 
( 
   [Order_No] ASC 
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, _
 IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY] 
) ON [PRIMARY] 

-- Insert OrderMasters sample data

INSERT INTO [OrderMasters] 
          ([Order_No],[Table_ID] ,[Description],[Order_DATE],[Waiter_Name]) 
    VALUES 
          ('ORD_001','T1','Order for Table T1',GETDATE(),'SHANU' ) 
    
INSERT INTO [OrderMasters] 
          ([Order_No],[Table_ID] ,[Description],[Order_DATE],[Waiter_Name]) 
    VALUES 
           ('ORD_002','T2','Order for Table T2',GETDATE(),'Afraz' ) 
         
INSERT INTO [OrderMasters] 
          ([Order_No],[Table_ID] ,[Description],[Order_DATE],[Waiter_Name]) 
     VALUES 
             ('ORD_003','T3','Order for Table T3',GETDATE(),'Afreen') 
            
CREATE TABLE [dbo].[OrderDetails]( 
  [Order_Detail_No] [varchar](20) NOT NULL, 
 [Order_No] [varchar](20) CONSTRAINT  fk_OrderMasters FOREIGN KEY REFERENCES _
                                      OrderMasters(Order_No), 
 [Item_Name] [varchar](20) NOT NULL,  
 [Notes] [varchar](200) NOT NULL, 
[QTY]  INT NOT NULL, 
 [Price] INT NOT NULL 
 CONSTRAINT [PK_OrderDetails] PRIMARY KEY CLUSTERED
( 
    [Order_Detail_No] ASC 

)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, _
 ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY] 
) ON [PRIMARY] 

-- Now let’s insert the 3 items for the above Order No 'Ord_001'. 

INSERT INTO [OrderDetails] 
          ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price]) 
   VALUES 
          ('OR_DT_001','ORD_001','Ice Cream','Need very Cold',2 ,160) 

INSERT INTO [OrderDetails] 
          ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price]) 
   VALUES 
          ('OR_DT_002','ORD_001','Coffee','Hot and more Suger',1 ,80)  

          INSERT INTO [OrderDetails] 
          ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price]) 
   VALUES 
          ('OR_DT_003','ORD_001','Burger','Spicy',3 ,140) 
         
          INSERT INTO [OrderDetails] 
          ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price]) 
   VALUES 
          ('OR_DT_004','ORD_002','Pizza','More Chees and Large',1 ,350) 
         
          INSERT INTO [OrderDetails] 
          ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price]) 
   VALUES 
          ('OR_DT_005','ORD_002','Cola','Need very Cold',3 ,50) 
         
          INSERT INTO [OrderDetails] 
          ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price]) 
   VALUES 
          ('OR_DT_006','ORD_003','IDLY','Hot',3 ,40) 

          INSERT INTO [OrderDetails] 
          ([Order_Detail_No],[Order_No],[Item_Name],[Notes],[QTY] ,[Price]) 
   VALUES 
          ('OR_DT_007','ORD_003','Thosa','Hot',3 ,50) 

-- To Select and test Order Master and Details

Select * FROM OrderMasters

Select * From OrderDetails

2) Create WCF REST Service

Open Visual Studio 2013 -> Select File - New - Project – Select WCF Service Application -> Select your Project path and name your WCF service and click OK.

Image 2

Once we created our WCF Service, we can see “IService.CS” and “Service1.svc” in Solution Explorer as below:

Image 3

IService.CS - > In “IService.CS, we can see three Contracts by default:

  1. [ServiceContract] - > describes the methods or any operations available for service. Service Contract is an Interface and methods can be declared inside the Service Interface using Operation Contract attribute.
  2. [OperationContract] -> is similar to web service [WEBMETHOD]
  3. [DataContract] -> describes the data exchange between the client and the service.
  4. [ServiceContract]

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

C#
   public interface IService1
   {
       [OperationContract]
       string GetData(int value);

       [OperationContract]
       CompositeType GetDataUsingDataContract(CompositeType composite);

       // TODO: Add your service operations here
   }

// Use a data contract as illustrated in the sample below to add composite types
// to service operations.

   [DataContract]
   public class CompositeType
   {
       bool boolValue = true;
       string stringValue = "Hello ";

       [DataMember]
       public bool BoolValue
       {
           get { return boolValue; }
           set { boolValue = value; }
       }

       [DataMember]
       public string StringValue
       {
           get { return stringValue; }
           set { stringValue = value; }
       }
   }

Data Contract

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

Here, we can see that we have declared all our Table column name as Data Member.

C#
public class OrderDataContract
    {
        [DataContract]
        public class OrderMasterDataContract
        {
            [DataMember]
            public string Order_No { get; set; }
            [DataMember]
            public string Table_ID { get; set; }
            [DataMember]
            public string Description { get; set; }
            [DataMember]
            public string Order_DATE { get; set; }
            [DataMember]
            public string Waiter_Name { get; set; }       
        }

        [DataContract]
        public class OrderDetailDataContract
        {
            [DataMember]
            public string Order_Detail_No { get; set; }
            [DataMember]
            public string Order_No { get; set; }
            [DataMember]
            public string Item_Name { get; set; }
            [DataMember]
            public string Notes { get; set; }
            [DataMember]
            public string QTY { get; set; }
            [DataMember]
            public string Price { get; set; }
        }
    }

Service Contract

In Operation Contract, we can see “WebInvoke” and “WebGet” which is to retrieve the data from the database in REST Service.

C#
RequestFormat = WebMessageFormat.Json,

           ResponseFormat = WebMessageFormat.Json,

Here, we can see that in both the request and response format, I have used the Json format.

JSON ->JavaScript Object Notation is a lightweight data interchange format

UriTemplate - > is our method name and here, our method return type is List

Here, I have declared three methods as “GetOrderMaster”, “SearchOrderMaster” and “OrderDetails”. “GetOrderMaster” method is used to get the Order Master records. In “OrderDetails” method, Order_No parameter is used to get the order detail filter by Order No.

C#
[ServiceContract]
   public interface IService1
    {
        [OperationContract]
        [WebInvoke(Method = "GET",
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/GetOrderMaster/")]

        List<OrderDataContract.OrderMasterDataContract> GetOrderMaster();

        [OperationContract]
        [WebGet(RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/SearchOrderMaster/{Order_No}")]

        OrderDataContract.OrderMasterDataContract SearchOrderMaster(string Order_No);

        [OperationContract]
        [WebInvoke(Method = "GET",
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/OrderDetails/{Order_No}")]
        List<OrderDataContract.OrderDetailDataContract> OrderDetails(string Order_No);
}

Iservice.Cs -> Complete Source Code

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
namespace Shanu_WCFDBService
{
    // NOTE: You can use the "Rename" command on the "Refactor" menu 
    // to change the interface name "IService1" in both code and config file together.

    [ServiceContract]
    public interface IService1
    {
        [OperationContract]
        [WebInvoke(Method = "GET",
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/GetOrderMaster/")]

        List<OrderDataContract.OrderMasterDataContract> GetOrderMaster();

        [OperationContract]
        [WebGet(RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/SearchOrderMaster/{Order_No}")]
        OrderDataContract.OrderMasterDataContract SearchOrderMaster(string Order_No); 

        [OperationContract]
        [WebInvoke(Method = "GET",
           RequestFormat = WebMessageFormat.Json,
           ResponseFormat = WebMessageFormat.Json,
           UriTemplate = "/OrderDetails/{Order_No}")]
        List<OrderDataContract.OrderDetailDataContract> OrderDetails(string Order_No);
    }

    public class OrderDataContract
    {
        [DataContract]
        public class OrderMasterDataContract
        {
            [DataMember]
            public string Order_No { get; set; }

            [DataMember]
            public string Table_ID { get; set; }

            [DataMember]
            public string Description { get; set; }

            [DataMember]
            public string Order_DATE { get; set; }

            [DataMember]
            public string Waiter_Name { get; set; }      
        }

        [DataContract]
        public class OrderDetailDataContract
        {
            [DataMember]
            public string Order_Detail_No { get; set; }

            [DataMember]
            public string Order_No { get; set; }

            [DataMember]
            public string Item_Name { get; set; }

            [DataMember]
            public string Notes { get; set; }

            [DataMember]
            public string QTY { get; set; }

            [DataMember]
            public string Price { get; set; }
        }
    }
}

Add Database using ADO.NET Entity Data Model

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

Image 4

Select EF Designer from database and click Next.

Image 5;

Click New Connection.

Image 6

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 data base as “OrderManagement” so we can select the database and click OK.

Image 7

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

Image 8

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

Image 9

Service1.SVC

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

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

C#
public class Service1 : IService1
    {
        OrderManagementEntities OME;
        public Service1()  
        {
            OME = new OrderManagementEntities();  
        }
        public List<OrderDataContract.OrderMasterDataContract> GetOrderMaster()  
        {
           var query = (from a in OME.OrderMasters 
                        select a).Distinct();
           List<OrderDataContract.OrderMasterDataContract> orderMasterList = 
                                  new List<OrderDataContract.OrderMasterDataContract>();
            query.ToList().ForEach(rec =>  
            {
                orderMasterList.Add(new OrderDataContract.OrderMasterDataContract 
                {
                   Order_No = Convert.ToString(rec.Order_No),
                   Table_ID = rec.Table_ID,
                   Description = rec.Description,
                   Order_DATE =  Convert.ToString(rec.Order_DATE),
                   Waiter_Name = rec.Waiter_Name
               });  
           });
            return orderMasterList;  
       }
}

“Service.SVC.CS” - Complete Source Code

C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Web;
using System.Text;
using Shanu_WCFDBService.Model;

namespace Shanu_WCFDBService
{
public class Service1 : IService1
    {
        OrderManagementEntities OME;

        public Service1()  
        {
            OME = new OrderManagementEntities();  
       }

        public List<OrderDataContract.OrderMasterDataContract> GetOrderMaster()  
       {
           var query = (from a in OME.OrderMasters  
                        select a).Distinct();

           List<OrderDataContract.OrderMasterDataContract> orderMasterList = 
                                    new List<OrderDataContract.OrderMasterDataContract>();  

            query.ToList().ForEach(rec =>  
            {
                orderMasterList.Add(new OrderDataContract.OrderMasterDataContract 
                {
                   Order_No = Convert.ToString(rec.Order_No),
                   Table_ID = rec.Table_ID,
                   Description = rec.Description,
                   Order_DATE =  Convert.ToString(rec.Order_DATE),
                   Waiter_Name = rec.Waiter_Name
               });  
           });
            return orderMasterList;  
       }

        public OrderDataContract.OrderMasterDataContract SearchOrderMaster(string Order_No)
        {
 OrderDataContract.OrderMasterDataContract OrderMaster= 
                        new OrderDataContract.OrderMasterDataContract();

            try
            {
                var query = (from a in OME.OrderMasters
                             where a.Order_No.Equals(Order_No)
                             select a).Distinct().FirstOrDefault();

                    OrderMaster.Order_No = Convert.ToString(query.Order_No);
                    OrderMaster.Table_ID = query.Table_ID;
                    OrderMaster.Description = query.Description;
                    OrderMaster.Order_DATE =  Convert.ToString(query.Order_DATE);
                    OrderMaster.Waiter_Name = query.Waiter_Name;
            }

            catch (Exception ex)
            {
                throw new FaultException<string>
                       (ex.Message);
            }
            return OrderMaster;
        }

        public List<OrderDataContract.OrderDetailDataContract> OrderDetails(string Order_No)
        {
            var query = (from a in OME.OrderDetails
                         where a.Order_No.Equals(Order_No)
                         select a).Distinct();

            List<OrderDataContract.OrderDetailDataContract> OrderDetailList = 
                                   new List<OrderDataContract.OrderDetailDataContract>();

            query.ToList().ForEach(rec =>
            {
                OrderDetailList.Add(new OrderDataContract.OrderDetailDataContract
                {
                    Order_Detail_No = Convert.ToString(rec.Order_Detail_No),
                    Order_No = Convert.ToString(rec.Order_No),
                    Item_Name = rec.Item_Name,
                    Notes = rec.Notes,
                    QTY = Convert.ToString(rec.QTY),
                    Price = Convert.ToString(rec.Price)
                });
            });
            return OrderDetailList;
        }
    }
}

Web.Config

In WCF project “Web.Config”.

  1. Change <add binding="basicHttpsBinding" scheme="https" /> to <add binding="webHttpBinding" scheme="http" />
  2. Replace the </behaviors> to:
HTML
<endpointBehaviors>
        <behavior>
          <webHttp helpEnabled="True"/>
        </behavior>
      </endpointBehaviors>
    </behaviors>

Run WCF Service

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

Image 10

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

Image 11

So now, we have completed our WCF and now it’s time to create our MVC Angular JS application.

We can add new project to our existing project and create new MVC web Application as below.

Right click your Solution and click Add New Project -> Enter your project Name and click OK.

Image 12

Select MVC and click OK.

Image 13

Now we have created our MVC application and, it’s time to add our WCF Service and install the Angular JS package to our solution.

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

Image 14

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

Add your name and click OK.

Image 15

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

Image 16

Steps to Install Angular JS Package

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

Image 17

Select Online and Search for Angular JS. Select the AngularJs and click Install.

Image 18

Now we have Installed AngularJS package to our MVC Project. Now let’s create our Angular Js:

  • Modules.js
  • Controllers.js
  • Services.js

Steps to Create AngularJS Script Files

Right click Script folder and create your own folder to create our Angular Js Model/Controller and Service JavaScript. In your script folder, add three JavaScript files and name as Modules.js, Controllers.js and Services.js as below:

Image 19

Modules.js: Here, we add the reference to the Angular.js JavaScript and create a Angular Module named “RESTClientModule”.

JavaScript
/// <reference path="../angular.js" />
/// <reference path="../angular.min.js" /> 
var app;
(function () {
    app = angular.module("RESTClientModule", []);
})();

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

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

JavaScript
/// <reference path="../angular.js" /> 
/// <reference path="../angular.min.js" />  
/// <reference path="Modules.js" />    

app.service("AngularJs_WCFService", function ($http) {
    //Get Order Master Records 
    this.getOrdermaster = function () {
        return $http.get("http://localhost:2505/Service1.svc/GetOrderMaster");
    };

    //Search Order Master Records  
    this.getSearchOrder = function (OrderNO) {
        return $http.get("http://localhost:2505/Service1.svc/SearchOrderMaster/" + OrderNO);
    }

    //Search Order Details Records  
    this.getOrderDetail = function (OrderNO) {
        return $http.get("http://localhost:2505/Service1.svc/OrderDetails/" + OrderNO);
    }
});

Controllers.js: here, we add the reference to the Angular.js JavaScript and our Module.js and Services.js. Same like Services. For the controller, I have given the name as "AngularJs_WCFController".

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

I have created a method as GetOrderMasters() and using the Services module, I get the resultant Order Master table and bind the result to the “$scope.OrderMastersDisp = pl.data”. Same like this, we create all the rest of our methods.

JavaScript
/// <reference path="../angular.js" /> 
/// <reference path="../angular.min.js" />  
/// <reference path="Modules.js" />  
/// <reference path="Services.js" />  
app.controller("AngularJs_WCFController", function ($scope, $window, AngularJs_WCFService) { 
        $scope.date = new Date();
    GetOrderMasters();
    //To Get All Records  
    function GetOrderMasters() { 
        var promiseGet = AngularJs_WCFService.getOrdermaster();     
        promiseGet.then(function (pl) {
            $scope.OrderMastersDisp = pl.data          
        },
             function (errorPl) {               
             });
    }
    Hidetables()
    function Hidetables() {      
            $scope.isRowHidden = false;
    }
    $scope.get = function (Order) {     
        if (Order == null) {          
            return;
        }      
        if (Order.isRowHidden == true) {
            Order.isRowHidden = false;
            var promiseGet = AngularJs_WCFService.getOrderDetail(Order.Order_No);
            promiseGet.then(function (pl) {
                $scope.OrderDetailDisp = pl.data
            },
                 function (errorPl) {
                 });
        }
        else {
            Order.isRowHidden = true;
        }         
    }
});

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->Add Controller ->Select MVC 5 Controller – Empty -> Click Add

Image 20

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

Add View: Right click on Controller Index and click Add View.

Image 21

Name the View as “Index”.

In View Design your page and reference of angular.Js, Modules.js, Services.js and Controllers.js.

In Angular JS, we use {{ }} to bind or display the data.

Here, we can see first I create one table and for that table.

First, in table, I have used the data-ng-controller="AngularJs_WCFController" and here we can see data-ng-controller will be used to bound the data of 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. Same like this, we have created for the Inner Table. When the user clicks on Details Button, I will display the Order Details table.

HTML
<html data-ng-app="RESTClientModule">
@{
    ViewBag.Title = "SHANU AngularJs /  WCF and Master Detail Grid";
}

<body>
    <img src="~/Images/blank.gif" alt="" width="1" height="10" />
    <table width="99%" style=" border-bottom:3px solid #3273d5;">
        <tr>
            <td width=" 250">
        <table width="99%">
            <tr>
                <td>
                    Welcome Mr. {{'SHANU'}} .
                   </td>           
            </tr>
        </table>
        </td>
        <td class="style1" align="center">
            <h3>Order Master / Detail Grid using Angular JS and WCF in MVC :)</h3>         
        </td>
            <td align="right">
                <div ng-controller="AngularJs_WCFController">
                    Today Date is :
                    {{date | date:'yyyy-MM-dd'}}
                </div>
            </td>
        </tr>
    </table>
    <img src="~/Images/blank.gif" alt="" width="1" height="10" />   
    <table id="tblContainer" data-ng-controller="AngularJs_WCFController" 
     style='width: 99%;table-layout:fixed;'>
        <tr>
            <td>
                <table style=" background-color:#ECF3F4; border: solid 2px #3273d5; 
                       padding: 5px;width: 99%;table-layout:fixed;">
                    <tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;">
                       <th width="60"></th>
                        <th>Order No</th>
                        <th>Table ID</th>
                        <th>Notes</th>
                        <th>Order DATE</th>
                        <th>Waiter Name</th>
                        <th></th>
                    </tr>
                    <tbody data-ng-repeat="order in OrderMastersDisp">
                        <tr> 
                           <td width="60">
                           <input type="button" id="Detail" 
                           value="Detail" data-ng-click="get(order)" />

                            </td>
                            <td><span>{{order.Order_No}}</span></td>

                            <td><span>{{order.Table_ID}}</span></td>

                            <td><span>{{order.Description}}</span></td>

                            <td><span>{{order.Order_DATE}}</span></td>

                            <td><span>{{order.Waiter_Name}}</span></td>
                            <td></td>
                        </tr>
                        <tr id={{order.Order_No}} ng-hide="order.isRowHidden" 
                                                  ng-init="get(order)">
                            <td>  </td>
                            <td colspan="6">
                                <table style=" background-color:#ECF3F4; 
                                 border: solid 2px #3273d5; padding: 5px;
                                 width: 99%;table-layout:fixed;">
                                   <tr style="height: 30px; background-color:#336699 ; 
                                       color:#FFFFFF ;">
                                        <th>Order No</th>
                                        <th>Order Detail No</th>
                                        <th>Item Name</th>
                                        <th>Comments</th>
                                        <th>QTY</th>
                                        <th>Price</th>
                                   </tr>
                                    <tbody data-ng-repeat="detail in OrderDetailDisp">
                                        <tr>   
                                            <td><span>{{detail.Order_No}}</span></td>
                                            <td><span>{{detail.Order_Detail_No}}</span></td>
                                           <td><span>{{detail.Item_Name}}</span></td>
                                           <td><span>{{detail.Notes}}</span></td>
                                            <td><span>{{detail.QTY}}</span></td>
                                            <td><span>{{detail.Price}}</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
</body></html>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ShanuAngularScript/Modules.js"></script>
<script src="~/Scripts/ShanuAngularScript/Services.js"></script>
<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 table.

Image 22

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

Image 23

Supported Browsers: Chrome and Firefox

History

  • 28th May, 2015: Version1.0

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Team Leader
India India
Microsoft MVP | Code Project MVP | CSharp Corner MVP | Author | Blogger and always happy to Share what he knows to others. MyBlog

My Interview on Microsoft TechNet Wiki Ninja Link

Comments and Discussions

 
QuestionGetting un error Pin
Manish Kuk1-Dec-15 23:55
Manish Kuk1-Dec-15 23:55 
AnswerRe: Getting un error Pin
kollamparampil georgevarghese8-Apr-16 10:28
kollamparampil georgevarghese8-Apr-16 10:28 
GeneralPlease provide CRUD Operation Pin
gandhichintan8-Oct-15 1:56
professionalgandhichintan8-Oct-15 1:56 
GeneralRe: Please provide CRUD Operation Pin
syed shanu8-Oct-15 2:10
mvasyed shanu8-Oct-15 2:10 
GeneralRe: Please provide CRUD Operation Pin
gandhichintan8-Oct-15 19:58
professionalgandhichintan8-Oct-15 19:58 
GeneralRe: Please provide CRUD Operation Pin
Member 1170637212-Oct-15 3:18
Member 1170637212-Oct-15 3:18 
GeneralRe: Please provide CRUD Operation Pin
syed shanu12-Oct-15 19:18
mvasyed shanu12-Oct-15 19:18 
GeneralRe: Please provide CRUD Operation Pin
gandhichintan13-Oct-15 0:38
professionalgandhichintan13-Oct-15 0:38 
GeneralRe: Please provide CRUD Operation Pin
syed shanu2-Nov-15 15:30
mvasyed shanu2-Nov-15 15:30 
Hi,
The article is ready now you can check from this link.Hope this will help you.
MVC AngularJS Master/Detail CRUD, Filter And Sorting Using WEB API 2 With Stored Procedure[^]
GeneralRe: Please provide CRUD Operation Pin
gandhichintan2-Nov-15 20:54
professionalgandhichintan2-Nov-15 20:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.