ASP.NET Core, Angular 2 主从详情 HTML 网格（使用 Web API 和 EF 1.0.1）
4.94/5 (12投票s)
在本文中，您将学习如何使用 Web API 和 EF 1.0.1 创建 ASP.NET Core、Angular 2 主从详情 HTML 网格。
引言
在本文中，让我们看看如何使用模板包、Entity Framework 1.0.1 和 Web API 创建我们自己的 ASP.NET Core、Angular 2 主从详情 HTML 网格，将数据库中的主表和从表数据显示到我们的 Angular2 和 ASP.NET Core Web 应用程序中。
请阅读我之前的文章，其中深入介绍了如何开始使用 ASP.NET Core Angular 2 EF 1.0.1 Web API（使用模板包）。
在本文中，让我们看看
- 创建示例数据库以及 SQL Server 中的学生主表和从表，以便在我们的 Web 应用程序中显示。
- 如何使用模板包创建 ASP.NET Core Angular 2 入门应用程序（.NET Core）。
- 创建 EF、DBContext 类和 Model 类。
- 创建 Web API。
- 创建我们的第一个组件 TypeScript 文件，以使用 HTTP 模块获取 Web API JSON 结果。
- 创建我们的第一个组件 HTML 文件，将数据绑定到主从详情 HTML 网格。
本文将介绍如何创建主/从表，并将主表相关的详细信息绑定到内部 HTML 表中，以将输出显示为主/从网格。在此文中，我们使用了学生主表和学生从表的关系来显示主/从网格。在学生主表中，我们存储学生 ID、姓名、电子邮件、电话和地址。在学生从表中，我们存储学生的期末考试成绩，用于显示学生的专业、学习年级和学期以及成绩详情。
在下面的图像中，我们可以看到，当用户单击学生 ID“2”时，就会显示下一个详细信息网格，以按专业、年级、学期和成绩详细显示学生成绩。
在这里，我们按每个学生 ID 显示学生详细信息。
必备组件
请确保您的计算机上已安装所有以下先决条件。如果没有，请逐一下载并安装所有这些。
- 首先，从此 链接 下载并安装 Visual Studio 2015 Update 3。
- 如果您已安装 Visual Studio 2015 但尚未更新到 Update 3，请从此 链接 下载并安装 Visual Studio 2015 Update 3。
- 下载 并安装 .NET Core 1.0.1
- 下载 并安装 TypeScript 2.0
- 下载 并安装 Node.js v4.0 或更高版本。我已安装 V6.9.1
- 下载 并安装 ASP.NET Core 模板包 visz 文件
使用代码
步骤 1：创建数据库和表
我们将创建一个学生主表和学生从表，用于主从网格的数据绑定。
以下是创建数据库、表和示例插入查询的脚本。在您的 SQL Server 中运行此脚本。我使用的是 SQL Server 2014。
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
--CREATEDATABASEStudentsDB
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]
IF EXISTS(SELECT[name] FROM sys.tables WHERE[name] = 'StudentDetails')
DROP TABLE StudentDetails
GO
CREATE TABLE[dbo].[StudentDetails](
[StdDtlID] INT IDENTITY PRIMARY KEY,
[StdID] INT ,
[Major][varchar](100) NOT NULL,
[Year][varchar](30) NOT NULL,
[Term][varchar](30) NOT NULL,
[Grade][varchar](10) NOT NULL
)
INSERT INTO[StudentDetails]([StdID], [Major], [Year], [Term],[Grade])
VALUES(1,'Computer Science','First Year','First Term','A')
INSERT INTO[StudentDetails]([StdID], [Major], [Year], [Term],[Grade])
VALUES(1,'Computer Science','First Year','Second Term','B')
INSERT INTO[StudentDetails]([StdID], [Major], [Year], [Term],[Grade])
VALUES(1,'Computer Science','Second Year','First Term','C')
INSERT INTO[StudentDetails]([StdID], [Major], [Year], [Term],[Grade])
VALUES(2,'Computer Engineer','Third Year','First Term','A')
INSERT INTO[StudentDetails]([StdID], [Major], [Year], [Term],[Grade])
VALUES(2,'Computer Engineer','Third Year','Second Term','A')
INSERT INTO[StudentDetails]([StdID], [Major], [Year], [Term],[Grade])
VALUES(3,'English','First Year','First Term','C')
INSERT INTO[StudentDetails]([StdID], [Major], [Year], [Term],[Grade])
VALUES(13,'Economics','First Year','First Term','A')
select * from StudentDetails
第 2 步 创建 ASP.NET Core Angular 2 应用程序
安装完所有先决条件和 ASP.NET Core 模板后，在桌面上单击“开始”>>“程序”>>“Visual Studio 2015”>>“Visual Studio 2015”。单击“新建”>>“项目”。选择“Web”>>“ASP.NET Core Angular 2 入门”。输入您的项目名称，然后单击“确定”。
Angular2, ASP .NET Core 1.0.1, Entity Framework, en-US, has code, has image, has See Also, Has TOC, MVC, mvp author, SYED SHANU, Web API 2
我们将在项目中使用所有这些来创建、构建和运行我们的 Angular 2 应用程序（搭配 ASP.NET Core 模板包、Web API 和 EF 1.0.1）。
第 3 步 创建 Entity Framework
添加 Entity Framework 包。
要将 Entity Framework 包添加到我们的 ASP.NET Core 应用程序中，请打开 Project.JSON 文件，在 dependencies 中添加以下行。
"Microsoft.EntityFrameworkCore.SqlServer": "1.0.1",
"Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final"
当我们保存 project.json 文件时，可以看到 Reference 正在被还原。
几秒钟后，我们可以看到 Entity Framework 包已还原，并且所有引用都已添加。
添加连接字符串
要添加与 SQL 连接的连接字符串，请打开“appsettings.json”文件。是的，这是一个 JSON 文件，默认情况下，此文件看起来如下面的图像所示。
在此 appsettings.json 文件中添加我们的连接字符串
"ConnectionStrings": {
"DefaultConnection": "Server=YOURDBSERVER;Database=StudentsDB;user id=SQLID;password=SQLPWD;Trusted_Connection=True;MultipleActiveResultSets=true;"
}
注意：请根据您的本地连接更改 SQL 连接字符串。
下一步是创建一个名为“Data”的文件夹来创建我们的模型和 DBContext 类。
创建学生主表模型类
我们可以通过在 Data 文件夹中添加一个新类文件来创建模型。右键单击 Data 文件夹，然后单击“添加”>“类”。将类名输入为 StudentMasters，然后单击“添加”。
现在，在此类中，我们首先创建属性变量，添加 studentMaster。我们将在 WEB API 控制器中使用它。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.ComponentModel.DataAnnotations;
namespace Angular2ASPCORE.Data
{
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; }
}
}
创建学生从表模型类
我们可以通过在 Data 文件夹中添加一个新类文件来创建模型。右键单击 Data 文件夹，然后单击“添加”>“类”。将类名输入为 StudentDetails，然后单击“添加”。
现在，在此类中，我们首先创建属性变量，添加 StudentDetails。我们将在 WEB API 控制器中使用它。
public class StudentDetails
{
[Key]
public int StdDtlID { get; set; }
[Required]
[Display(Name = "StudentID")]
public int StdID { get; set; }
[Required]
[Display(Name = "Major")]
public string Major { get; set; }
[Required]
[Display(Name = "Year")]
public string Year { get; set; }
[Required]
[Display(Name = "Term")]
public string Term { get; set; }
public string Grade { get; set; }
}
创建数据库上下文
DBContext 是用于建立数据库连接的 Entity Framework 类。我们可以通过在 Data 文件夹中添加一个新类文件来创建 DBContext 类。右键单击 Data 文件夹，然后单击“添加”>“类”。将类名输入为 StudentContext，然后单击“添加”。
在此类中，我们继承 DbContext 并为我们的 studentMasters 和 StudentDetails 表创建了 DbSet。
using System;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Threading.Tasks;
usingMicrosoft.EntityFrameworkCore;
namespace Angular2ASPCORE.Data {
publicclassstudentContext: DbContext {
publicstudentContext(DbContextOptions < studentContext > options): base(options) {}
publicstudentContext() {}
publicDbSet < StudentMasters > StudentMasters {
get;
set;
}
publicDbSet < StudentDetails > StudentDetails {
get;
set;
}
}
}
Startup.CS
现在，我们需要添加我们的数据库连接字符串和提供程序（SQL Server）。要添加此项，请在 Startup.cs 文件的 ConfigureServices 方法下添加以下代码。
// Add Entity framework .
services.AddDbContext<studentContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
第 4 步 创建 Web API
要创建我们的 WEB API 控制器，请右键单击 Controllers 文件夹。单击“添加”，然后单击“新建项”。
在右侧单击 ASP.NET > 单击 Web API Controller Class。将名称输入为“StudentMastersAPI.cs”，然后单击“添加”。
在这里，我们仅使用 Get 方法从数据库获取所有学生结果，并使用 Angular2 将最终结果绑定到 html 文件。
在此 Web API 中，我们可以同时获取学生主表、学生从表以及按条件（学生 ID）加载的学生从表。
[Produces("application/json")]
[Route("api/StudentMastersAPI")]
public class StudentMastersAPI : Controller
{
private readonly studentContext _context;
public StudentMastersAPI(studentContext context)
{
_context = context;
}
// GET: api/values
// For Student Master
[HttpGet]
[Route("Student")]
public IEnumerable<StudentMasters> GetStudentMasters()
{
return _context.StudentMasters;
}
// GET: api/values
// For Student Detail
[HttpGet]
[Route("Details")]
public IEnumerable<StudentDetails> GetStudentDetails()
{
return _context.StudentDetails;
}
// For Student Detail with studentid to load by student ID
// GET api/values/5
[HttpGet]
[Route("Details/{id}")]
public IEnumerable<StudentDetails> GetStudentDetails(int id)
{
return _context.StudentDetails.Where(i => i.StdID == id).ToList();
}
}
为了测试它，我们可以运行我们的项目并复制 get 方法的 API 路径。在这里，我们可以看到用于获取的 API 路径是 api/StudentMastersAPI/Student。运行程序并将上面的 API 路径粘贴到其中以测试我们的输出。
按学生 ID 获取学生详细信息。在这里，我们可以看到已加载所有学生 ID=1 的学生详细信息。 api/StudentMastersAPI/Details/1
使用 Angular2
我们在 ClientApp/App 文件夹下创建所有 Angular 2 相关的应用程序模块、服务、组件和 HTML 模板。
我们在 app 文件夹下创建“students”文件夹，以创建用于显示学生详细信息的 TypeScript 和 HTML 文件。
第 5 步 创建我们的第一个组件 TypeScript
右键单击 Students 文件夹，然后单击“添加新项”。从左侧选择“客户端”。选择 TypeScript 文件，并将文件名命名为“students.component.ts”，然后单击“添加”。
在 students.component.ts 文件中，我们有三个部分，第一部分是，
- import 部分
- 接下来是 component 部分
- 接下来，我们有用于编写业务逻辑的类。首先，我们导入要在组件中使用的 Angular 文件，这里我们导入 http 以在我们的 Angular2 组件中使用 http 客户端。
在组件中，我们有选择器和模板。选择器用于为该应用程序命名，在我们的 html 文件中，我们使用此选择器名称在我们的 html 页面中显示。
在模板中，我们指定了我们的输出 html 文件名。这里我们将创建一个名为“students.component.html”的 html 文件。
Export Class 是主类，我们在其中进行所有业务逻辑和变量声明，以供组件模板使用。在此类中，我们获取 API 方法结果，并将结果绑定到 student 数组。
在这里，我们首先从 Web API 获取所有学生主表数据以绑定到我们的 html 页面。我们还创建了一个名为“getStudentsDetails”的函数，我们将学生 ID 传递给此函数，以仅从学生详细信息表中加载选定的学生 ID 相关数据。我们从每个学生主表的按钮单击事件中调用此函数。
import { Component } from '@angular/core';
import { Http } from "@angular/http";
@Component({
selector: 'students',
template: require('./students.component.html')
})
export class studentsComponent {
public student: StudentMasters[] = [];
public studentdetails: StudentDetails[] = [];
myName: string;
activeRow: string = "0";
constructor(public http: Http) {
this.myName = "Shanu";
this.getStudentMasterData();
}
getStudentMasterData() {
this.http.get('/api/StudentMastersAPI/Student').subscribe(result => {
this.student = result.json();
});
}
getStudentsDetails(StudID) {
this.http.get('/api/StudentMastersAPI/Details/' + StudID).subscribe(result => {
this.studentdetails = result.json();
});
this.activeRow = StudID;
}
}
//// For Student Master
export interface StudentMasters {
stdID: number;
stdName: string;
email: string;
phone: string;
address: string;
}
// For Student Details
export interface StudentDetails {
StdDtlID: number;
stdID: number;
Major: string;
Year: string;
Term: string;
Grade: string;
}
第 6 步 创建我们的第一个组件 HTML 文件
右键单击 Students 文件夹，然后单击“添加新项”。从左侧选择“客户端”，然后选择 html 文件。将文件名命名为“students.component.html”，然后单击“添加”。
编写以下 html 代码以将结果绑定到我们的 html 页面。
在这里，我们首先创建了一个 HTML 表，用于加载带有详细信息按钮的学生主表数据。
在单击详细信息按钮时，我们加载所选学生的学生详细信息，并根据行绑定结果。
<h1>Angular 2 with ASP.NET Core Template Pack, WEB API and EF 1.0.1 </h1>
<hr />
<h2>My Name is : {{myName}}</h2>
<hr />
<h1>Students Details :</h1>
<p *ngIf="!student"><em>Loading Student Details please Wait ! ...</em></p>
<!--<pre>{{ studentdetails | json }}</pre>-->
<table class='table' style="background-color:#FFFFFF; border:2px #6D7B8D; padding:5px;width:99%;table-layout:fixed;" cellpadding="2" cellspacing="2" *ngIf="student">
<tr style="height: 30px; background-color:#336699 ; color:#FFFFFF ;border: solid 1px #659EC7;">
<td width="80" align="center"></td>
<td width="80" 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 StudentMasters of student">
<tr><td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<button (click)=getStudentsDetails(StudentMasters.stdID) style="background-color:#334668;color:#FFFFFF;font-size:large;width:80px;
border-color:#a2aabe;border-style:dashed;border-width:2px;">
Detail
</button>
</td>
<td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{StudentMasters.stdID}}</span>
</td>
<td align="left" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{StudentMasters.stdName}}</span>
</td>
<td align="left" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{StudentMasters.email}}</span>
</td>
<td align="center" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{StudentMasters.phone}}</span>
</td>
<td align="left" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<span style="color:#9F000F">{{StudentMasters.address}}</span>
</td>
</tr>
<tr *ngIf="activeRow==StudentMasters.stdID">
<td colspan="6" style="border: solid 1px #659EC7; padding: 5px;table-layout:fixed;">
<table class='table' style="background-color:#ECF3F4; border:2px #6D7B8D; padding:5px;width:99%;table-layout:fixed;" cellpadding="2" cellspacing="2" *ngIf="studentdetails">
<tr style="height: 30px; background-color:#659EC7 ; color:#FFFFFF ;border: solid 1px #659EC7;">
<td width="100" align="center"><Strong>Student Detail --></Strong> </td>
<td width="240" align="center">Major</td>
<td width="240" align="center">Year</td>
<td width="120" align="center">Term</td>
<td width="340" align="center">Grade</td>
</tr>
<tbody *ngFor="let stddetails of studentdetails">
<tr>
<td width="100" align="center"></td>
<td width="240" align="center">{{stddetails.major}}</td>
<td width="240" align="center">{{stddetails.year}}</td>
<td width="120" align="center">{{stddetails.term}}</td>
<td width="340" align="center">{{stddetails.grade}} </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
第 7 步 添加学生导航菜单
我们可以在现有菜单中添加新创建的学生详细信息菜单。
要添加新的导航菜单，请打开“navmenu.component.html”下的“navmenumenu”。编写以下代码以添加我们的学生导航菜单链接。在这里，我们删除了现有的“计数和获取”菜单。
<li[routerLinkActive]="['link-active']">
<a[routerLink]="['/students']">
<spanclass='glyphiconglyphicon-th-list'>
</span> Students </a>
</li>
第 8 步 App 模块
App Module 是所有文件的根目录，我们可以在 ClientApp\app 下找到 app.module.ts 来导入我们的 students 组件。
import {
studentsComponent
} from './components/students/students.component';
Next in @NGModule add studentsComponent
In routing add our students path.
The code will be looks like this
import {
NgModule
} from '@angular/core';
import {
RouterModule
} from '@angular/router';
import {
UniversalModule
} from 'angular2-universal';
import {
AppComponent
} from './components/app/app.component'
import {
NavMenuComponent
} from './components/navmenu/navmenu.component';
import {
HomeComponent
} from './components/home/home.component';
import {
FetchDataComponent
} from './components/fetchdata/fetchdata.component';
import {
CounterComponent
} from './components/counter/counter.component';
import {
studentsComponent
} from './components/students/students.component';
@NgModule({
bootstrap: [AppComponent],
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
studentsComponent
],
imports: [
UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too.
RouterModule.forRoot([{
path: '',
redirectTo: 'home',
pathMatch: 'full'
}, {
path: 'home',
component: HomeComponent
}, {
path: 'counter',
component: CounterComponent
}, {
path: 'fetch-data',
component: FetchDataComponent
}, {
path: 'students',
component: studentsComponent
}, {
path: '**',
redirectTo: 'home'
}])
]
})
exportclassAppModule {}
第 9 步 构建并运行应用程序
构建并运行应用程序。您可以看到我们的学生主/从页面将加载所有学生、主表和从表信息。
关注点
首先，在您的 SQL Server 中创建数据库和表。您可以运行本文中的 SQL 脚本来创建 StudentsDB 数据库以及 StudentMasters 和 StudentDetails 表。另外，不要忘记在“appsettings.json”中更改连接字符串。
历史
Angular2AspCoreMasterDetail.zip - 2017/01/05