MVC、Angular JS 使用 WEB API 2 和存储过程进行 CRUD 操作
4.88/5 (47投票s)
如何使用 MVC 5、Angular JS、WEB API 和存储过程创建简单的 Web 应用程序
引言
在互联网上，有很多关于使用 Entity Framework 的 WEB API 示例。但在社区论坛中，我看到许多成员提出了关于使用 WEB API Entity Framework 和存储过程的简单示例的问题。我搜索了很多，试图找到一篇简单的文章，解释使用存储过程与 MVC 和 Web API 执行 CRUD 操作的简单方法。但我没能找到任何解释所有这些的文章。我计划使用 MVC 5、Angular JS、WEB API 创建一个简单的 Web 应用程序，以便使用 Entity Framework 和存储过程执行 CRUD（创建/读取/更新和删除）操作。
在本文中，我们将看到如何
- C -> (创建 - 使用 EF 和 WEB API 以及存储过程将新的学生详细信息插入数据库)
- R -> (读取 – 使用 EF 和 WEB API 以及存储过程从数据库搜索/选择学生详细信息)
- U -> (更新 - 使用 EF 和 WEB API 以及存储过程将学生详细信息更新到数据库)
- D -> (删除 - 使用 EF 和 WEB API 以及存储过程从数据库删除学生详细信息)
必备组件
Visual Studio 2015 - 您可以从此处下载（在我的示例中，我使用了 Visual Studio Community 2015 RC）。
您还可以查看我之前关于使用 MVC 和 WCF REST 服务进行 AngularJs 的文章。
- MVC AngularJs 和 WCF REST 服务用于“读心术”问答游戏
- MVC、AngularJs 和 WCF REST 服务用于主从详细信息网格
- 使用 MVC 和 WCF REST 进行 AngularJs 过滤、排序和动画
- 使用 MVC 和 WCF REST 服务进行 AngularJs 购物车
- 使用 MVC 和 WCF REST 进行 AngularJs 动态菜单创建
之前的文章与使用 MVC 和 Web API 2 的 AngularJs相关。
Angular JS
我们可能熟悉模型、视图、视图模型 (MVVM) 以及模型、视图和控制器 (MVC) 是什么。Angular JS 是一个纯粹基于 HTML、CSS 和 JavaScript 的 JavaScript 框架。
Angular JS 的模型视图 whatever (MVW) 模式类似于 MVC 和 MVVM 模式。在我们的示例中，我使用了模型、视图和服务。在代码部分，让我们看看如何在我们的 MVC 应用程序中安装和创建 Angular JS。
如果您对了解更多 Angular JS 感兴趣，请查阅此链接。
Using the Code
1) 创建数据库和表
我们将在“studentDB”数据库下创建StudentMasters表。以下是创建数据库、表和示例插入查询的脚本。在您的 SQL Server 中运行此脚本。我使用了 SQL Server 2012。
-- =============================================
-- Author : Shanu
-- Create date : 2015-07-13
-- Description : To Create Database,Table and Sample Insert Query
-- Latest
-- Modifier : Shanu
-- Modify date : 2015-07-13
-- =============================================
--Script to create DB,Table and sample Insert data
USE MASTER
GO
-- 1) Check for the Database Exists .If the database is exist then drop and create new DB
IF EXISTS (SELECT [name] FROM sys.databases WHERE [name] = 'studentDB' )
DROP DATABASE studentDB
GO
CREATE DATABASE studentDB
GO
USE studentDB
GO
-- 1) //////////// StudentMasters
IF EXISTS ( SELECT [name] FROM sys.tables WHERE [name] = 'StudentMasters' )
DROP TABLE StudentMasters
GO
CREATE TABLE [dbo].[StudentMasters](
[StdID] INT IDENTITY PRIMARY KEY,
[StdName] [varchar](100) NOT NULL,
[Email] [varchar](100) NOT NULL,
[Phone] [varchar](20) NOT NULL,
[Address] [varchar](200) NOT NULL
)
-- insert sample data to Student Master table
INSERT INTO [StudentMasters] ([StdName],[Email],[Phone],[Address])
VALUES ('Shanu','syedshanumcain@gmail.com','01030550007','Madurai,India')
INSERT INTO [StudentMasters] ([StdName],[Email],[Phone],[Address])
VALUES ('Afraz','Afraz@afrazmail.com','01030550006','Madurai,India')
INSERT INTO [StudentMasters] ([StdName],[Email],[Phone],[Address])
VALUES ('Afreen','Afreen@afreenmail.com','01030550005','Madurai,India')
select * from [StudentMasters]
创建表后，我们将创建存储过程来执行我们的 CRUD 操作。
-- 1) Stored procedure to Select Student Details
-- Author : Shanu
-- Create date : 2015-07-13
-- Description : Student Details
-- Tables used : StudentMasters
-- Modifier : Shanu
-- Modify date : 2015-07-13
-- =============================================
-- exec USP_Student_Select '',''
-- =============================================
Create PROCEDURE [dbo].[USP_Student_Select]
(
@StdName VARCHAR(100) = '',
@email VARCHAR(100) = ''
)
AS
BEGIN
Select [StdID],
[StdName],
[Email],
[Phone],
[Address]
FROM
StudentMasters
WHERE
StdName like @StdName +'%'
AND Email like @email +'%'
ORDER BY
StdName
END
-- 2) Stored procedure to insert Student Details
-- Author : Shanu
-- Create date : 2015-07-13
-- Description : Student Details
-- Tables used : StudentMasters
-- Modifier : Shanu
-- Modify date : 2015-07-13
-- =============================================
-- exec USP_Student_Insert 'Raj','raj@rajmail.com','01030550008','seoul,Korea'
-- =============================================
Create PROCEDURE [dbo].[USP_Student_Insert]
(
@StdName VARCHAR(100) = '',
@email VARCHAR(100) = '',
@Phone VARCHAR(20) = '',
@Address VARCHAR(200) = ''
)
AS
BEGIN
IF NOT EXISTS (SELECT * FROM StudentMasters WHERE StdName=@StdName)
BEGIN
INSERT INTO [StudentMasters]
([StdName],[Email],[Phone],[Address])
VALUES (@StdName,@Email,@Phone,@Address)
Select 'Inserted' as results
END
ELSE
BEGIN
Select 'Exists' as results
END
END
-- 3) Stored procedure to Update Student Details
-- Author : Shanu
-- Create date : 2015-07-13
-- Description : Update Student Details
-- Tables used : StudentMasters
-- Modifier : Shanu
-- Modify date : 2015-07-13
-- =============================================
-- exec USP_Student_Update 'Raj','raj@rajmail.com','01030550008','seoul,Korea'
-- =============================================
Create PROCEDURE [dbo].[USP_Student_Update]
( @StdID Int=0,
@StdName VARCHAR(100) = '',
@email VARCHAR(100) = '',
@Phone VARCHAR(20) = '',
@Address VARCHAR(200) = ''
)
AS
BEGIN
IF NOT EXISTS (SELECT * FROM StudentMasters WHERE StdID!=@StdID AND StdName=@StdName)
BEGIN
UPDATE StudentMasters
SET [StdName]=@StdName,
[Email]=@email,
[Phone]=@Phone,
[Address]=@Address
WHERE
StdID=@StdID
Select 'updated' as results
END
ELSE
BEGIN
Select 'Exists' as results
END
END
-- 4) Stored procedure to Delete Student Details
-- Author : Shanu
-- Create date : 2015-07-13
-- Description : Delete Student Details
-- Tables used : StudentMasters
-- Modifier : Shanu
-- Modify date : 2015-07-13
-- =============================================
-- exec USP_Student_Delete '0'
-- =============================================
Create PROCEDURE [dbo].[USP_Student_Delete]
( @StdID Int=0 )
AS
BEGIN
DELETE FROM StudentMasters WHERE StdID=@StdID
END
2) 在 Visual Studio 2015 中创建我们的 MVC Web 应用程序
安装 Visual Studio 2015 后，点击开始 -> 程序 -> 选择Visual Studio 2015 - 点击Visual Studio 2015 RC。
点击新建 -> 项目 -> 选择 Web -> ASP.NET Web 应用程序。选择您的项目位置并输入您的 Web 应用程序名称。
选择 MVC 并在添加文件夹和核心引用中。选择 Web API 并点击 OK。
现在我们已经创建了 MVC 应用程序，下一步，我们将 SQL Server 数据库作为实体数据模型添加到我们的应用程序中。
使用 ADO.NET 实体数据模型添加数据库
右键点击我们的项目并点击添加 -> 新项。
选择数据->选择 ADO.NET 实体数据模型-> 给我们的 EF 命名并点击添加。
从数据库中选择 EF Designer 并点击下一步。
在此处点击新建连接并提供您的 SQL-Server 服务器名称并连接到您的数据库。
在这里，我们可以看到我输入了我的 SQL Server 名称、ID 和密码，连接后，我选择了数据库为studentDB，因为我们已经使用我的 SQL 脚本创建了数据库。
点击下一步并选择需要使用的表，然后点击完成。
在这里，我们可以看到我选择了我们的表studentMasters。要使用我们的存储过程，请选择项目中需要使用的所有 SP。在这里，我们可以看到为了执行 CRUD 操作，我创建了 4 个 SP 用于选择/插入/更新和删除。选择所有 SP 并点击完成。
在这里，我们可以看到现在我已经创建了我们的StudentDetailsEntities。
一旦实体创建完成，下一步，我们将 WEB API 添加到我们的控制器并编写函数来选择/插入/更新和删除。
添加 WEB API 控制器的步骤
右键点击Controllers文件夹-> 点击添加-> 点击控制器。
由于我们将创建 WEB API 控制器，选择控制器并添加空 WEB API 2 控制器。给您的 Web API 控制器命名并点击OK。在这里，我的 Web API 控制器命名为“StudentsController”。
由于我们已经创建了 Web API 控制器，我们可以看到我们的控制器已经继承了ApiController。
众所周知，Web API 是构建浏览器和移动设备 HTTP 服务的简单易用的方式。
Web API 有四种方法：Get/Post/Put 和Delete，其中
- `Get` 用于请求数据（`Select`）
- `Post` 用于创建数据（`Insert`）
- `Put` 用于更新数据。
- `Delete` 用于删除数据。
在我们的示例中，我们将使用Get和Post，因为我们需要从数据库获取所有图像名称和描述，并将新的图像名称和图像描述插入数据库。
Get 方法
在我的示例中，我只使用了Get方法，因为我只使用了存储过程。我们需要为实体创建对象并编写Get方法来执行选择/插入/更新和删除操作。
查询操作
我们使用get方法通过实体对象获取StudentMasters表的所有详细信息，并将结果作为IEnumerable返回。我们在 AngularJS 中使用此方法，并通过 AngularJs 控制器使用Ng-Repeat在 MVC 页面中显示结果，我们可以逐步查看详细信息，如下所示。
在这里，我们可以看到在get方法中，我将search参数传递给USP_Student_Select存储过程方法。在 SP 中，我使用了类似于“%”来返回所有记录，如果search参数为空。
public class studentsController : ApiController
{
studentDBEntities objapi = new studentDBEntities();
// to Search Student Details and display the result
[HttpGet]
public IEnumerable<USP_Student_Select_Result>
Get(string StudentName, string StudentEmail)
{
if (StudentName == null)
StudentName = "";
if (StudentEmail == null)
StudentEmail = "";
return objapi.USP_Student_Select(StudentName, StudentEmail).AsEnumerable();
}
在我的示例中，我将get方法用于所有选择/插入/更新和删除操作，因为在我的存储过程中，在插入/更新和删除之后，我从数据库返回了消息。
插入操作
与select类似，我将所有参数传递给insert过程。这个insert方法将从数据库返回结果，指示记录是否插入。我将获取结果并从 Angular JS 控制器显示到 MVC 应用程序。
// To Insert new Student Details
[HttpGet]
public IEnumerable<string> insertStudent
(string StudentName, string StudentEmail, string Phone, string Address)
{
return objapi.USP_Student_Insert
(StudentName, StudentEmail, Phone, Address).AsEnumerable();
}
更新操作
与Insert类似，我将所有参数传递给插入过程。此Update方法将从数据库返回结果，指示记录是否更新。我将把 Student ID 传递给update过程，以更新该Student ID 的记录。我将获取结果并从 Angular JS 控制器显示到 MVC 应用程序。
//to Update Student Details
[HttpGet]
public IEnumerable<string> updateStudent
(int stdID,string StudentName, string StudentEmail, string Phone, string Address)
{
return objapi.USP_Student_Update
(stdID,StudentName, StudentEmail, Phone, Address).AsEnumerable();
}
更新操作
与Update类似，我将学生 ID 传递给过程以删除记录。
//to Update Student Details
[HttpGet]
public string deleteStudent(int stdID)
{
objapi.USP_Student_Delete(stdID);
return "deleted";
}
现在我们已经创建了 Web API 控制器类。下一步，我们需要创建 AngularJs 模块和控制器。让我们看看如何创建我们的 AngularJS 控制器。在 Visual Studio 2015 中，添加我们的 AngularJs 控制器非常容易。让我们逐步了解如何创建和编写我们的 AngularJs 控制器。
创建 AngularJs Controller
首先，在Script文件夹内创建一个文件夹，我将文件夹命名为“MyAngular”。
现在将您的 Angular Controller 添加到该文件夹中。
右键点击MyAngular文件夹并点击添加和新项。选择Web并选择AngularJs 控制器并为控制器命名。我的 Angular JS 控制器命名为“Controller.js”
AngularJs Controller 创建完成后，我们可以看到默认情况下，Controller 会包含带有默认模块定义等代码。
我将上面的代码修改为添加模块和控制器，如下所示。
如果 Angular JS 包丢失，请将该包添加到您的项目中。
右键点击您的 MVC 项目，然后点击-> 管理 NuGet 包。搜索 AngularJs 并点击安装。
现在我们可以看到所有 Angular JS 包都已安装，并且可以在Script文件夹中看到所有文件。
创建 Angular Js 脚本文件的步骤
Modules.js: 在这里，我们添加对 Angular.js 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: 在 Angular JS 控制器中，我执行了所有业务逻辑，并将数据从 WEB API 返回到我们的 MVC HTML 页面。
1) 变量声明
首先，我声明了所有需要使用的局部变量。
app.controller("AngularJs_studentsController",
function ($scope, $timeout, $rootScope, $window, $http) {
$scope.date = new Date();
$scope.MyName = "shanu";
$scope.stdName = "";
$scope.stdemail = "";
$scope.showStudentAdd = true;
$scope.addEditStudents = false;
$scope.StudentsList=true;
$scope.showItem = true;
//This variable will be used for Insert/Edit/Delete Students details.
$scope.StdIDs = 0;
$scope.stdNames = "";
$scope.stdEmails = "";
$scope.Phones = "";
$scope.Addresss = "";
2) 方法
Select 方法
在select方法中，我使用了$http.get从 WEB API 获取详细信息。在get方法中，我将给出我们的 API 控制器名称和方法来获取详细信息。在这里，我们可以看到我使用{ params: { StudentName: StudentName, StudentEmail: StudentEmail }传递了StudentName和studentEmail的搜索参数。最终结果将使用data-ng-repeat显示到 MVC HTML 页面。
function selectStudentDetails(StudentName, StudentEmail) {
$http.get('/api/students/', { params:
{ StudentName: StudentName, StudentEmail: StudentEmail } }).success(function (data) {
$scope.Students = data;
$scope.showStudentAdd = true;
$scope.addEditStudents = false;
$scope.StudentsList = true;
$scope.showItem = true;
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
搜索按钮点击
在搜索按钮点击时，我将调用SearchMethod来绑定结果。在这里，我们可以看到在搜索名称和电子邮件文本框中，我使用了ng-model="stdName"。使用 Angular JS 控制器中的ng-model，我们可以获取Textbox输入值或将其设置为Textbox。
HTML 部分
<input type="text" name="txtstudName" ng-model="stdName" value="" />
<input type="text" name="txtemail" ng-model="stdemail" />
<input type="submit" value="Search" style="background-color:#336699;color:#FFFFFF"
ng-click="searchStudentDetails()" />
Angular JS 控制器代码部分，用于搜索点击
//Search
$scope.searchStudentDetails = function () {
selectStudentDetails($scope.stdName, $scope.stdemail);
}
插入新的学生详细信息
在“添加新学生详细信息”按钮点击时，我将使“添加学生”表可见，用户可以在其中输入新的学生信息。对于新学生，我将学生 ID 设置为0。在“新学生保存”按钮点击时，我将调用save方法。
// New Student Add Details
$scope.showStudentDetails = function () {
cleardetails();
$scope.showStudentAdd = true;
$scope.addEditStudents = true;
$scope.StudentsList = true;
$scope.showItem = true;
}
在save方法中，我将检查Student ID。如果学生 ID 为“0”，则表示插入新的学生详细信息，在此处我将调用 Insert WEB API 方法；如果学生 ID 大于 0，则表示更新学生记录，我将调用 Update WEB API 方法。
要插入 WEB API 方法，我将传递所有输入参数。在我的存储过程中，我将检查学生姓名是否已存在。如果学生姓名在数据库中不存在，我将插入记录并返回成功消息“inserted”；如果学生姓名已存在，我将返回消息“Exists”。
//Save Student
$scope.saveDetails = function () {
$scope.IsFormSubmitted = true;
if ($scope.IsFormValid ) {
//if the Student ID=0 means its new Student insert here
//I will call the Web API insert method
if ($scope.StdIDs == 0) {
$http.get('/api/students/insertStudent/',
{ params: { StudentName: $scope.stdNames,
StudentEmail: $scope.stdEmails, Phone: $scope.Phones,
Address: $scope.Addresss } }).success(function (data) {
$scope.StudentsInserted = data;
alert($scope.StudentsInserted);
cleardetails();
selectStudentDetails('', '');
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
}
else { // to update to the student details
$http.get('/api/students/updateStudent/',
{ params: { stdID: $scope.StdIDs, StudentName: $scope.stdNames,
StudentEmail: $scope.stdEmails, Phone: $scope.Phones,
Address: $scope.Addresss } }).success(function (data) {
$scope.StudentsUpdated = data;
alert($scope.StudentsUpdated);
cleardetails();
selectStudentDetails('', '');
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
}
}
else {
$scope.Message = "All the fields are required.";
}
}
更新学生详细信息
与插入类似，我将显示更新详细信息供用户编辑并保存。在编辑方法中，我将获取用户点击编辑图标的行的所有详细信息，并将所有结果设置到相应的文本框中。在保存按钮点击时，我将调用保存方法以将所有更改保存到数据库，与插入相同。
//Edit Student Details
$scope.studentEdit = function studentEdit(StudentID, Name, Email, Phone, Address)
{
cleardetails();
$scope.StdIDs = StudentID;
$scope.stdNames = Name
$scope.stdEmails = Email;
$scope.Phones = Phone;
$scope.Addresss = Address;
$scope.showStudentAdd = true;
$scope.addEditStudents = true;
$scope.StudentsList = true;
$scope.showItem = true;
}
删除学生详细信息
在删除按钮点击时，我将向用户显示确认消息，询问是否删除详细信息。如果用户点击OK按钮，我将把学生 ID传递给 WEB API 的删除方法，以从数据库中删除记录。
//Delete Dtudent Detail
$scope.studentDelete = function studentDelete(StudentID, Name) {
cleardetails();
$scope.StdIDs = StudentID;
var delConfirm = confirm
("Are you sure you want to delete the Student " + Name + " ?");
if (delConfirm == true) {
$http.get('/api/students/deleteStudent/',
{ params: { stdID: $scope.StdIDs } }).success(function (data) {
alert("Student Deleted Successfully!!");
cleardetails();
selectStudentDetails('', '');
})
.error(function () {
$scope.error = "An Error has occurred while loading posts!";
});
}
}
结论
本文的主要目的是使用 Angular JS WEB API 2 和存储过程创建一个简单的基于 MVC 的 Web CRUD 操作。
支持的浏览器：Chrome 和 Firefox。
历史
- 2015 年 7 月 15 日：初始版本