使用 Angular JS 和 Web API 进行 CRUD 操作
4.83/5 (41投票s)
在本文中，我们将使用 AngularJS 和 Web API 通过一个示例应用程序学习基本的 CRUD 操作。
在本文中，我们将使用 AngularJS 和 Web API 通过一个示例应用程序学习基本的 CRUD 操作。
在本文中，我们将探讨如何
- 使用 SQL Server 数据库
- 使用 MVC 应用程序
- 使用 Entity Framework（数据库优先方法）
- 使用 AngularJS
- 使用 ASP.NET Web API
开始步骤
创建数据库: 在开始使用 IDE 之前，让我们创建一个名为“StudentDB”的新数据库，并创建一个名为“tblStudent”的示例表。脚本如下
USE [StudentDB ]
GO
/****** Object: Table [dbo].[tblStudent] Script Date: 11/24/2016 1:36:13 PM ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[tblStudent](
[StudentID] [int] IDENTITY(1,1) NOT NULL,
[FirstName] [nvarchar](50) NULL,
[LastName] [nvarchar](50) NULL,
[Email] [nvarchar](50) NULL,
[Address] [nvarchar](50) NULL,
CONSTRAINT [PK_tblStudent] PRIMARY KEY CLUSTERED
(
[StudentID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, _
ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
我们的数据库已经创建好了。现在，让我们创建一个简单的 MVC 应用程序。启动 Visual Studio，然后点击“新建项目”>>
屏幕上将出现以下窗口
单击后，屏幕上将出现一个新的 ASP.NET 项目窗口
解决方案创建完成，并已加载所有必需文件。解决方案结构如下图所示。
让我们来探索解决方案结构
我们知道 ASP.NET MVC 是 Microsoft 开发的一个 Web 应用程序框架。该结构与 Model、View 和 Controller 一起工作。
- Model：代表解决方案数据的类，并强制执行业务规则。
- View：简单的世界视图意味着 UI（用户界面），它动态生成 HTML 响应。
- Controller：Controller 是用户和系统之间的链接。它处理传入的浏览器请求，在处理模型数据或特定任务后，将响应返回给浏览器。
现在，我们将向我们的解决方案添加 AngularJS
右键单击解决方案，然后单击“管理 NuGet 程序包”以添加 Angular JS 引用。
单击“安装”按钮后，加载 AngularJS 文件。下图显示了该过程
现在，我们将在解决方案中创建一个名为ScriptsNg的文件夹，并在ScriptsNg中创建 4 个文件夹。
- 控制器 (Controller)
- 指令
- 模块
- Service
Controller：AngularJS Controller 在应用程序的模型和视图之间控制数据，将所有 Controller 脚本文件保存在Controller文件夹中。
Directive：Angular JS Directive 使用新属性扩展 HTML，将所有 Directive 文件保存在Directive文件夹中。
Module：模块用于分离逻辑，例如服务、控制器、应用程序等，并保持代码整洁。将所有模块文件保存在 module 文件夹中。
Service：Service 是一个函数，将所有自定义服务文件保存在 Service 文件夹中。现在，我们将在 module 文件夹中创建一个名为“app.js”的 JS 文件。代码如下
var app;
(function () {
'use strict'; //Defines that JavaScript code should be executed in "strict mode"
app = angular.module('myapp', []);
})();
我们将在Controller文件夹中创建一个名为“StudentCtrl”的Controller。代码如下
app.controller('StudentCtrl', ['$scope',
function ($scope) {
$scope.Message = 'Hellow World';
}]);
我们将在 MVC Controller文件夹中创建一个StudentController类。代码如下
public class StudentController : Controller
{
// GET: Student
public ActionResult Index()
{
return View();
}
}
我们需要创建一个视图。下图显示了如何创建视图。
视图已成功创建。我们将向 index 视图添加一些代码来检查 AngularJS 的工作情况。代码如下。
<div ng-app="myapp">
<div ng-controller="StudentCtrl">
{{Message}}
</div>
</div>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/ScriptsNg/Module/app.js"></script>
<script src="~/ScriptsNg/Controller/StudentCtrl.js"></script>
运行 AngularJS 后，工作已完成。下方是结果
Entity Framework: 单击 References 后，我们可以看到 Entity Framework 已存在于我们的解决方案中。
创建实体数据模型: 右键单击您的model文件夹，然后单击“新建”，选择 ADO.NET 实体数据模型。按照给出的步骤进行操作。完成此过程后，我们将在 model 文件夹中看到 edmx 文件和其他文件。它被命名为StudentDBEntities。下方是 edmx 模型的图片。
现在我们的解决方案已准备好进行 CRUD 操作。
现在，我们在解决方案中创建了一个名为api的文件夹。右键单击，单击“添加”，然后单击“控制器”，此时将显示以下窗口
添加控制器名称。下图显示了该过程
我们的StudentController的 API 已创建。
用于保存
namespace CrudOperation.api
{
// Route
[RoutePrefix("/api/Student")]
public class StudentController : ApiController
{
// StudentDBEntities object point
StudentDBEntities dbContext = null;
// Constructor
public StudentController()
{
// create instance of an object
dbContext = new StudentDBEntities();
}
[ResponseType(typeof(tblStudent))]
[HttpPost]
public HttpResponseMessage SaveStudent(tblStudent astudent)
{
int result = 0;
try
{
dbContext.tblStudents.Add(astudent);
dbContext.SaveChanges();
result = 1;
}
catch (Exception e)
{
result = 0;
}
return Request.CreateResponse(HttpStatusCode.OK, result);
}
}
}
我们已完成student的save方法。我们已在studentCtrl中添加了一些代码。代码如下
app.controller('StudentCtrl', ['$scope', 'CrudService',
function ($scope, CrudService) {
// Base Url
var baseUrl = '/api/Student/';
$scope.btnText = "Save";
$scope.studentID = 0;
$scope.SaveUpdate = function () {
var student = {
FirstName: $scope.firstName,
LastName: $scope.lasttName,
Email: $scope.email,
Address: $scope.adress,
StudentID: $scope.studentID
}
if ($scope.btnText == "Save") {
var apiRoute = baseUrl + 'SaveStudent/';
var saveStudent = CrudService.post(apiRoute, student);
saveStudent.then(function (response) {
if (response.data != "") {
alert("Data Save Successfully");
$scope.Clear();
} else {
alert("Some error");
}
}, function (error) {
console.log("Error: " + error);
});
}
}
$scope.Clear = function () {
$scope.studentID = 0;
$scope.firstName = "";
$scope.lasttName = "";
$scope.email = "";
$scope.adress = "";
}
}]);
在上面的代码中，我们可以看到“CrudService”是我们编写的一些 HTTP Verb，用于从数据库插入、更新、删除和获取数据。代码如下
app.service('CrudService', function ($http) {
var urlGet = '';
this.post = function (apiRoute, Model) {
var request = $http({
method: "post",
url: apiRoute,
data: Model
});
return request;
}
this.put = function (apiRoute, Model) {
var request = $http({
method: "put",
url: apiRoute,
data: Model
});
return request;
}
this.delete = function (apiRoute) {
var request = $http({
method: "delete",
url: apiRoute
});
return request;
}
this.getAll = function (apiRoute) {
urlGet = apiRoute;
return $http.get(urlGet);
}
this.getbyID = function (apiRoute,studentID) {
urlGet = apiRoute + '/' + studentID;
return $http.get(urlGet);
}
});
我们需要为 CRUD 操作设计我们的 UI（用户界面）。上面，我们已经创建了 index 视图。现在，我们将使用此视图。代码如下
<div ng-app="myapp">
<div ng-controller="StudentCtrl">
<form novalidate name="frmStudent" id="frmStudent" class="form-horizontal row-border">
<br />
<div class="col-md-12">
<div class="form-group">
<label class="col-md-4 control-label" for="input17"> First Name</label>
<div class="col-md-7">
<input type="text"
id="idFirstName"
class="form-control"
name="nameFirstName" ng-model="firstName" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="input17"> Last Name</label>
<div class="col-md-7">
<input type="text"
id="idLastName"
class="form-control"
name="nameFirstName" ng-model="lasttName" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="input17"> Email</label>
<div class="col-md-7">
<input type="text"
id="idEmail"
class="form-control"
name="nameEmail" ng-model="email" />
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="input17"> Address</label>
<div class="col-md-7">
<input type="text"
id="idAddress"
class="form-control"
name="nameAdress" ng-model="adress" />
</div>
</div>
<div class="form-group">
<div class="col-md-4">
</div>
<div class="col-md-7">
<span id="save" class="btn btn-success margin-right-btn"
ng-click="SaveUpdate()">
<i class="icon-save"></i> {{btnText}}
</span>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/ScriptsNg/Module/app.js"></script>
<script src="~/ScriptsNg/Controller/StudentCtrl.js"></script>
<script src="~/ScriptsNg/Services/CrudService.js"></script>
让我们解释一下代码：在上面的代码中，我们可以看到一些用于 Angular JS 的不熟悉的东西。
ng-app="myapp"：这里ng-app是 angularJS 的根元素，“myapp" 是app.js的名称。ng-controller="StudentCtrl"：这里ng-controller指令为您的应用程序添加了一个控制器，StudentCtrl是控制器的名称。我们可以编写代码并创建函数和变量。ng-model：这里，指令将 HTML 控件的值绑定到模型。
注意：请记住，Angular JS 具有双向数据绑定。运行后，我们将获得以下 UI。
用于从数据库获取数据
我们的保存已完成。现在，我们将从数据库中获取数据。我们将在StudentController的 APIController中添加GetStudents方法。代码如下
[ResponseType(typeof(tblStudent))]
[HttpGet]
public List<tblStudent> GetStudents()
{
List<tblStudent> students = null;
try
{
students = dbContext.tblStudents.ToList();
}
catch (Exception e)
{
students = null;
}
return students;
}
我们在studentCtrl中添加了一些代码。代码如下
$scope.GetStudents = function () {
var apiRoute = baseUrl + 'GetStudents/';
var student = CrudService.getAll(apiRoute);
student.then(function (response) {
debugger
$scope.studnets = response.data;
},
function (error) {
console.log("Error: " + error);
});
}
$scope.GetStudents();
我们已向 Index 视图添加了一些代码以显示students列表。代码如下
<table class="table table-hover general-table">
<thead class="grid-top-panel">
<tr>
<th style="display:none">StudentID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dataModel in students">
<td style="display:none">{{dataModel.StudentID}}</td>
<td> {{dataModel.FirstName}}</td>
<td> {{dataModel.LastName}}</td>
<td>{{dataModel.Email}}</td>
<td>{{dataModel.Address}}</td>
<td style="text-align:right; color:white">
<span>
<span id="save" class="btn btn-primary margin-right-btn"
ng-click="GetStudentByID(dataModel)">
Edit
</span>
</span>
</td>
<td style="text-align:right; color:white">
<span>
<span id="save" class="btn btn-danger margin-right-btn"
ng-click="DeleteStudent(dataModel)">
Delete
</span>
</span>
</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
我们只是在 HTML 表中添加了数据。
用于更新
我们需要在StudentController的 API 中创建两个用于更新的方法，首先我们将通过studentID获取student信息，更改student的属性后，我们需要更新。
第一个方法 GetStudentByID
[Route("GetStudentByID/{studentID:int}")]
[ResponseType(typeof(tblStudent))]
[HttpGet]
public tblStudent GetStudentByID(int studentID)
{
tblStudent astudent = null;
try
{
astudent = dbContext.tblStudents.Where(x => x.StudentID == studentID).SingleOrDefault();
}
catch (Exception e)
{
astudent = null;
}
return astudent;
}
我们需要使用GetStudentByID方法通过studentID在StudentCtrl中获取特定的student数据。代码如下
$scope.GetStudentByID = function (dataModel)
{
debugger
var apiRoute = baseUrl + 'GetStudentByID';
var student = CrudService.getbyID(apiRoute, dataModel.StudentID);
student.then(function (response) {
$scope.studentID = response.data.StudentID;
$scope.firstName = response.data.FirstName;
$scope.lasttName = response.data.LastName;
$scope.email = response.data.Email;
$scope.adress = response.data.Address;
$scope.btnText = "Update";
},
function (error) {
console.log("Error: " + error);
});
}
现在，我们将检查它的工作情况。单击编辑按钮后，我们将获得以下结果
其次，我们将更新我们的student数据，所以我们需要Create UpdateStudent方法。代码如下
[ResponseType(typeof(tblStudent))]
[HttpPut]
public HttpResponseMessage UpdateStudent(tblStudent astudent)
{
int result = 0;
try
{
dbContext.tblStudents.Attach(astudent);
dbContext.Entry(astudent).State = EntityState.Modified;
dbContext.SaveChanges();
result = 1;
}
catch (Exception e)
{
result = 0;
}
return Request.CreateResponse(HttpStatusCode.OK, result);
}
我们将修改我们的SaveUpdate方法以进行更新
$scope.SaveUpdate = function () {
var student = {
FirstName: $scope.firstName,
LastName: $scope.lasttName,
Email: $scope.email,
Address: $scope.adress,
StudentID: $scope.studentID
}
if ($scope.btnText == "Save") {
var apiRoute = baseUrl + 'SaveStudent/';
var saveStudent = CrudService.post(apiRoute, student);
saveStudent.then(function (response) {
if (response.data != "") {
alert("Data Save Successfully");
$scope.GetStudents();
$scope.Clear();
} else {
alert("Some error");
}
}, function (error) {
console.log("Error: " + error);
});
}
else
{
var apiRoute = baseUrl + 'UpdateStudent/';
var UpdateStudent = CrudService.put(apiRoute, student);
UpdateStudent.then(function (response) {
if (response.data != "") {
alert("Data Update Successfully");
$scope.GetStudents();
$scope.Clear();
} else {
alert("Some error");
}
}, function (error) {
console.log("Error: " + error);
});
}
}
现在，我们将检查它的工作情况。下图显示了该过程
用于删除
现在，我们必须在StudentController的 API 中添加delete方法。代码如下
[ResponseType(typeof(tblStudent))]
[HttpDelete]
public HttpResponseMessage DeleteStudent(int id)
{
int result = 0;
try
{
var student = dbContext.tblStudents.Where(x => x.StudentID == id).FirstOrDefault();
dbContext.tblStudents.Attach(student);
dbContext.tblStudents.Remove(student);
dbContext.SaveChanges();
result = 1;
}
catch (Exception e)
{
result = 0;
}
return Request.CreateResponse(HttpStatusCode.OK, result);
}
我们将添加Delete方法到名为“StudentCtrl”的 AngularJs Controller 中。代码如下
$scope.DeleteStudent = function (dataModel)
{
debugger
var apiRoute = baseUrl + 'DeleteStudent/' + dataModel.StudentID;
var deleteStudent = CrudService.delete(apiRoute);
deleteStudent.then(function (response) {
if (response.data != "") {
alert("Data Delete Successfully");
$scope.GetStudents();
$scope.Clear();
} else {
alert("Some error");
}
}, function (error) {
console.log("Error: " + error);
});
}
删除student信息后，输出显示在下图
希望这会有所帮助。 :)