ASP.NET Core 1.0 使用 Angular2 和 WEB API 向数据库插入/查询数据
4.94/5 (26投票s)
本文将介绍如何在 ASP.NET Core 1.0 中使用 Angular2 和 WEB API 向数据库插入/查询数据。
引言
在我们之前的文章中，
我们详细介绍了 ASP.NET Core 1.0、Angular2 和 WEB API 来显示数据。
在本文中，我们将详细介绍如何使用 ASP.NET Core 1.0 和 Angular2 通过 WEB API 向 SQL Server 数据库插入和查询学生详细信息。
在本文中，我们将详细介绍如何：
- 创建我们的 ASP.NET Core 1.0 RC2 Web 应用程序。
- 创建模型以添加学生详细信息。
- 使用 Entity Framework 创建 WEB API 控制器以选择和插入数据到数据库。
- 如何添加 TypeScript JSON 配置文件
- 如何使用 NPM 配置文件添加 Grunt 包
- 如何配置 Grunt 文件。
- 添加依赖项以安装 Angular2 和所有其他文件
- 如何使用 TypeScript 文件创建我们的 Angular2 App 和引导程序。
- 使用 HTTP Get/Post 从 Angular2 到 WEB API 插入和选择数据，然后插入到数据库中。
- 创建 HTML 文件
- 如何使用 Visual Studio 任务运行器资源管理器运行 Grunt 文件
- 如何运行和查看我们的示例。
参考网站
必备组件
使用代码
我们将使用 SQL Server 数据库来支持我们的 WEB API。首先，我们创建一个名为 StudentsDB 的数据库和一个名为 StudentMaster 的表。这是创建数据库表和示例记录插入查询的 SQL 脚本。在您的本地 SQL Server 中运行以下查询以创建我们项目中将使用的数据库和表。
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]
步骤 1：创建我们的 ASP.NET Core 1.0 Web 应用程序。
安装 Visual Studio 2015 和 ASP.NET Core 1.0 RC2 后。点击开始，然后程序，选择 Visual Studio 2015 - 点击 Visual Studio 2015。点击新建，然后项目，选择 Web，并选择 ASP.NET Core Web 应用程序。输入您的项目名称并点击确定。
接下来选择 Web 应用程序。如果您不托管在云中，则可以取消选中右下角的“在云中托管”。点击确定
现在我们有了
数据库连接字符串
现在我们需要将 ASP.Net 5 项目的本地连接字符串更改为我们的 SQL Server 连接。
注意：在 ASP.NET Core 1.0 中，我们需要使用“appsettings.json”文件而不是 web.config。我们可以在 ASP.NET Core 1.0 解决方案中找到“appsettings.json”文件。
要将默认连接字符串更改为我们的 SQL 连接，请打开“appsettings.json”文件。是的，这是一个 JSON 文件，此文件默认看起来像下面的图片。
现在默认连接字符串将像这样
"ConnectionStrings": {
"DefaultConnection": "Server=(localdb)\\mssqllocaldb;Database=aspnet-Core1.0Angular2CRUDInsert-599f2ca4-119a-4fd5-a2a4-e58fb4b2e5be;Trusted_Connection=True;MultipleActiveResultSets=true"
},
Now we change this to our SQL Connection like below,
"ConnectionStrings": {
"DefaultConnection": "Server=SQLSERVERNAME;Database=StudentsDB;user id=SQLID;password=SQLPWD;Trusted_Connection=True;MultipleActiveResultSets=true;"
},
步骤 2：创建 MVC 模型以返回学生列表
我们可以通过在 Model 文件夹中添加一个新的类文件来创建模型。
右键点击 Models 文件夹并点击新建项。选择类并输入您的类名为“StudentMasters.cs”
现在在此类中，我们首先创建属性变量，添加学生。我们将在我们的 WEB API 控制器中使用它。
using System.ComponentModel.DataAnnotations;
namespace WebApplicationTestSample.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; }
}
}
步骤 3：创建 WEB API 控制器
我们可以通过在 Controller 文件夹中添加一个新的空 API 控制器来创建控制器。
右键点击 Controller 文件夹并添加控制器。选择带操作的 API 控制器，使用 Entity Framework 并点击添加
选择模型类为 StudentMasters。
选择模型类后，选择数据上下文类。这里我们选择默认的 ApplicationDbContext。请注意，我们已将默认连接字符串设置为我们的 SQL Server 数据库连接。接下来，将我们的 WEB API 控制器名称命名为 StudentMastersAPI。
我们可以看到我们的 WEB API 控制器已经创建，并且控制器还将包含默认的 Select (HttpGet) 和 Insert 方法 (HttpPost)。我们将在 Angular2 中使用这个 get 和 post 方法来选择和插入数据到数据库。
为了测试它，我们可以运行我们的项目并复制 get 方法的 api 路径，在这里我们可以看到 get 的 API 路径是 api/StudentMastersAPI/
运行程序并粘贴上述 API 路径以测试我们的输出。
步骤 4：如何添加 TypeScript JSON 配置文件
TypeScript JSON 文件指定了编译项目所需的根文件和编译器选项。要了解有关 TypeScript JSON 配置文件的更多信息，请访问以下站点
https://typescript.net.cn/docs/handbook/tsconfig-json.html ,
要创建 TypeScript JSON 文件，右键单击您的项目并单击添加新项。
选择 TypeScript JSCON 配置文件并单击确定。该文件将如下图像所示。
现在复制以下代码并替换您的配置文件。
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"target": "es5",
"sourceMap": true
步骤 5：如何使用 NPM 配置文件添加 Grunt 包
现在我们需要添加一个 NPM 配置文件，用于添加 Grunt 包来运行我们的 JavaScript。
由于我们已将其创建为 Web 应用程序，因此 NPM 配置文件将位于我们的项目中。
默认情况下，我们无法查看我们的 NPM 配置文件。NPM 配置文件将以“package.JSON”命名。要从解决方案资源管理器中查看它，请单击“显示所有文件”
现在打开“package.JSON”文件。首先我们需要将名称更改为我们的项目解决方案名称并添加我们的 grunt 包。我们可以在下面的图片中看到代码。
在这里，我们已将名称更改为我们的解决方案名称，并添加了 Grunt 包。
{
"name": "test",
"version": "0.0.0",
"private": true,
"devDependencies": {
"grunt": "1.0.1",
"grunt-contrib-copy": "1.0.0",
"grunt-contrib-uglify": "1.0.1",
"grunt-contrib-watch": "1.0.0",
"grunt-ts": "5.5.1",
"gulp": "3.8.11",
"gulp-concat": "2.5.2",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"rimraf": "2.2.8"
}
}
现在保存 package.json 文件，您应该能够看到一个 grunt 包位于 Dependencies/npm 文件夹下，它将首先被重新排序，然后安装。
正在恢复
全部安装
步骤 6：配置 Grunt 文件。
Grunt 用于构建我们项目的所有客户端资源，如 JavaScript。
第一步是向我们的项目添加一个 Grunt 文件。右键单击我们的项目，选择 Grunt 配置文件并单击添加。
创建文件后，现在我们需要编辑此文件以添加加载插件、配置插件和定义任务
在我们的 Grunt 文件中，我们首先加载我们在 npm 中添加的插件。使用 loadNpmTask，我们在这里加载 `'grunt-contrib-copy'、'grunt-contrib-uglify'、'grunt-contrib-watch'`
接下来我们配置 grunt，将 app.js 文件添加到我们的 wwwroot 文件夹中。Scripts 文件夹中的所有脚本文件结果都将添加到此 app.js 文件中。接下来我们需要将所有脚本文件从 'node_modules/' 复制到我们的本地 js 文件夹中。
watch 插件将用于检查 JavaScript 文件是否有任何更改，并使用所有新更改更新 app.js。
/*
This file in the main entry point for defining grunt tasks and using grunt plugins.
Click here to learn more. http://go.microsoft.com/fwlink/?LinkID=513275&clcid=0x409
*/
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-ts');
grunt.initConfig({
ts:
{
base:
{
src: ['Scripts/app/boot.ts', 'Scripts/app/**/*.ts'],
outDir: 'wwwroot/app',
tsconfig: './tsconfig.json'
}
},
uglify:
{
my_target:
{
files: [{
expand: true,
cwd: 'wwwroot/app',
src: ['**/*.js'],
dest: 'wwwroot/app'
}]
},
options:
{
sourceMap: true
}
},
// Copy all JS files from external libraries and required NPM packages to wwwroot/js
copy: {
main: {
files:
[{
expand: true,
flatten: true,
src: ['Scripts/js/**/*.js', 'node_modules/es6-shim/es6-shim.min.js', 'node_modules/systemjs/dist/system-polyfills.js', 'node_modules/angular2/bundles/angular2-polyfills.js', 'node_modules/systemjs/dist/system.src.js', 'node_modules/rxjs/bundles/Rx.js', 'node_modules/angular2/bundles/angular2.dev.js'],
dest: 'wwwroot/js/',
filter: 'isFile'
}]
}
},
// Watch specified files and define what to do upon file changes
watch: {
scripts: {
files: ['Scripts/**/*.js'],
tasks: ['ts', 'uglify', 'copy']
}
}
});
// Define the default task so it will launch all other tasks
grunt.registerTask('default', ['ts', 'uglify', 'copy', 'watch']);
};
步骤 7：添加依赖项以安装 Angular2 和所有其他文件
我们正在使用 NPM 在我们的 Web 应用程序中安装 Angular2。打开我们的 Package.JSON 文件并添加以下依赖项。
"dependencies": {
"@angular/http": "2.0.0-rc.1",
"angular2": "^2.0.0-beta.8",
"angular2-jwt": "0.1.16",
"angular2-meteor": "0.5.5",
"cors": "2.7.1",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"tsd": "^0.6.5",
"zone.js": "0.5.15"
},
编辑后的 Package.json 文件将如下图像所示。
保存文件并等待几秒钟以完成所有依赖项的安装。
步骤 8：如何创建我们的 Angular2 App，并使用 TypeScript 文件引导。
现在是时候创建我们的 Angular2 应用程序了。首先创建一个名为 Scripts 的文件夹。右键单击我们的项目并单击添加新文件夹，并将文件夹名称命名为“Scripts”。现在我们将在 Scripts 文件夹中创建我们的 TypeScript 文件。
要使用 Angular2，我们需要创建 2 个重要的 TypeScript 文件。
- 组件文件：我们编写 Angular 代码的地方。
- 引导文件：用于运行我们的组件应用程序。
创建 App TypeScript 文件
右键单击 Scripts 文件夹并单击添加新项。选择 TypeScript 文件并将文件命名为 App.ts，然后单击添加。
在 App.ts 文件中，我们有三个部分，第一个是
- import 部分
- 接下来是 component 部分
- 接下来是我们用于编写业务逻辑的类。
在这里，我们可以看到一个简单的基本单向绑定示例，用于在 h1 标签内部显示欢迎消息。这里。
1. import 部分： 首先我们导入要在组件中使用的 angular2 文件，这里我们导入 http 用于在我们的 Angular2 组件中使用 http 客户端，并导入 NgFor 用于循环并逐个绑定所有学生详细信息数组值，并且我们还从模型文件导入了一个名为 StudentMasters 的 TypeScript 导出类。
import { Component, Injectable, Inject} from 'angular2/core';
import { NgIf, NgFor } from 'angular2/common';
import {Http, Response, HTTP_PROVIDERS, Headers, RequestOptions} from 'angular2/http';
import { StudentMasters } from './model';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
2. 接下来是组件部分
在组件中，我们有选择器、指令和模板。选择器用于为这个应用程序命名，在我们的 html 文件中，我们使用这个选择器名称来在我们的 html 页面中显示。
在模板中我们编写代码。在模板中，我们首先创建一个表单，使用 http post 方法将学生详细信息插入数据库。在按钮点击时，我们调用 addStudentsDetails() 方法来插入学生详细信息。插入后，我们调用 getData() 方法来绑定更新的结果。
为了显示 StudentMaster 详细信息，我们在 html 表格中使用了 ngFOR。在方法中，我们使用了 http get 函数从 WEB API 加载数据并在我们的 html 页面中显示。我们已将所有设计都放在模板中。还有另一种方法，我们可以创建一个 html 文件，并将所有设计添加到该 html 页面中，然后在模板中我们可以给出 html 文件名。
@Component({
selector: "my-app",
directives: [NgFor],
template: `
<table style="background-color:#FFFFFF; border: dashed 3px #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>
<h2>Insert Student Details : </h2>
</td>
</tr>
<tr>
<td>
<table style="color:#9F000F;font-size:large" cellpadding="4" cellspacing="6">
<tr>
<td><b>Students ID: </b> </td>
<td>
<input [(ngModel)]="students.StdID" value="0" style="background-color:tan" readonly>
</td>
<td><b>Students Name: </b> </td>
<td>
<input [(ngModel)]="students.StdName" >
</td>
</tr>
<tr>
<td><b>Email: </b> </td>
<td>
<input [(ngModel)]="students.Email" >
</td>
<td><b>Phone: </b> </td>
<td>
<input [(ngModel)]="students.Phone" >
</td>
</tr>
<tr>
<td><b>Address: </b> </td>
<td>
<input [(ngModel)]="students.Address" >
</td>
<td colspan="2">
<button (click)=addStudentsDetails() style="background-color:#334668;color:#FFFFFF;font-size:large;width:200px;
border-color:#a2aabe;border-style:dashed;border-width:2px;">Save</button>
</td>
</tr>
</table>
</td>
</tr>
<tr><td> </td></tr>
<tr>
<td>
<table style="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="100" align="center">Student ID</td>
<td width="240" align="center">Student Name</td>
<td width="240" align="center">Email</td>
<td width="120" align="center">Phone</td>
<td width="340" align="center">Address</td>
</tr>
<tbody *ngFor="let std of student">
<tr>
<td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{std.StdID}}</span>
</td>
<td align="left" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{std.StdName}}</span>
</td>
<td align="left" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{std.Email}}</span>
</td>
<td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{std.Phone}}</span>
</td>
<td align="left" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{std.Address}}</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
`,
})
3. 导出类
这是主类，我们在其中进行所有业务逻辑和变量声明，以用于我们的组件模板。在此类中，我们创建了一个名为 getData() 的方法，在此方法中，我们获取 API 方法结果并将结果绑定到学生数组。在按钮点击时，我们调用 addStudentsDetails() 方法，使用 http post 方法将数据插入数据库。
export class AppComponent {
student: Array<StudentMasters> = [];
students = {};
myName: string;
constructor(@Inject(Http) public http: Http) {
this.myName = "Shanu";
this.getData();
}
getData() {
this.http.get('api/StudentMastersAPI')
.map((responseData) => {
return responseData.json();
})
.map((student: Array<any>) => {
let result: Array<StudentMasters> = [];
if (student) {
student.forEach((student) => {
result.push(new StudentMasters(student.StdID, student.StdName,
student.Email, student.Phone, student.Address));
});
}
return result;
})
.subscribe(res => this.student = res);
}
addStudentsDetails() {
var headers = new Headers();
headers.append('Content-Type', 'application/json; charset=utf-8');
this.http.post('api/StudentMastersAPI', JSON.stringify(this.students), { headers: headers }).subscribe();
alert("Student Detail Inserted");
this.getData();
}
}
接下来我们需要添加 boot.ts 文件来运行我们的应用程序。
创建 boot TypeScript 文件
右键单击 Scripts 文件夹并单击添加新项。选择 TypeScript 文件并将文件命名为 boot.ts，然后单击添加。
在 boot.ts 文件中，我们添加以下代码。这里我们首先导入 bootstrap 文件来加载和运行我们的应用程序文件，并且我们还导入了我们的应用程序组件。请注意，要导入我们的应用程序，我们需要提供与我们的应用程序 TypeScript 文件中给出的相同的类名，并在 from 中将我们的应用程序路径指定为“./app”。接下来，我们通过在 bootstrap 中添加应用程序名称 bootstrap(myAppComponent) 来运行我们的应用程序。
///<reference path="../node_modules/angular2/typings/browser.d.ts" />
import {bootstrap} from 'angular2/platform/browser'
import {ROUTER_PROVIDERS} from "angular2/router";
import {HTTP_PROVIDERS, HTTP_BINDINGS} from "angular2/http";
import {AppComponent} from './app'
bootstrap(AppComponent, [HTTP_BINDINGS, HTTP_PROVIDERS]);
创建模型 TypeScript 文件
右键单击 Scripts 文件夹并单击添加新项。选择 TypeScript 文件并将文件命名为 model.ts，然后单击添加。
我们使用此模型 TypeScript 文件创建 Studentmasters 模型并声明我们在 MVC 模型中创建的所有公共属性。
export class StudentMasters {
constructor(
public StdID: number,
public StdName: string,
public Email: string,
public Phone: string,
public Address: string
) { }
}
步骤 9：创建 HTML 文件
接下来，我们需要创建 HTML 页面以查看结果。要添加 HTML 文件，右键单击 wwwroot 文件夹并单击添加新项，将名称命名为 index.html 并单击添加。
在 HTML 文件中替换以下代码。在这里我们可以看到，首先在头部部分，我们添加了所有脚本引用文件，并在脚本中加载了我们的引导文件以运行我们的应用程序。在 body 部分，我们使用组件选择器名称显示结果。在我们的应用程序组件中，我们给出了选择器名称为“myapp1”。在此 HTML 中，要显示结果，我们添加了这样的标签：`<my-app>请稍候...</my-app>`
<html>
<head>
<title>ASP.NET Core: AngularJS 2 Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfills -->
<script src="/js/es6-shim.min.js"></script>
<script src="/js/system-polyfills.js"></script>
<!-- Angular2 libraries -->
<script src="/js/angular2-polyfills.js"></script>
<script src="/js/system.src.js"></script>
<script src="/js/Rx.js"></script>
<script src="/js/angular2.dev.js"></script>
<script src="/js/router.dev.js"></script>
<script src="/js/http.dev.js"></script>
<!-- Bootstrap via SystemJS -->
<script>
System.config
({
packages:
{
"app":
{
defaultExtension: 'js'
},
'lib': { defaultExtension: 'js' }
}
});
System.import('app/boot').then(null, console.error.bind(console));
</script>
</head>
<body>
<table style='width: 99%;table-layout:fixed;'>
<tr>
<td>
<table style="background-color:#FFFFFF;border: dashed 3px #6D7B8D; padding:10px;width: 99%;table-layout:fixed;" cellpadding="12" cellspacing="12">
<tr style="height: 30px; background-color:#f06a0a ; color:#FFFFFF ;border: solid 1px #659EC7;">
<td align="center">
<h3> SHANU ASP.NET Core1.0 Insert/Select Student Details to Database Using Angular2 and WEB API </h3>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- Application PlaceHolder -->
<my-app>Please wait...</my-app>
</td>
</tr>
</table>
</body>
</html>
那么接下来呢？我们已经成功创建了我们的第一个 Angular2 和 Asp.Net core 1.0 Web 应用程序，等等，我们还有一项待办工作才能运行我们的应用程序？是的，我们需要运行我们的 Grunt 文件，以便在我们的 wwwroot 脚本文件夹中创建所有脚本文件。
步骤 8：使用 Visual Studio 任务运行器资源管理器运行 Grunt 文件
现在我们需要使用 Visual Studio 任务运行器运行 Grunt 文件。
要查看任务运行器，请单击菜单“视图”->“其他窗口”->，然后单击“任务运行器资源管理器”。
我们也可以通过右键单击解决方案资源管理器中的 Gruntfile.js 并单击“任务运行器资源管理器”来打开任务运行器。
现在我们可以看到我们的任务运行器资源管理器。
单击 GruntFile.js 并单击左上角的刷新按钮。
现在我们可以看到所有的 GruntFile 都已添加。
右键单击别名任务下的默认值并单击“运行”。
现在我们的 Grunt 文件已在我们的项目中成功运行。当我们添加脚本文件时，我们可以看到在我们的 wwwroot 文件夹中将创建一个新的 app.js 文件。
运行程序
在这里我们可以看到所有来自 WEB API 的数据都已使用 Angular2 绑定到我们的 HTML 页面。您可以插入新的学生详细信息。同样，您可以添加更新和删除功能以执行完整的 CRUD 操作来维护学生记录。
注意：首先在您的 SQL Server 中创建数据库和表。您可以运行本文中的 SQL 脚本来创建 StudentsDB 数据库和 StudentMasters 表，并且不要忘记更改“appsettings.json”中的连接字符串。
历史
Core1Angular2CRUDTest.zip - 2016/08/06