使用WEB API 2和存储过程的MVC AngularJS主/明细 CRUD、筛选和排序
4.78/5 (76投票s)
在本文中，您将学习如何使用WEB API 2和存储过程实现MVC AngularJS主/明细 CRUD、筛选和排序。
引言
在我的一篇文章中，我解释了如何使用MVC和AngularJS创建主/明细 HTML网格。一些成员要求我写一篇关于主/明细 HTML网格的文章，其中包含主网格和明细网格的CRUD（插入、更新、选择和删除）功能。因此，我创建了一个简单的演示程序，具有以下功能。
本文将讲解
- 如何创建订单主表和订单明细表并插入示例记录
- 创建存储过程以执行订单主表和订单明细表的
插入/更新/选择和删除操作 - 创建实体框架并添加所有存储过程
- 为订单主表和订单明细表创建单独的WEB API，以便从AngularJS控制器执行所有存储过程
- 创建AngularJS控制器来执行所有业务逻辑，以显示主/明细 HTML网格
- 为订单主表和订单明细表添加排序/筛选功能
- 为每个子明细网格显示总行
- 从网格中添加/编辑/删除每个订单主表和订单明细
- 搜索订单主明细
必备组件
您还可以参考我之前关于使用 MVC 和 WCF Rest 服务进行 AngularJS 的文章
- MVC AngularJs 和 WCF REST 服务用于“读心术”问答游戏
- MVC、AngularJs 和 WCF REST 服务用于主从详细信息网格
- 使用 MVC 和 WCF REST 进行 AngularJs 过滤、排序和动画
- 使用 MVC 和 WCF REST 服务进行 AngularJs 购物车
- 使用 MVC 和 WCF REST 进行 AngularJs 动态菜单创建
与 Angular JS、MVC 和 WEB API 相关的先前文章。
- 使用 MVC、AngularJs 和 Web API 2 进行图像预览
- MVC、Angular JS 使用 WEB API 2 和存储过程进行 CRUD 操作
- 使用 MVC 和 AngularJS 进行动态项目调度
- MVC Web API 和 AngularJS 图像拼图游戏
- MVC Web API 和 AngularJS 游戏“你是天才”
Using the Code
1. 创建数据库和表
我们将创建一个用于主网格和明细网格数据绑定的订单主表和订单明细表。以下是创建数据库、表和示例文本插入查询的脚本。在SQL Server中运行此脚本。我使用的是SQL Server 2014。
use master
--create DataBase
-- 1) Check for the Database Exists .If the database exists, then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'OrderManagement' )
DROP DATABASE OrderManagement
GO
CREATE DATABASE OrderManagement
GO
USE OrderManagement
GO
-- Create OrderMasters Table
CREATE TABLE [dbo].[OrderMasters](
[Order_No] INT IDENTITY PRIMARY KEY,
[Table_ID] [varchar](20) NOT NULL,
[Description] [varchar](200) NOT NULL,
[Order_DATE] [datetime] NOT NULL,
[Waiter_Name] [varchar](20) NOT NULL
)
-- Insert OrderMasters sample data
INSERT INTO [OrderMasters]
([Table_ID] ,[Description],[Order_DATE],[Waiter_Name])
VALUES
('T1','Order for Table T1',GETDATE(),'SHANU' )
INSERT INTO [OrderMasters]
([Table_ID] ,[Description],[Order_DATE],[Waiter_Name])
VALUES
('T2','Order for Table T2',GETDATE(),'Afraz' )
INSERT INTO [OrderMasters]
([Table_ID] ,[Description],[Order_DATE],[Waiter_Name])
VALUES
('T3','Order for Table T3',GETDATE(),'Afreen')
CREATE TABLE [dbo].[OrderDetails](
[Order_Detail_No] INT IDENTITY PRIMARY KEY,
[Order_No] INT,
[Item_Name] [varchar](20) NOT NULL,
[Notes] [varchar](200) NOT NULL,
[QTY] INT NOT NULL,
[Price] INT NOT NULL
)
--Now let’s insert the 3 items for the above Order No 'Ord_001'.
INSERT INTO [OrderDetails]
( [Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
(1,'Ice Cream','Need very Cold',2 ,160)
INSERT INTO [OrderDetails]
([Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
(1,'Coffee','Hot and more Suger',1 ,80)
INSERT INTO [OrderDetails]
([Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
(1,'Burger','Spicy',3 ,140)
INSERT INTO [OrderDetails]
([Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
(2,'Pizza','More Chees and Large',1 ,350)
INSERT INTO [OrderDetails]
([Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
(2,'Cola','Need very Cold',3 ,50)
INSERT INTO [OrderDetails]
([Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
(3,'IDLY','Hot',3 ,40)
INSERT INTO [OrderDetails]
([Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
(3,'Thosa','Hot',3 ,50)
-- To Select and test Order Master and Details
Select * FROM OrderMasters
Select * From OrderDetails
创建表后，我们将创建一个存储过程来执行CRUD操作。
首先，我们创建一个用于订单主表的存储过程来执行CRUD操作。
-- 1) Stored procedure to Select OrderMaster
-- Author : Shanu
-- Create date : 2015-10-26
-- Description : Order Master
-- Tables used : OrderMaster
-- Modifier : Shanu
-- Modify date : 2015-10-26
-- =============================================
-- exec USP_OrderMaster_Select '',''
-- =============================================
Create PROCEDURE [dbo].[USP_OrderMaster_Select]
(
@OrderNo VARCHAR(100) = '',
@Table_ID VARCHAR(100) = ''
)
AS
BEGIN
Select [Order_No],
[Table_ID],
[Description],
[Order_DATE],
[Waiter_Name]
FROM
OrderMasters
WHERE
Order_No like @OrderNo +'%'
AND Table_ID like @Table_ID +'%'
ORDER BY
Table_ID
END
-- 2) Stored procedure to insert OrderMaster
-- Author : Shanu
-- Create date : 2015-10-26
-- Description : Order Master
-- Tables used : OrderMaster
-- Modifier : Shanu
-- Modify date : 2015-10-26
-- =============================================
-- exec USP_OrderMaster_Insert 'T4','Table 4','SHANU'
-- =============================================
Create PROCEDURE [dbo].[USP_OrderMaster_Insert]
(
@Table_ID VARCHAR(100) = '',
@Description VARCHAR(100) = '',
@Waiter_Name VARCHAR(20) = ''
)
AS
BEGIN
IF NOT EXISTS (SELECT Table_ID FROM OrderMasters WHERE Table_ID=@Table_ID)
BEGIN
INSERT INTO [OrderMasters]
([Table_ID] ,[Description],[Order_DATE],[Waiter_Name])
VALUES
(@Table_ID,@Description,GETDATE(),@Waiter_Name )
Select 'Inserted' as results
END
ELSE
BEGIN
Select 'Exists' as results
END
END
-- 3) Stored procedure to Update OrderMaster
-- Author : Shanu
-- Create date : 2015-10-26
-- Description : Order Master
-- Tables used : OrderMaster
-- Modifier : Shanu
-- Modify date : 2015-10-26
-- =============================================
-- exec USP_OrderMaster_Update 4,'T4','Table 4 wer','SHANU'
-- =============================================
CREATE PROCEDURE [dbo].[USP_OrderMaster_Update]
( @OrderNo Int=0,
@Table_ID VARCHAR(100) = '',
@Description VARCHAR(100) = '',
@Waiter_Name VARCHAR(20) = ''
)
AS
BEGIN
IF NOT EXISTS (SELECT Table_ID FROM OrderMasters _
WHERE Order_No!=@OrderNo AND Table_ID=@Table_ID)
BEGIN
UPDATE OrderMasters
SET [Table_ID]=@Table_ID ,
[Description]=@Description,
[Order_DATE]=GETDATE(),
[Waiter_Name]=@Waiter_Name
WHERE
Order_No=@OrderNo
Select 'updated' as results
END
ELSE
BEGIN
Select 'Exists' as results
END
END
-- 4) Stored procedure to Delete OrderMaster
-- Author : Shanu
-- Create date : 2015-10-26
-- Description : Order Master
-- Tables used : OrderMaster
-- Modifier : Shanu
-- Modify date : 2015-10-26
-- =============================================
-- exec USP_OrderMaster_Delete '3'
-- =============================================
CREATE PROCEDURE [dbo].[USP_OrderMaster_Delete]
( @OrderNo Int=0 )
AS
BEGIN
DELETE FROM OrderMasters WHERE Order_No=@OrderNo
DELETE from OrderDetails WHERE Order_No=@OrderNo
Select 'Deleted' as results
END
接下来，我们为订单明细表创建存储过程来执行CRUD操作。
USE OrderManagement
GO
-- 1) Stored procedure to Select OrderDetails
-- Author : Shanu
-- Create date : 2015-10-26
-- Description : OrderDetails
-- Tables used : OrderDetails
-- Modifier : Shanu
-- Modify date : 2015-10-26
-- =============================================
-- exec USP_OrderDetail_Select '1'
-- =============================================
Create PROCEDURE [dbo].[USP_OrderDetail_Select]
(
@OrderNo VARCHAR(100) = ''
)
AS
BEGIN
Select Order_Detail_No,
[Order_No],
[Item_Name],
[Notes],
[QTY],
[Price]
FROM
OrderDetails
WHERE
Order_No like @OrderNo +'%'
ORDER BY
Item_Name
END
-- 2) Stored procedure to insert OrderDetail
-- Author : Shanu
-- Create date : 2015-10-26
-- Description : Order Master
-- Tables used : OrderDetail
-- Modifier : Shanu
-- Modify date : 2015-10-26
-- =============================================
-- exec USP_OrderDetail_Insert 4,'cadburys','cadburys Chocolate','50',50
-- =============================================
Create PROCEDURE [dbo].[USP_OrderDetail_Insert]
(
@Order_No VARCHAR(10),
@Item_Name VARCHAR(100) = '',
@Notes VARCHAR(100) = '',
@QTY VARCHAR(20) = '',
@Price VARCHAR(20) = ''
)
AS
BEGIN
IF NOT EXISTS (SELECT Item_name FROM OrderDetails _
WHERE Order_No=@Order_No AND Item_Name=@Item_Name)
BEGIN
INSERT INTO [OrderDetails]
( [Order_No],[Item_Name],[Notes],[QTY] ,[Price])
VALUES
( @Order_No,@Item_Name,@Notes,@QTY ,@Price )
Select 'Inserted' as results
END
ELSE
BEGIN
Select 'Exists' as results
END
END
-- 3) Stored procedure to Update OrderDetail
-- Author : Shanu
-- Create date : 2015-10-26
-- Description : Order Master
-- Tables used : OrderDetail
-- Modifier : Shanu
-- Modify date : 2015-10-26
-- =============================================
-- exec USP_OrderDetail_Update 8,4,'Cadburys','cadburys Chocolate','50',50
-- =============================================
Create PROCEDURE [dbo].[USP_OrderDetail_Update]
( @Order_Detail_No Int=0,
@Order_No VARCHAR(10),
@Item_Name VARCHAR(100) = '',
@Notes VARCHAR(100) = '',
@QTY VARCHAR(20) = '',
@Price VARCHAR(20) = ''
)
AS
BEGIN
IF NOT EXISTS (SELECT Item_name FROM OrderDetails _
WHERE Order_Detail_No!=@Order_Detail_No AND Item_Name=@Item_Name)
BEGIN
UPDATE OrderDetails
SET [Item_Name]=@Item_Name,
[Notes]=@Notes,
[QTY] =@QTY,
[Price]=@Price
WHERE
Order_Detail_No=@Order_Detail_No
AND Order_No=@Order_No
Select 'updated' as results
END
ELSE
BEGIN
Select 'Exists' as results
END
END
-- 4) Stored procedure to Delete OrderDetail
-- Author : Shanu
-- Create date : 2015-10-26
-- Description : Order Master
-- Tables used : OrderDetail
-- Modifier : Shanu
-- Modify date : 2015-10-26
-- =============================================
-- exec USP_OrderDetail_Delete '8'
-- ============================================
CREATE PROCEDURE [dbo].[USP_OrderDetail_Delete]
( @Order_Detail_No Int=0 )
AS
BEGIN
DELETE from OrderDetails WHERE _
Order_Detail_No=@Order_Detail_No
Select 'Deleted' as results
END
2. 在 Visual Studio 2015 中创建您的 MVC Web 应用程序
安装 Visual Studio 2015 后，单击开始，然后单击程序，然后选择Visual Studio 2015 - 单击Visual Studio 2015。
点击新建，然后点击项目，选择Web，然后点击ASP.NET Web应用程序。选择您的项目位置并输入您的Web应用程序名称。
点击新建，然后点击项目，选择Web，然后点击ASP.NET Web应用程序。选择您的项目位置并输入您的Web应用程序名称。
选择MVC ，然后在为...添加文件夹和核心引用 中选择Web API，然后点击确定。
使用 ADO.NET 实体数据模型添加数据库
右键单击我们的项目，然后单击添加，然后单击新建项。
选择数据，然后选择ADO.NET实体数据模型 ，为我们的EF命名，然后点击添加。
选择“数据库中的EF设计器”，然后点击下一步 >。
在此，单击新建连接并提供您的 SQL Server - 服务器名称并连接到您的数据库。
在这里，我们可以看到我已经输入了我的SQL服务器名称、ID和密码，连接成功后，我选择了OrderManagement作为数据库，因为我们已经使用我的SQL脚本创建了数据库。
单击下一步，选择需要使用的表和所有存储过程，然后单击完成。
在这里，我们可以看到我们已经创建了OrderDetailModel。
创建实体后，下一步是向我们的控制器添加 Web API 并编写 选择/插入/更新和删除的函数。
添加 Web API Controller 的过程
右键单击Controllers文件夹，单击添加，然后单击Controller。
选择控制器，然后添加一个空的Web API 2控制器。为Web API控制器命名，然后点击确定。在此演示项目中，我为订单主表和订单明细表创建了两个不同的控制器。
众所周知，Web API 是构建浏览器和移动设备 HTTP 服务的简单易行的方法。
Web API 具有以下四种方法：Get/Post/Put 和 Delete，其中
Get用于请求数据（Select）Post用于创建数据（Insert）Put用于更新数据Delete用于删除数据
Get 方法
在我们的示例中，由于我只使用存储过程，因此我只使用了Get方法。我们需要为我们的实体创建一个对象，并编写Get方法来执行选择/插入/更新和删除操作。
查询操作
我们使用get方法通过实体对象获取OrderMasters表的所有详细信息，并将结果返回为IEnumerable。我们在AngularJs中使用此方法，并通过AngularJs控制器将结果显示在MVC页面上。使用Ng-Repeat，我们可以绑定详细信息。
在这里，我们可以看到在get方法中，我将搜索参数传递给了USP_OrderMaster_Select存储过程。在存储过程中，如果搜索参数为空，我使用“%”来返回所有记录。
OrderManagementEntities objapi = new OrderManagementEntities();
// to Search Student Details and display the result
[HttpGet]
public IEnumerable<USP_OrderMaster_Select_Result> Get(string OrderNO, string TableID)
{
if (OrderNO == null)
OrderNO = "";
if (TableID == null)
TableID = "";
return objapi.USP_OrderMaster_Select(OrderNO, TableID).AsEnumerable();
}
在我的示例中，我使用了get方法来执行选择/插入/更新和删除操作，因为在我的存储过程中，在插入/更新和删除之后，我从数据库返回了消息。
插入操作
与select类似，我将所有参数传递给了insert存储过程。此insert方法将返回数据库的结果，表示记录已插入或未插入。我将从AngularJs控制器获取结果并在MVC应用程序中显示。
// To Insert new Student Details
[HttpGet]
public IEnumerable<string> insertOrderMaster
(string Table_ID,string Description,string Waiter_Name)
{
return objapi.USP_OrderMaster_Insert( Table_ID, Description,
Waiter_Name).AsEnumerable();
}
更新操作
与Insert类似，我将所有参数传递给了insert存储过程。此Update方法将返回数据库的结果，表示记录已更新或未更新。我将OrderNo传递给update存储过程，以更新OrderNo对应的记录。我将从AngularJs控制器获取结果并在MVC应用程序中显示。
//to Update Student Details
[HttpGet]
public IEnumerable<string> updateOrderMaster(int OrderNo,
string Table_ID, string Description, string Waiter_Name)
{
return objapi.USP_OrderMaster_Update(OrderNo, Table_ID,
Description, Waiter_Name).AsEnumerable();
}
删除操作
与update类似，我将OrderNo传递给存储过程以删除记录。
//to Delete Student Details
[HttpGet]
public IEnumerable<string> deleteOrderMaster(int OrderNo)
{
return objapi.USP_OrderMaster_Delete(OrderNo).AsEnumerable();
}
与OrderMasterController类似，我为Detail表的CRUD操作创建了另一个名为“DetailAPI”的控制器。以下是detailController的完整代码。
public class DetailAPIController : ApiController
{
OrderManagementEntities objapi = new OrderManagementEntities();
// to Search Student Details and display the result
[HttpGet]
public IEnumerable<USP_OrderDetail_Select_Result> Get(string OrderNO)
{
if (OrderNO == null)
OrderNO = "0";
return objapi.USP_OrderDetail_Select(OrderNO).AsEnumerable();
}
// To Insert new Student Details
[HttpGet]
public IEnumerable<string> insertOrderDetail
(string Order_No, string Item_Name, string Notes, string QTY, string Price)
{
return objapi.USP_OrderDetail_Insert
(Order_No, Item_Name, Notes, QTY, Price).AsEnumerable();
}
//to Update Student Details
[HttpGet]
public IEnumerable<string> updateOrderDetail(int Order_Detail_No,
string Order_No, string Item_Name, string Notes, string QTY, string Price)
{
return objapi.USP_OrderDetail_Update(Order_Detail_No, Order_No, Item_Name,
Notes, QTY, Price).AsEnumerable();
}
//to Delete Student Details
[HttpGet]
public IEnumerable<string> deleteOrderDetail(int Order_Detail_No)
{
return objapi.USP_OrderDetail_Delete(Order_Detail_No).AsEnumerable();
}
}
现在我们已经创建了Web API控制器类。下一步是创建我们的AngularJs模块和控制器。让我们看看如何创建AngularJs控制器。在Visual Studio 2015中，添加AngularJs控制器要容易得多。让我们一步一步地看看如何创建和编写AngularJs控制器。
创建 AngularJs Controller
首先，在Script文件夹内创建一个文件夹，我将其命名为“MyAngular”。
现在将您的 Angular Controller 添加到该文件夹中。
右键单击MyAngular文件夹，点击添加，然后点击新建项。选择Web，然后选择AngularJs控制器，并为控制器提供一个名称。我将我的AngularJs控制器命名为“Controller.js”。
创建AngularJs控制器后，我们可以看到默认情况下，控制器将包含带有默认模块定义等代码。
我已经更改了前面的代码，如下所示添加了 Module 和 controller。
如果 AngularJs 包丢失，请将该包添加到您的项目中。
右键单击您的 MVC 项目，然后单击管理 NuGet 程序包。搜索 AngularJs，然后单击安装。
创建 AngularJs 脚本文件的过程
Modules.js：在这里，我们将添加AngularJs JavaScript的引用，并创建一个名为“RESTClientModule”的Angular模块。
// <reference path="../angular.js" />
/// <reference path="../angular.min.js" />
/// <reference path="../angular-animate.js" />
/// <reference path="../angular-animate.min.js" />
var app;
(function () {
app = angular.module("RESTClientModule", ['ngAnimate']);
})();
控制器：在AngularJs控制器中，我完成了所有业务逻辑，并将数据从Web API返回到我们的MVC HTML页面。
1. 变量声明
首先，我声明了所有需要使用的局部变量。
app.controller("AngularJs_studentsController",
function ($scope, $timeout, $rootScope, $window, $http) {
$scope.date = new Date();
$scope.MyName = "shanu";
//For Order Master Search
$scope.OrderNos = "";
$scope.Table_IDs = "";
//This variable will be used for Insert/Edit/Delete OrderMasters Table.
$scope.OrderNo = 0;
$scope.Table_ID = "";
$scope.Description = "";
$scope.Waiter_Name = "";
//Show Hide OrderMaster Table
$scope.showOrderMasterAdd = true;
$scope.addEditOrderMaster = false;
$scope.OrderMasterList = true;
$scope.showItem = true;
//This variable will be used for Insert/Edit/Delete OrderDetail Table.
$scope.Order_Detail_No = 0;
$scope.Item_Name ="";
$scope.Notes = "";
$scope.QTY = "1";
$scope.Price = "0";
$scope.addEditOrderDetail = false;
$scope.expandImg = "expand.png";
2. 方法
Select 方法
在select方法中，我使用$http.get从Web API获取详细信息。在get方法中，我将提供我们的API控制器名称和方法来获取详细信息。在这里，我们可以看到我通过
{ params: { OrderNO: OrderNos, TableID: Table_IDs }
最终结果将使用 data-ng-repeat 显示在 MVC HTML 页面上。
$http.get('/api/OrderAPI/', { params:
{ OrderNO: OrderNos, TableID: Table_IDs } }).success(function (data) {
$scope.OrderMasters = data;
$scope.showOrderMasterAdd = true;
$scope.addEditOrderMaster = false;
$scope.OrderMasterList = true;
$scope.showItem = true;
$scope.addEditOrderDetail = false;
if ($scope.OrderMasters.length > 0) {
}
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
}
搜索按钮点击
在搜索按钮点击时，我将调用SearchMethod来绑定结果。在这里，我们可以看到在搜索文本框中我使用了ng-model="OrderNos"。使用AngularJs控制器中的ng-model，我们可以获取TextBox的输入值，或者我们可以设置TextBox的值。
<input type="text" name="txtOrderNos" ng-model="OrderNos" value="" />
<input type="text" name="txtTable_IDs"
ng-model="Table_IDs" /><input type="submit" value="Search"
style="background-color:#336699;color:#FFFFFF" ng-click="searchOrderMasters()" />
//Search
$scope.searchOrderMasters = function () {
selectOrderMasters($scope.OrderNos, $scope.Table_IDs);
}
插入新的订单主表
在“添加新学生详细信息”按钮点击时，我将使StudentAdd表的详细信息可见，用户可以在其中输入新的学生信息。对于新学生，我将学生ID设置为0。在新学生保存按钮点击时，我将调用save方法。
// New Student Add Details
$scope.showOrderMasters = function () {
cleardetails();
$scope.addEditOrderDetail = false;
$scope.showOrderMasterAdd = true;
$scope.addEditOrderMaster = true;
$scope.OrderMasterList = true;
$scope.showItem = true;
}
在Save方法中，我将检查OrderNo。如果OrderNo是“0”，则将插入新的订单主详细信息。在这里，我将调用Insert Web API方法，如果OrderNo大于0，则表示要更新Order记录，我将调用Update Web API方法。
我将所有输入参数传递给Insert Web API方法。在我的存储过程中，我将检查Order的表名是否已存在。如果数据库中不存在表名，则插入记录并返回成功消息“inserted”；如果表名已存在，则返回消息“Exists”。
//Save OrderMaster
$scope.saveDetails = function () {
$scope.IsFormSubmitted1 = true;
if ($scope.IsFormValid1) {
if ($scope.OrderNo == 0) {
$http.get('/api/OrderAPI/insertOrderMaster/',
{ params: { Table_ID: $scope.Table_ID, Description: $scope.Description,
Waiter_Name: $scope.Waiter_Name } }).success(function (data) {
$scope.orderMasterInserted = data;
alert($scope.orderMasterInserted);
cleardetails();
selectOrderMasters('', '');
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
}
else { // to update to the student details
$http.get('/api/OrderAPI/updateOrderMaster/',
{ params: { OrderNo: $scope.OrderNo, Table_ID: $scope.Table_ID,
Description: $scope.Description, Waiter_Name: $scope.Waiter_Name } }).
success(function (data) {
$scope.orderMasterUpdated = data;
alert($scope.orderMasterUpdated);
cleardetails();
selectOrderMasters('', '');
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
}
}
else {
$scope.Message1 = "All the fields are required.";
}
}
更新订单主表
与Insert相同，我将显示更新的详细信息供用户编辑，然后保存。在Edit方法中，我将获取用户点击Edit图标的行的所有详细信息，并将所有结果设置到相应的TextBox中。在Save按钮点击时，我将调用save方法将所有更改保存到数据库，与Insert类似。
//Edit Order Details
$scope.OrderMasterEdit = function OrderMasterEdit
(OrderNoss, Table_IDss, Descriptionss, Waiter_Namess) {
cleardetails();
$scope.OrderNo = OrderNoss;
$scope.Table_ID = Table_IDss
$scope.Description = Descriptionss;
$scope.Waiter_Name = Waiter_Namess;
$scope.addEditOrderDetail = false;
$scope.showOrderMasterAdd = true;
$scope.addEditOrderMaster = true;
$scope.OrderMasterList = true;
$scope.showItem = true;
}
删除订单主详细信息
在Delete按钮点击时，我将向用户显示一个确认消息，询问是否删除Order。如果用户点击确定按钮，我将把OrderNo传递给Web API的delete方法，以从数据库中删除该记录。
//Delete Order master Detail
$scope.OrderMasterDelete = function OrderMasterDelete(OrderNoss) {
cleardetails();
$scope.OrderNo = OrderNoss;
var delConfirm = confirm("Are you sure you want to delete the Order Master " +
OrderNoss + " ?");
if (delConfirm == true) {
// alert($scope.OrderNo);
$http.get('/api/OrderAPI/deleteOrderMaster/',
{ params: { OrderNo: $scope.OrderNo } }).success(function (data) {
// alert(data);
$scope.orderMasterDeleted= data;
alert($scope.orderMasterDeleted);
cleardetails();
selectOrderMasters('', '');
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
}
}
筛选和排序订单主表
可以使用管道符号在ng-repeat中添加筛选器。
在这里，我们可以看到使用ng-repeat，我们添加了筛选器，并且为筛选器提供了TextBox的模型ID。当用户在TextBox中按键时，筛选器将应用于循环，并显示相应的值，如下所示。
</tr>
<tr style="height: 30px; background-color:#336699 ;
color:#FFFFFF ;border: solid 1px #659EC7;">
<td width="100"
align="center" colspan="3">
<img src="~/Images/filter.png" /> Filter By
</td>
<td width="180" align="center"
style="border: solid 1px #FFFFFF; padding: 5px;table-layout:fixed;">
<input ng-model="search.Order_No"
placeholder="Order..." width="90">
</td>
<td width="180" align="center" style="border:
solid 1px #FFFFFF; padding: 5px;table-layout:fixed;">
<input ng-model="search.Table_ID"
placeholder="Table...">
</td>
<td width="200" align="center" style="border:
solid 1px #FFFFFF; padding: 5px;table-layout:fixed;">
</td>
<td width="200" align="center" style="border:
solid 1px #FFFFFF; padding: 5px;table-layout:fixed;">
</td>
<td width="200" align="center" style="border:
solid 1px #FFFFFF; padding: 5px;table-layout:fixed;">
<input ng-model="search.Waiter_Name"
placeholder="Name...">
</td>
</tr>
排序订单主表
与筛选器相同，我们使用管道符号在ng-repeat中添加字段和反向值来排序。
例如，我们可以使用管道符号将OrderBy添加到ng-repeat中，让我们考虑前面的示例。
在ng-repeat中，我们将使用筛选器进行搜索，这将筛选我们输入的所有textbox值，并产生筛选后的结果。
<tbody data-ng-repeat="stds in OrderMasters | filter:search | orderBy:predicate:reverse">
显示订单明细
在这里，我们可以看到如何通过点击Detail按钮在订单主表中显示订单明细网格。
在点击每个订单主表行时，我将检查活动行。然后在点击detail按钮时，我将调用showNewOrderDetails()方法来显示详细信息。
<tr ng-show="activeRow==stds.Order_No" >
在detail按钮点击时，我调用
<input type="button" value="Add Detail"
style="background-color:#439633;color:#FFFFFF;
font-size:large;width:100px;border-color:#a2aabe;
border-style:dashed;border-width:2px;" ng-click="showNewOrderDetails()" />
// New Detail Add
$scope.showNewOrderDetails = function () {
clearOrderdetails();
$scope.showOrderMasterAdd = false;
$scope.addEditOrderMaster = false;
$scope.OrderMasterList = true;
$scope.showItem = true;
$scope.addEditOrderDetail = true;
}
对于订单明细的CRUD、排序和筛选，我们使用了与Order主表相同的逻辑。在这里，我们将看到
订单明细添加
订单明细编辑
订单明细删除
订单明细筛选和排序
关注点
本文的主要目的是使用Angular JS WEB API 2和存储过程创建一个简单的基于Web的MVC主/明细 CRUD、筛选和排序操作。
支持的浏览器：Chrome 和 Firefox
历史
- 2015年11月2日：初始版本