MVC Angular JS和WCF Rest服务用于主/细节HTML网格

介绍您还可以查看我以前的文章，这些文章是关于使用MVC和WCF REST Service的AngularJs。 http://www.codeproject.com/articles/893821/mvc-angularjs-and-wcf-rest-service-for-mind-reader http://www.codeproject.com/articles/988680/angular-js-filter-sorting-and-animation-using-mvc http://www.codeproject.com/articles/988648/angular-js-shopping-cart-using-mvc-and-wcf-rest|0>>>> 在本文中，我们将使用Angular JS和WCF创建一个主细节网格。在这篇文章中我们将看到。 1),如何创建WCF Rest服务并从数据库中检索数据。 2),如何安装Angular JS包到我们的MVC应用程序。 3),如何创建Angular JS应用程序来创建我们自己的主细节网格。 4),如何在Angular JS中使用WCS服务，并将主数据和细节数据绑定到MVC视图中。注意:前提→Visual Studio 2013(如果你还没有Visual Studio 2013，你可以从微软网站http://www.visualstudio.com/en-us/products/visual-studio-community-vs下载)。这里我们可以看到一些基本的和参考的链接 Windows Communication Foundation (WCF): WCF是用于构建面向服务的应用程序的框架。面向服务的应用——使用协议，服务可以在网络上共享和使用。例如，现在我们正在做一个项目，我们需要创建一些通用的数据库功能，这些功能需要在多个项目中使用，项目在不同的地方，并通过互联网连接。在这种情况下，我们可以创建一个WCF服务，并且可以在WCF服务类中编写所有公共数据库功能。我们可以在IIS中部署WCF，并使用应用程序中的URL来执行数据库功能。在代码部分，让我们看看如何创建WCF REST服务，并在Angular JS应用程序中使用它。 , 如果你有兴趣阅读更多关于WCF的细节，请通过这个链接。 https://msdn.microsoft.com/en-in/library/dd203052.aspx 角JS 我们可能知道什么是MVVM(模型、视图、视图模型)和MVC(模型、视图和控制器)。Angular JS是一个纯基于HTML CSS和JavaScript的JavaScript框架。类似MVC和MVVM模式Angular JS MVW模式(模型视图等等) 在我们的示例中，我使用了模型、视图和服务。在代码部分，让我们看看如何在MVC应用程序中安装和创建Angular JS。如果你有兴趣阅读更多关于Angular JS的细节，请点击这个链接。 http://www.w3schools.com/angular/default.asp 使用的代码创建数据库和表:我们将创建一个订单主表和订单详细信息表，用于主/详细网格数据绑定。下面是创建数据库、表和示例插入查询的脚本。在你的SQL服务器上运行这个脚本，我用的是SQL Server 2008 R2。隐藏,收缩,复制Code

--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)创建WCF REST服务: Open Visual Studio 2013 ->选择文件-新建-项目-选择WCF服务应用程序->选择您的项目路径并命名您的WCF服务，然后单击ok。一旦我们创建了WCF服务，我们就可以看到“IService”。CS”和“Service1。解决方案资源管理器中的svc "，如下所示。 IService.CS——比;在“IService。“我们可以看到3个合同默认 (ServiceContract)——比;描述服务可用的方法或任何操作。服务契约是一个接口，可以使用操作契约属性在服务接口内部声明方法。 (OperationContract)→类似于web服务[WEBMETHOD] (DataContract)→描述客户端和服务之间的数据交换。 (ServiceContract) 下面的代码将为所有IService.CS文件自动创建。我们可以在这里修改和编写我们自己的代码。隐藏,收缩,复制Code

   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; }
       }
   }

, 合同数据在我们的示例中，我们需要从数据库中获得订单主目录和订单详细信息，因此我创建了两个数据契约“OrderMasterDataContract”和“OrderDetailDataContract” 在这里，我们可以看到我们已经将所有表列名声明为数据成员。隐藏,收缩,复制Code

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; }
        }
    }

服务合同在操作契约中，我们可以看到“WebInvoke”和“WebGet”，这是在REST Serivce中从数据库中检索数据。 RequestFormat = WebMessageFormat.Json, ,,,,,,,,,ResponseFormat = WebMessageFormat.Json, 这里我们可以看到请求和响应格式，这里我使用了Json格式。 JavaScript对象表示法是一种轻量级数据交换格式 UriTemplate——比;是我们的方法名，这里我们的方法返回类型是List。这里我将3个方法声明为“GetOrderMaster”、“SearchOrderMaster”和“OrderDetails”。在“OrderDetails”方法中，Order_No参数用于根据订单号获取订单细节过滤器。隐藏,收缩,复制Code

[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→完整的源代码隐藏,收缩,复制Code

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; }
        }
    }
}

使用ADO添加数据库。NET实体数据模型右击你的WCF项目并选择添加新项目->选择ADO。NET实体数据模型，然后单击添加。从数据库中选择EF Designer并单击next。 ; 单击新连接在这里，我们可以选择我们的数据库服务器名称，并输入您的DB服务器SQL服务器身份验证用户ID和密码。我们已经将数据库创建为“OrderManagement”，因此可以选择数据库并单击ok。单击next并选择需要使用的表。在我们的示例中，我们需要使用“OrderMasters”和“orderDetails”。选择这两个表并单击finish。现在我们可以看到，我们已经创建了OrderManagementModel。 Service1.SVC 在“Service.SVC。CS“实现了IService接口，覆盖并定义了操作契约的所有方法。例如，在这里我们可以看到，我在Service1类中实现了IService1，为我们的实体模型创建了对象，在GetOrderMaster中使用LINQ查询，我从OrderMasters表中选择了数据，结果被添加到列表中。隐藏,收缩,复制Code

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。-完整的源代码隐藏,收缩,复制Code

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;
        }
    }
}

. config: 在WCF项目中“Web.Config” 改变 1) Change <add binding="basicHttpsBinding" scheme="https" />add binding="webHttpBinding" scheme="http" /> 2)代替行为来隐藏,复制Code

<endpointBehaviors>
        <behavior>
          <webHttphelpEnabled="True"/>
        </behavior>
      </endpointBehaviors>
    </behaviors>

, 运行WCF服务:->现在我们已经创建了WCF Rest服务，让我们运行并测试我们的服务。在我们的服务URL中，我们可以添加我们的方法名，我们可以看到来自数据库的JSON结果数据。现在我们已经完成了WCF，现在是时候创建我们的MVC Angular JS应用程序了。我们可以向现有的项目中添加新的项目，并创建新的MVC web应用程序，如下所示。右键单击您的解决方案，并单击添加新项目->输入项目名称并单击OK。选择MVC并单击ok 现在我们已经创建了MVC应用程序，现在是时候添加我们的WCF服务并将Angular JS包安装到我们的解决方案中了。添加WCF服务:右键单击MVC解决方案，然后单击添加->单击服务引用。输入您的WCF URL并单击GO .这里我的WCF URL是http://localhost:2505/Service1.svc 添加您的名字并单击ok。现在我们已经成功地将WCF服务添加到我们的MVC应用程序中安装Angular JS包的步骤右键单击您的MVC项目并单击->NuGet包管理选择在线搜索Angular JS。选择AngularJs并单击Install。现在我们已经在MVC项目中安装了AngularJS包。现在让我们创建Angular Js Modules.js Controllers.js Services.js 创建Angular Js脚本文件的步骤: 右键单击Script文件夹，创建你自己的文件夹来创建Angular Js模型/控制器和服务JavaScript。在脚本文件夹中添加三个JavaScript文件并命名为模块。js，控制器。js和服务，js如下。 js:这里我们添加了对Angular.js javascript的引用，并创建了一个名为“RESTClientModule”的Angular模块。隐藏,复制Code

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

服务。这里我们添加了对Angular.js JavaScript和模块.js的引用。这里我们给我们的服务命名，并在controller .js中使用这个名称。这里，对于Angular服务，我将其命名为“AngularJs_WCFService”。您可以提供自己的名称，但在control .js中更改名称时要小心。这里我们可以看到方法，因为我已经传递了我们的webservice的URL。隐藏,复制Code

/// <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);
    }
});

控制器。js:这里我们添加了Angular.js JavaScript和我们的Module.js和Services.js的引用。服务也一样。对于控制器，我将其命名为“AngularJs_WCFController”。首先，我获取当前数据并使用$scope.date存储日期。我创造了一种方法通过GetOrderMasters()和使用服务模块，我获得了生成的订单主表，并将结果绑定到“$scope”。OrderMastersDisp = pl.data”。就像这样，我们创建了所有剩下的方法。隐藏,收缩,复制Code

/// <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;
        }         
    }
});

现在我们已经创建了Angular Js模块/控制器和服务。那么接下来是什么呢? 创建MVC控件和视图来显示结果。添加控制器: 右键单击Controllers->Add Controller ->选择MVC 5 Controller -Empty ->单击Add 更改控制器名称，这里我将名称指定为“OrderManagementController”，然后单击ok。添加视图:右键单击控制器索引，然后单击添加视图。将视图命名为“索引”。在视图中设计你的页面和参考的角度。js，模块。js，服务。js和控制器。js。在Angular JS中，我们使用{{}}来绑定或显示数据。 , 这里我们可以看到，首先我创建了一个表格。首先在表中我使用了data-ng-controller="AngularJs_WCFController"，在这里我们可以看到data-ng-controller将被用于绑定数据。的控制器ller输出html表。使用<tbody data-ng-repeat="detail in OrderDetailDisp">我们可以使用<td> span>{{order.Order_No}}</span></td>绑定表中的所有数据。我们已经为内部表创建了同样的内容。当用户单击Details按钮时，我将显示订单详细信息表。隐藏,收缩,复制Code

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

<body>
    <imgsrc="~/Images/blank.gif"alt=""width="1"height="10"/>
    <tablewidth="99%"style=" border-bottom:3px solid #3273d5;">
        <tr>
            <tdwidth=" 250">
        <tablewidth="99%">
            <tr>
                <td>
                    Welcome Mr. {{'SHANU'}} .
                   </td>           
            </tr>
        </table>
        </td>
        <tdclass="style1"align="center">
            <h3>Order Master / Detail Grid using Angular JS and WCF in MVC :)</h3>         
        </td>
            <tdalign="right">
                <divng-controller="AngularJs_WCFController">
                    Today Date is :
                    {{date | date:'yyyy-MM-dd'}}
                </div>
            </td>
        </tr>
    </table>
    <imgsrc="~/Images/blank.gif"alt=""width="1"height="10"/>   
    <tableid="tblContainer"data-ng-controller="AngularJs_WCFController"style=' 99%;table-layout:fixed;'>
        <tr>
            <td>
                <tablestyle=" background-color:#ECF3F4; border: solid 2px #3273d5; padding: 5px; 99%;table-layout:fixed;">
                    <trstyle="height: 30px; background-color:#336699 ; color:#FFFFFF ;">
                       <thwidth="60"></th>
                        <th>Order No</th>
                        <th>Table ID</th>
                        <th>Notes</th>
                        <th>Order DATE</th>
                        <th>Waiter Name</th>
                        <th></th>
                    </tr>
                    <tbodydata-ng-repeat="order in OrderMastersDisp">
                        <tr> 
                           <tdwidth="60">
<inputtype="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>
                        <trid={{order.Order_No}} ng-hide="order.isRowHidden"ng-init="get(order)">
                            <td>  </td>
                            <tdcolspan="6">
                                <tablestyle=" background-color:#ECF3F4; border: solid 2px #3273d5; padding: 5px; 99%;table-layout:fixed;">
                                   <trstyle="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>
                                    <tbodydata-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>
<scriptsrc="~/Scripts/angular.js"></script>
<scriptsrc="~/Scripts/ShanuAngularScript/Modules.js"></script>
<scriptsrc="~/Scripts/ShanuAngularScript/Services.js"></script>
<scriptsrc="~/Scripts/ShanuAngularScript/Controllers.js"></script>

运行你的程序在这里我们可以看到，当我运行这个程序时，首先在表中显示了订单主记录。当用户点击Detail按钮时，我将在下一行显示订单的详细信息。支持浏览器:Chrome和Firefox。历史 Version1.0 - 2015-05-28 本文转载于：http://www.diyabc.com/frontweb/news17325.html

相关阅读:
五分钟搭建起一个包含CRUD功能的JqGrid表格
 TDD学习笔记【六】一Unit Test
CQRS
开源一个vue2的tree组件
 权限管理[Linux]
文件管理[Linux]
查看文本[Linux]
常用命令[Linux]
文件管理[Linux]
状态机工作流
原文地址：https://www.cnblogs.com/Dincat/p/13494099.html