SPA、ASP.NET Web API 和 Angular.js 的 CRUD
4.83/5 (63投票s)
SPA、ASP.NET Web API 和 Angular.js 的 CRUD
引言
在本文中，我将通过大量的图示来演示 AngularJS 中 CRUD 的简单过程。一图胜千言，所以我相信带有合适截图的文章。在这里，我将描述如何使用 angularjs 创建 CRUD。我将展示以下一些成功步骤
背景
在 Visual Studio Web Application 中，使用客户端-服务器架构。这里有两个进程或两个应用程序会互相通信以交换信息。在这两个进程中，一个充当客户端进程，另一个充当服务器。
在传统的 Web 应用程序中，客户端（浏览器）通常会向服务器发出页面请求来发起通信。然后服务器处理请求并将页面的 HTML 发送给客户端（浏览器）。
在单页应用程序 (SPA) 中，最初，整个页面在客户端通过初始请求加载，之后，后续操作必须通过 Ajax 请求更新，无需重新加载整个页面。SPA 通过响应用户操作来减少时间，从而获得更流畅的体验。
开发 SPA 的架构非常困难，与传统的 Web 应用程序不同。然而，最熟悉的 JavaScript 框架，如 AngularJS、 ASP.NET Web API，以及 CSS3 的新样式功能，让设计和构建 SPA 变得非常容易。
在本文中，我将向您展示如何使用 ASP.NET Web API、AngularJS 创建 SPA 和 CRUD。
概述
目标
在本文中，您将学习如何
- 创建 angular-js CRUD
- 使用 Twitter-Bootstrap 创建响应式 UI
必备组件
- Windows 7 或更高版本，至少 4GB RAM
- Visual Studio Express 2013 for Web 或更高版本
- SQL Server 2012、SQL Server Express 或 LocalDB
- ASP.NET MVC 5
- AngularJS in 60-ish Minutes 电子书 或 视频
安装
为了创建此应用程序，请遵循上述先决条件。
练习
本文包含以下练习
- 创建 Web API
- 创建 SPA 界面
练习 1：创建 Web API
设置 Web API 应用程序
- 打开 Visual Studio Express 2013 for Web，然后选择 File | New > Project... 以开始一个新的解决方案。
2. 在 Visual Studio 2013 中，通过选择 Project new dialog box（项目新建对话框）并从 | Visual C# | Web 选项卡下选择 ASP.NET Web Application 来创建一个新的 Web API 项目。确保已选择 .NET Framework 4.5，将其命名为 RDLCReport，选择一个 Location（位置）并单击 OK。
创建新的 ASP.NET Web 应用程序项目
3. 在 New ASP.NET Project 对话框中，选择 MVC 模板并选择 Web API 选项。同时单击 OK 继续。
创建包含 Web API 组件的 MVC 模板新项目
4. 在 Solution Explorer（解决方案资源管理器）中，右键单击 RDLCReport 项目的 Solution（解决方案）并生成。
构建新解决方案
5. 现在创建数据库 'Inventory' 和表 'Customer'，并将主键设置为 Id，脚本如下
USE [Inventory]
GO
DROP TABLE [dbo].[Customer]
GO
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
CREATE TABLE [dbo].[Customer](
[Id] [int] NOT NULL,
[Name] [nvarchar](50) NULL,
[Address] [nvarchar](50) NULL,
[City] [nvarchar](50) NULL,
[Country] [nvarchar](50) NULL,
[DateOfBirth] [datetime] NULL,
[Age] [int] NULL,
CONSTRAINT [PK_Customer] PRIMARY KEY CLUSTERED
(
[Id] 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
6. 创建数据库和表后，现在您需要通过此对话框创建 Entity Framework Model Object。
创建 Entity Framework 数据模型对象
7. 在 Entity Data Model Wizard（实体数据模型向导）中，选择 EF Designer From Database，然后单击 next（下一步）按钮。
选择 Entity Framework 模型内容
8. 在 Entity Data Model Wizard 中，通过单击 New Connection...（新建连接...）按钮选择您的数据连接。
从连接属性对话框选择连接字符串
9. 在 Connection Properties Window（连接属性窗口）对话框中，写入服务器名称、SQL 身份验证并选择数据库名称，然后完成。
从此窗口选择连接字符串
10. 在 Entity Data Model Wizard 中，选择 yes, Include the sensitive data in the connection string（是，在连接字符串中包含敏感数据），然后单击 next（下一步）按钮。
选择连接字符串中的敏感数据。
11. 在 Entity Data Model Wizard 中，选择表并单击 finish（完成）按钮。
创建 Customer 表模型对象
12. 完成上述过程后，Build solution（生成解决方案）。
13. 在 Solution Explorer（解决方案资源管理器）中，右键单击 RDLCReport 项目的 Controllers（控制器）文件夹，然后选择 Add | New Controller Item...。现在通过此方式创建 CustomerController。
选择 API 控制器
选择 API 控制器名称
14. CustomerController.cs 文件随后将被添加到 RDLCReport 项目的 Controllers（控制器）文件夹中，其中包含一个空的 CustomerController 类。在 RDLCReport.Controllers 命名空间前添加以下程序集。
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
15. 在 CustomerController.cs 文件中，将以下代码添加到 CustomerController 类中。
InventoryEntities db = new InventoryEntities();
//get all customer
[HttpGet]
public IEnumerable<Customer> Get()
{
return db.Customers.AsEnumerable();
}
//get customer by id
public Customer Get(int id)
{
Customer customer = db.Customers.Find(id);
if (customer == null)
{
throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.NotFound));
}
return customer;
}
//insert customer
public HttpResponseMessage Post(Customer customer)
{
if (ModelState.IsValid)
{
db.Customers.Add(customer);
db.SaveChanges();
HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, customer);
response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = customer.Id }));
return response;
}
else
{
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
}
}
//update customer
public HttpResponseMessage Put(int id, Customer customer)
{
if (!ModelState.IsValid)
{
return Request.CreateErrorResponse(HttpStatusCode.BadRequest, ModelState);
}
if (id != customer.Id)
{
return Request.CreateResponse(HttpStatusCode.BadRequest);
}
db.Entry(customer).State = EntityState.Modified;
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException ex)
{
return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
}
return Request.CreateResponse(HttpStatusCode.OK);
}
//delete customer by id
public HttpResponseMessage Delete(int id)
{
Customer customer = db.Customers.Find(id);
if (customer == null)
{
return Request.CreateResponse(HttpStatusCode.NotFound);
}
db.Customers.Remove(customer);
try
{
db.SaveChanges();
}
catch (DbUpdateConcurrencyException ex)
{
return Request.CreateErrorResponse(HttpStatusCode.NotFound, ex);
}
return Request.CreateResponse(HttpStatusCode.OK, customer);
}
//prevent memory leak
protected override void Dispose(bool disposing)
{
db.Dispose();
base.Dispose(disposing);
}
练习 2：创建 SPA 界面
待办
1. 从 Tools（工具）> Library Package Manager（库包管理器）打开 Package Manager Console（程序包管理器控制台）。键入以下命令安装 AngularJS.Core NuGet 程序包。
Install-Package AngularJS.Core
2. 在 Solution Explorer（解决方案资源管理器）中，右键单击 RDLCReport 项目的 Scripts（脚本）文件夹，然后选择 Add | New Folder（添加 | 新建文件夹）。将文件夹命名为 app 并按 Enter。
3. 右键单击刚刚创建的 app 文件夹，然后选择 Add | JavaScript File（添加 | JavaScript 文件）。
创建新的 JavaScript 文件
4. 在 Specify Name for Item（为项目指定名称）对话框中，在 Item name（项目名称）文本框中键入 quiz-controller，然后单击 OK。
命名新 JavaScript 文件
5. 在 customerCtrl.js 文件中，添加以下代码来声明和初始化 AngularJS。
//create angularjs controller
var app = angular.module('app', []);//set and get the angular module
app.controller('customerController', ['$scope', '$http', customerController]);
//angularjs controller method
function customerController($scope, $http) {
//declare variable for mainain ajax load and entry or edit mode
$scope.loading = true;
$scope.addMode = false;
//get all customer information
$http.get('/api/Customer/').success(function (data) {
$scope.customers = data;
$scope.loading = false;
})
.error(function () {
$scope.error = "An Error has occured while loading posts!";
$scope.loading = false;
});
//by pressing toggleEdit button ng-click in html, this method will be hit
$scope.toggleEdit = function () {
this.customer.editMode = !this.customer.editMode;
};
//by pressing toggleAdd button ng-click in html, this method will be hit
$scope.toggleAdd = function () {
$scope.addMode = !$scope.addMode;
};
//Inser Customer
$scope.add = function () {
$scope.loading = true;
$http.post('/api/Customer/', this.newcustomer).success(function (data) {
alert("Added Successfully!!");
$scope.addMode = false;
$scope.customers.push(data);
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Adding Customer! " + data;
$scope.loading = false;
});
};
//Edit Customer
$scope.save = function () {
alert("Edit");
$scope.loading = true;
var frien = this.customer;
alert(frien);
$http.put('/api/Customer/' + frien.Id, frien).success(function (data) {
alert("Saved Successfully!!");
frien.editMode = false;
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Saving customer! " + data;
$scope.loading = false;
});
};
//Delete Customer
$scope.deletecustomer = function () {
$scope.loading = true;
var Id = this.customer.Id;
$http.delete('/api/Customer/' + Id).success(function (data) {
alert("Deleted Successfully!!");
$.each($scope.customers, function (i) {
if ($scope.customers[i].Id === Id) {
$scope.customers.splice(i, 1);
return false;
}
});
$scope.loading = false;
}).error(function (data) {
$scope.error = "An Error has occured while Saving Customer! " + data;
$scope.loading = false;
});
};
}
6. 在 customerCtrl.js 中，以上所有代码都可以放入此 JavaScript 函数中。
(function () {
'use strict';
/*Write above code here*/
})();
7. 在 _Layout.cshtml 页面（路径为 Views > Shared > _Layout.cshtml）中，添加以下行。
创建 angular 引导
8. 在 BundleConfig.cs 文件中（路径为 App_Start > BundleConfig.cs），添加两行。
添加 java 脚本文件
9. 在 Views > Home > Index.cshtml 文件中添加以下代码。
<div data-ng-controller="customerController" class="container">
<div class="row">
<div class="col-md-12">
<strong class="error">{{ error }}</strong>
<p data-ng-hide="addMode"><a data-ng-click="toggleAdd()" href="javascript:;" class="btn btn-primary">Add New</a></p>
<form name="addCustomer" data-ng-show="addMode" style="width:600px;margin:0px auto;">
<div class="form-group">
<label for="cid" class="col-sm-2 control-label">ID:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="cid" placeholder="please enter id" data-ng-model="newcustomer.Id" required />
</div>
</div>
<div class="form-group">
<label for="cname" class="col-sm-2 control-label">Name:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="cname" placeholder="please enter your name" data-ng-model="newcustomer.Name" required />
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">Address:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="address" placeholder="please enter your address" data-ng-model="newcustomer.Address" required />
</div>
</div>
<div class="form-group">
<label for="city" class="col-sm-2 control-label">City:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="city" placeholder="please enter your city" data-ng-model="newcustomer.City" required />
</div>
</div>
<div class="form-group">
<label for="country" class="col-sm-2 control-label">Country:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="country" placeholder="please enter your country" data-ng-model="newcustomer.Country" required />
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">Age:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="age" placeholder="please enter your age" data-ng-model="newcustomer.Age" required />
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Add" data-ng-click="add()" data-ng-disabled="!addCustomer.$valid" class="btn btn-primary" />
<input type="button" value="Cancel" data-ng-click="toggleAdd()" class="btn btn-primary" />
</div>
</div>
<br />
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<br />
<br />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered table-hover" style="width:800px">
<tr>
<th>#</th>
<td>FirstName</td>
<th>LastName</th>
<th>Address</th>
<th>City</th>
<th>PostalCode</th>
<th>Country</th>
</tr>
<tr data-ng-repeat="customer in customers">
<td><strong data-ng-hide="customer.editMode">{{ customer.Id }}</strong></td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Name }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Name" />
</td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Address }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Address" />
</td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.City }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.City" />
</td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Country }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Country" />
</td>
<td>
<p data-ng-hide="customer.editMode">{{ customer.Age }}</p>
<input data-ng-show="customer.editMode" type="text" data-ng-model="customer.Age" />
</td>
<td>
<p data-ng-hide="customer.editMode"><a data-ng-click="toggleEdit(customer)" href="javascript:;">Edit</a> | <a data-ng-click="deletecustomer(customer)" href="javascript:;">Delete</a></p>
<p data-ng-show="customer.editMode"><a data-ng-click="save(customer)" href="javascript:;">Save</a> | <a data-ng-click="toggleEdit(customer)" href="javascript:;">Cancel</a></p>
</td>
</tr>
</table>
<hr />
</div>
</div>
</div>
<div id="mydiv" data-ng-show="loading">
<img src="Images/ajax-loader.gif" class="ajax-loader" />
</div>
</div>
10. 运行并享受 angularjs 中的 CRUD，输出如下：
输出
结论
我认为本文对于那些想要学习 AngularJS、WebApi、Twitter-Bootstrap、SPA 和 SQL-SERVER Data First 的初学者会非常有帮助。我的英语不好，如果有什么错误，请原谅。感谢您的耐心。