使用 WEB API 2 和存储过程实现 MVC AngularJS 主/明细 CRUD、筛选和排序
4.78/5 (76投票s)
在本文中，您将学习如何使用 WEB API 2 和存储过程实现 MVC AngularJS 主/明细 CRUD、筛选和排序。
引言
在我的一篇文章中，我解释了如何使用 MVC 和 AngularJS 创建主/明细 HTML 网格。一些成员要求我写一篇关于主/明细 HTML 网格的文章，该网格支持主网格和明细网格的 CRUD（插入、更新、选择和删除）。因此，我在这里创建了一个简单的演示程序，具有以下功能。
本文将讲解
- 如何创建订单主表和订单明细表并插入示例记录
- 创建存储过程以执行订单主表和订单明细表的
插入/更新/选择和删除操作 - 创建 Entity Framework 并添加所有存储过程
- 为订单主表和订单明细表创建单独的 WEB API，以便从 AngularJS Controller 执行我们所有的存储过程
- 创建 AngularJS Controller 来执行所有业务逻辑部分，以显示我们的主/明细 HTML 网格
- 为订单主表和明细 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 操作。
首先，我们为 Order 主表创建一个存储过程来执行 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
接下来，我们为 Order Detail 表创建存储过程来执行 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 Entity Data Model ，为我们的 EF 指定名称，然后单击添加。
从数据库选择 EF Designer，然后单击下一步 >。
在此，单击新建连接并提供您的 SQL Server - 服务器名称并连接到您的数据库。
在这里，我们可以看到我已经提供了我的 SQL 服务器名称、ID 和密码，连接成功后，我选择了 OrderManagement 作为数据库，因为我们已经使用我的 SQL 脚本创建了数据库。
单击下一步，选择需要使用的表和所有存储过程，然后单击完成。
在这里，我们可以看到我们已经创建了 OrderDetailModel。
创建实体后，下一步是向我们的控制器添加 Web API 并编写 选择/插入/更新和删除的函数。
添加 Web API Controller 的过程
右键单击Controllers文件夹，单击添加，然后单击Controller。
选择Controller并添加一个Empty Web API 2 Controller。为 Web API Controller 提供名称，然后单击确定。在此，我为我的 Web API Controller 指定了名称“OrderAPIController”。在此演示项目中，我为 Order 主表和 Order 明细表创建了两个不同的 Controller。
众所周知，Web API 是构建浏览器和移动设备 HTTP 服务的简单易行的方法。
Web API 具有以下四种方法：Get/Post/Put 和 Delete，其中
Get用于请求数据（Select）Post用于创建数据（Insert）Put用于更新数据Delete用于删除数据
Get 方法
在我们的示例中，由于我只使用存储过程，所以我只使用了 Get 方法。我们需要创建一个实体对象，并编写我们的 Get 方法来执行 Select/Insert/Update 和 Delete 操作。
查询操作
我们使用 get 方法通过实体对象获取 OrderMasters 表的所有详细信息，并将结果返回为 IEnumerable。我们在 AngularJs 中使用此方法，并在 AngularJs Controller 的 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();
}
在这里，我的示例中，我为 Select/Insert/Update 和 Delete 操作使用了 get 方法，因为在我的存储过程中，在 insert/update 和 delete 之后，我从数据库返回了消息。
插入操作
与 select 类似，我将所有参数传递给 insert 过程。此 insert 方法将返回数据库的结果，表明记录是否已插入。我将获取结果并在 AngularJs Controller 中显示给 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 Controller 中显示给 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 操作创建了另一个 Controller，名为“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 Controller 类。下一步是创建我们的 AngularJs Module 和 Controller。让我们看看如何创建我们的 AngularJs Controller。在 Visual Studio 2015 中，添加 AngularJs Controller 非常容易。让我们逐步了解如何创建和编写 AngularJs Controller。
创建 AngularJs Controller
首先，在Script文件夹内创建一个文件夹，我将其命名为“MyAngular”。
现在将您的 Angular Controller 添加到该文件夹中。
右键单击MyAngular文件夹，然后单击添加，然后单击新建项。选择Web，然后选择AngularJs Controller，并为 Controller 提供一个名称。我将我的 AngularJs Controller 命名为“Controller.js”。
创建 AngularJs Controller 后，我们可以看到默认情况下，Controller 将包含带有默认模块定义等代码。
我已经更改了前面的代码，如下所示添加了 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']);
})();
Controllers：在 AngularJs Controller 中，我完成了所有业务逻辑，并将数据从 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 Controller 名称和方法来获取详细信息。在这里，我们可以看到我使用
{ 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 Controller 中的 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 表详细信息可见，用户可以在其中输入新学生信息。对于新学生，我将 Student 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”，则将插入新的 Order Master 详细信息。在这里，我将调用 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 方法中，我将获取用户单击编辑图标的行的所有详细信息，并将所有结果设置给相应的 TextBox。在“保存”按钮单击时，我将调用 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;
}
删除订单主详细信息
在“删除”按钮单击时，我将向用户显示确认消息，询问是否删除 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 的 Model 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。
例如，我们可以使用管道符号将 OrderBy 添加到 ng-repeat 中，让我们考虑前面的示例。
在 ng-repeat 中，我们将使用过滤器进行搜索，这将过滤我们输入的所有 textbox 值，并产生过滤后的结果。
<tbody data-ng-repeat="stds in OrderMasters | filter:search | orderBy:predicate:reverse">
显示订单明细
在这里，我们可以看到单击明细按钮后，我如何在订单主表中显示订单明细网格。
在每次单击订单主表行时，我都会检查活动行。然后，在单击明细按钮时，我将调用 showNewOrderDetails() 方法来显示详细信息。
<tr ng-show="activeRow==stds.Order_No" >
在单击明细按钮时，我将调用
<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 和存储过程创建一个简单的基于 MVC Web 的主/明细 CRUD、筛选和排序操作。
支持的浏览器：Chrome 和 Firefox
历史
- 2015 年 11 月 2 日：初始版本