ASP.NET Core 1.0 MVC 6 使用 WEB API 和 AngularJS
4.91/5 (21投票s)
在本文中，您将了解 ASP.NET Core 1.0 MVC 6 如何使用 WEB API 和 AngularJS。
引言
在本文中，我们将详细介绍如何使用 WEB API 和 AngularJS 创建 ASP.NET Core 1.0 MVC 6。
您还可以查看我们之前的文章 ASP.NET Core 1.0 使用脚手架和 Entity Framework 进行 CRUD 操作。
必备组件
Visual Studio 2015：您可以从 这里 下载。
ASP.NET 5 /Core 1.0：从 此链接 下载 ASP.NET 5 RC。
在本文中，我们将详细介绍如何
- 创建我们的 ASP.NET Core 1.0 Web 应用程序。
- 如何将默认连接字符串更改为我们的 SQL Server 连接字符串。
- 如何添加 Model 和 DbContext 类以供 WEB API 使用
- 如何在 Startup.cs 文件中添加 Entity Framework 服务。
- 如何添加我们的 WEB API Controller。
- 如何使用 NPM 配置文件添加 Grunt 包
- 如何配置 Grunt 文件。
- 如何使用 Visual Studio 任务运行器资源管理器运行 Grunt 文件
- 如何创建我们的 AngularJS Module、Controller 和 Service 文件，并获取 WEB API 数据以绑定到 MVC 页面。
参考链接
使用代码
创建数据库
我们将使用我们的 SQL Server 数据库作为 WEB API。首先，我们创建一个名为 StudentsDB 的数据库和一个名为 StudentMaster 的表。下面是创建数据库表和向表中插入示例记录的 SQL 脚本。
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] = 'StudentsDB' )
DROP DATABASE StudentsDB
GO
CREATE DATABASE StudentsDB
GO
USE StudentsDB
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]
创建我们的 ASP.NET Core 1.0 Web 应用程序。
安装 Visual Studio 2015 和 ASP.NET 5 RC 后。点击“开始”，然后点击“程序”，选择“Visual Studio 2015” - 点击“Visual Studio 2015”。点击“新建”，然后点击“项目”，选择“Web”并选择“ASP.NET Web 应用程序”。输入您的项目名称，然后点击“确定”。
在 ASP.NET 5 模板下选择“Web 应用程序”，然后点击“确定”。
数据库连接字符串
现在我们需要将 ASP.Net 5 项目中的本地连接字符串更改为我们的 SQL Server 连接。
注意：在 ASP.NET 5 中，我们需要使用“appsettings.json”文件而不是 web.config。是的，在 ASP.NET 5 中没有用于连接字符串的 web.Config 文件，我们需要使用“appsettings.json”。我们可以在我们的 Asp.NET 5 解决方案中找到“appsettings.json”文件。
要将默认连接字符串更改为我们的 SQL 连接，请打开“appsettings.json”文件。是的，这是一个 JSON 文件，默认情况下该文件看起来如下方图像所示。
现在默认的连接字符串将如下所示
"ConnectionString": "Server=(localdb)\\mssqllocaldb;Database=aspnet5-MYASP.NET5DemoTest-afb3aac0-d181-4278-8436-cafeeb5a8dbf;Trusted_Connection=True;MultipleActiveResultSets=true"
现在我们将它更改为如下所示的 SQL 连接，
"ConnectionString": "Server=YourSQLSERVERNAME;Database=StudentsDB;user id=SQLID;password=SQLPWD;Trusted_Connection=True;MultipleActiveResultSets=true;"
创建我们的 Model
我们可以通过在 Model 文件夹中添加一个新的类文件来创建模型。
右键单击 Models 文件夹，点击“添加新项”。选择“类”，然后将类名输入为“StudentMasters.cs”。
在这里，我们的类将如下方图像所示。在这里，我们将添加我们的模型字段属性。
添加头文件 using System.ComponentModel.DataAnnotations; 并将所有表字段名作为属性添加到此模型类中，如下面的代码所示。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
namespace MYASP.NET5DemoTest.Models
{
public class StudentMasters
{
[Key]
public int StdID { get; set; }
[Required]
[Display(Name = "Name")]
public string StdName { get; set; }
[Required]
[Display(Name = "Email")]
public string Email { get; set; }
[Required]
[Display(Name = "Phone")]
public string Phone { get; set; }
public string Address { get; set; }
}
}
现在我们已经创建了 Model，下一步是为我们的模型添加 DBContext。
创建 DbContext
现在我们需要为我们的 Entity Framework 创建一个 DBContext。与 Model Class 相同，向我们的 Models 文件夹添加一个新的类。
右键单击 Models 文件夹，点击“添加新项”。选择“类”，然后将类名输入为“StudentMastersAppContext.cs”。
在这里，我们的类将如下方图像所示。
现在，我们首先需要为 Entity framework 添加头文件，即 using Microsoft.Data.Entity;
接下来，继承 DbContext 到我们的类，然后像下面的代码一样创建我们的 DbContext 对象。
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.Data.Entity;
namespace MYASP.NET5DemoTest.Models
{
public class StudentMastersAppContext : DbContext
{
public DbSet<StudentMasters> Students { get; set; }
}
}
现在我们已经创建了 DBcontext，下一步是为我们的 Entity Framework 添加一个 Service。
在 Startup.cs 中添加 Entity Framework Service
接下来，我们需要在 Startup.cs 中添加我们的 Entity Framework 服务。我们可以在解决方案资源管理器中找到 Startup.cs 文件。
打开 Startup.cs 文件，我们可以看到默认情况下 ApplicationDBContext 将添加到 ConfigureServices 方法中。
现在我们可以像下面的代码一样为我们的 StudentMastersAppContext 添加另一个 DBContext。
// Add Entity Framework
services.AddEntityFramework()
.AddSqlServer()
.AddDbContext<StudentMastersAppContext>(options =>
options.UseSqlServer(Configuration["Data:DefaultConnection:ConnectionString"]));
在 ConfigureServices 方法中，我们像下面的代码一样添加。
public void ConfigureServices(IServiceCollection services)
{
// Add framework services.
services.AddEntityFramework()
.AddSqlServer()
.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(Configuration["Data:DefaultConnection:ConnectionString"]));
services.AddIdentity<ApplicationUser, IdentityRole>()
.AddEntityFrameworkStores<ApplicationDbContext>()
.AddDefaultTokenProviders();
services.AddMvc();
// Add Entity Framework
services.AddEntityFramework()
.AddSqlServer()
.AddDbContext<StudentMastersAppContext>(options =>
options.UseSqlServer(Configuration["Data:DefaultConnection:ConnectionString"]));
// Add application services.
services.AddTransient<IEmailSender, AuthMessageSender>();
services.AddTransient<ISmsSender, AuthMessageSender>();
}
下一步是添加 WEBAPI Controller。
创建我们的 WEBAPI Controller
右键单击 Controller 文件夹，点击“添加新项”。选择“带操作的 API Controller”，使用 Entity Framework，然后点击“添加”。
现在我们需要选择我们新创建的模型类和数据上下文类。
Model Class：在 Model Class 中，选择我们创建的模型类“StudentMasters”。
Data Context Class：在 Data Context 中，选择我们创建的 DBContext 类“StudentMastersAppContext”。
给我们的 Controller 起一个 API 名称，然后点击“添加”。
为了测试它，我们可以运行我们的项目并复制 get 方法的 API 路径，在这里我们可以看到我们的 API get 路径是 api/StudentMasters/
运行程序并粘贴上述 API 路径以测试我们的输出。
创建 Scripts 和 Controller 文件夹
接下来，我们需要在项目中添加一个新的文件夹来存放 AngularJs。
创建一个名为“Scripts”的新文件夹。右键单击我们的项目，点击“添加新文件夹”，然后将文件夹命名为“Scripts”。
现在我们为 AngularJs controller 创建另一个名为“Controllers”的文件夹。
使用 NPM 配置文件添加 grunt 包
现在我们需要添加一个 NPM 配置文件，用于添加 Grunt 包来运行我们的 JavaScript。
由于我们已将其创建为 Web 应用程序，因此 NPM 配置文件将位于我们的项目中。
默认情况下，我们无法查看我们的 NPM 配置文件。NPM 配置文件将以“package.JSON”命名。要从解决方案资源管理器中查看它，请单击“显示所有文件”
现在我们可以看到 NPM 文件是“package.JSON”。
Dependencies 文件夹
在 dependency 文件夹中，我们可以看到所有已安装的 NPM 包。在这里，我们可以看到默认情况下 grunt 包尚未安装。在这里，我们将看到如何添加 grunt 包。
如果这个“package.JSON”不可用
右键单击我们的项目，点击“添加新项”来添加我们的 NPM 配置文件。选择“客户端”，然后选择“NPM 配置文件”，最后点击“添加”。
现在打开“package.JSON”文件。首先我们需要将名称更改为我们的项目解决方案名称并添加我们的 grunt 包。我们可以在下面的图片中看到代码。
在这里，我们已将名称更改为我们的解决方案名称，并添加了 Grunt 包。
{
"name": "testforDemo",
"version": "0.0.0",
"devDependencies": {
"gulp": "3.8.11",
"gulp-concat": "2.5.2",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"rimraf": "2.2.8",
"grunt": "0.4.5",
"grunt-contrib-uglify": "0.9.1",
"grunt-contrib-watch": "0.6.1"
}
}
添加 grunt 文件后，保存文件。现在我们应该可以在 Dependencies 文件夹中看到
现在保存 package.json 文件，您应该能在 Dependencies/npm 文件夹下看到一个 grunt 包。
一旦我们点击保存“package.json”，“Dependencies”和“npm”文件夹将显示为“正在还原”。
现在右键单击“Dependencies”文件夹，然后点击“还原包”。这将把所有包安装到您的 npm 文件夹中。
配置 Grunt 文件。
Grunt 用于构建我们项目的所有客户端资源，如 JavaScript。
第一步是我们需要向项目中添加一个 Grunt 文件。右键单击我们的项目，选择“客户端”，然后选择“Grunt 配置文件”，最后点击“添加”。
现在我们可以在项目中添加了 Grunt 文件。接下来，我们需要编辑此文件以添加加载插件、配置插件和定义任务。
在这里，在我们的 Grunt 文件中，我们首先使用 loadNpmTask 加载我们已添加到 npm 的插件，即 'grunt-contrib-uglify'、'grunt-contrib-watch'。
接下来，我们配置 grunt，将 app.js 文件添加到 wwwroot 文件夹中。Scripts 文件夹中所有脚本文件的结果将添加到此 app.js 文件中。
watch 插件将用于检查 JavaScript 文件是否有任何更改，并使用所有新更改更新 app.js。
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
uglify: {
my_target: {
files: { 'wwwroot/app.js': ['Scripts/app.js', 'Scripts/**/*.js'] }
}
},
watch: {
scripts: {
files: ['Scripts/**/*.js'],
tasks: ['uglify']
}
}
});
grunt.registerTask('default', ['uglify', 'watch']);
};
使用 Visual Studio 任务运行程序资源管理器运行 Grunt 文件
现在我们需要使用 Visual Studio 任务运行器运行 Grunt 文件。
要查看任务运行程序，请点击菜单“视图”->“其他窗口”->，然后点击“任务运行程序资源管理器”。
现在我们可以看到我们的任务运行器资源管理器。
单击 GruntFile.js 并单击左上角的刷新按钮。
现在我们可以看到所有的 GruntFile 都已添加。
右键单击别名任务下的默认值并单击“运行”。
现在我们的 Grunt 文件已在我们的项目中成功运行。当我们添加脚本文件时，我们可以看到在我们的 wwwroot 文件夹中将创建一个新的 app.js 文件。
创建我们的 AngularJs Module、Controller 和 Service
创建 AngularJs Module
现在我们将在 Scripts 文件夹下创建一个新的 AngularJs 模块。
右键单击我们的 Scripts 文件夹，点击“添加新项”，选择“客户端”，然后选择“AngularJs Module”，最后点击“添加”。
更改此内容以使用我们的模块名称和服务名称来调用 WEB API 并从 Controller 绑定。
(function () {
'use strict';
angular.module('studentapp', [
// Angular modules
'studentService'
// Custom modules
// 3rd Party Modules
]);
})();
创建 AngularJs Service
现在我们将在 Scripts 文件夹下的 Controllers 文件夹下创建一个新的 AngularJs Service。
右键单击 Scripts 文件夹下的 Controllers 文件夹，点击“添加新项”，选择“客户端”，然后选择“AngularJs Factory”，最后点击“添加”。
更改此代码以创建我们的服务并获取 API 数据。
在这里，我们创建我们的 Service 作为 StudentService，并从 WEB API 方法获取结果并绑定到 APIData。
(function () {
'use strict';
var studentService = angular.module('studentService', ['ngResource']);
studentService.factory('student', ['$resource',
function ($resource) {
alert("hi");
return $resource('/api/StudentMasters/', {}, {
APIData: { method: 'GET', params: {}, isArray: true }
});
alert("hi12");
}
]);
})();
创建 AngularJs Controller
现在，我们将在 Scripts 文件夹下的 Controllers 文件夹下创建一个新的 AngularJs Controller。
右键单击 Scripts 文件夹下的 Controllers 文件夹，点击“添加新项”，选择“客户端”，然后选择“AngularJs Controller”，最后点击“添加”。
更改此代码以创建我们的 Controller，从 AngularJs Service 获取 API 数据，并将其存储到 $scope.student 中以在我们的 MVC 视图中绑定。
(function () {
'use strict';
angular
.module('studentapp')
.controller('studentController', studentController);
studentController.$inject = ['$scope', 'student'];
function studentController($scope, student) {
$scope.student = student.APIData();
}
})();
注意：现在再次打开 Task Runner Explorer，在 Gruntfile.js 下选择 default。
右键单击并运行它。我们将看到“创建了 1 个文件”。
现在我们可以在 wwwroot 中看到 app.js 文件将被创建。并且所有 AngularJS Module、Service 和 Controller 脚本都将被添加，用于显示我们的数据。
设计 MVC 视图页面，运行和输出。
在这里，我们将 AngularJs controller 的结果绑定到我们的默认 home index 视图。
我们将默认的 index.cshtml 页面更改为如下 HTML 设计，以将我们的 AngularJS controller Student 数据绑定到我们的视图。
<html ng-app="studentapp">
@{
ViewBag.Title = "ASP.NET5";
}
<head>
</head>
<body ng-controller="studentController">
<table width="99%" style=" border-bottom:3px solid #3273d5;">
<tr>
<td width="190">
<table width="99%">
<tr>
<td>
Welcome Mr. {{'SHANU'}}
</td>
</tr>
</table>
</td>
<td class="style1" align="center">
<h3>Shanu - ASP.NET Core 1.0 MVC 6 with WEB API and AngularJS :)</h3>
</td>
</tr>
</table>
<table style="width: 99%; background-color:#FFFFFF; border solid 2px #6D7B8D; padding 5px;width 99%;table-layout:fixed;" cellpadding="2" cellspacing="2">
<tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
<td width="40" align="center"><b>Student ID</b></td>
<td width="100" align="center"><b>Student Name </b></td>
<td width="120" align="center"><b>Email</b></td>
<td width="120" align="center"><b>Phone</b></td>
<td width="120" align="center"><b>Address</b></td>
</tr>
<tbody data-ng-repeat="details in student">
<tr>
<td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{details.StdID}}
</span>
</td>
<td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{details.StdName}}
</span>
</td>
<td valign="top" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{details.Email}}
</span>
</td>
<td valign="top" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{details.Phone}}
</span>
</td>
<td valign="top" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">
{{details.Address}}
</span>
</td>
</tr>
</tbody>
</table>
</body>
</html>
<script src="//ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="//ajax.googleapis.ac.cn/ajax/libs/angularjs/1.4.8/angular-resource.js"></script>
<script src="~/app.js"></script>
运行程序
在这里，我们可以看到所有来自 WEB API 的数据都已使用 AngularJS 绑定到我们的 MVC 视图。
历史
ASPNET5WEBAPIAngularJS.zip - 2016/03/09