65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET Core Angular 2 EF 1.0.1 Web API 使用模板包

syed shanu
starIconstarIconstarIconstarIconstarIcon

5.00/5 (14投票s)

2016年12月19日

CPOL

9分钟阅读

viewsIcon

38011

downloadIcon

848

在本文中，我们将介绍如何使用模板包（Entity Framework 1.0.1 和 Web API）创建我们的第一个 ASP.NET Core Angular 2 启动应用程序（.NET Core），以将数据从数据库显示到我们的 Angular2 和 ASP.NET Core 网站应用程序中。

引言

现在，使用 ASP.NET Core 模板包在 ASP.NET Core 中创建 Angular2 应用程序变得更加容易。ASP.NET Core 模板包含以下 .NET Core 项目模板集合：

  • ASP.NET Core Angular 2 启动应用程序（.NET Core）
  • ASP.NET Core MVC 启动应用程序（.NET Core）
  • 静态网站（.NET Core）
  • Vue.js with Webpack（.NET Core）

安装我们的 ASP.NET Core 模板包后，我们可以看到新的模板已添加到我们的 Visual Studio 中。

在本文中，我们将介绍如何使用模板包（Entity Framework 1.0.1 和 Web API）创建我们的第一个 ASP.NET Core Angular 2 启动应用程序（.NET Core），以将数据从数据库显示到我们的 Angular2 和 ASP.NET Core 网站应用程序中。（参考 链接）。

在本文中，我们将介绍以下内容：

  • 创建 SQL Server 中的示例数据库和表以在我们的网站应用程序中显示。
  • 如何使用模板包创建 ASP.NET Core Angular 2 启动应用程序（.NET Core）
  • 创建 EF、DBContext 类和Model 类。
  • 创建 WEB API
  • 创建我们的第一个组件 TypeScript 文件，以使用 Http 模块获取 WEB API 的 JSON 结果。
  • 创建我们的第一个组件 HTML 文件以绑定最终结果。

请确保您已在计算机上安装了所有先决条件。如果尚未安装，请一个接一个地下载并安装所有。

  1. 首先，从此 链接下载并安装 Visual Studio 2015 Update 3。
  2. 如果您有 Visual Studio 2015 但尚未更新到 Update 3，请从此 链接下载并安装 Visual Studio 2015 Update 3。
  3. 下载并安装 .NET Core 1.0.1。
  4. 下载并安装 TypeScript 2.0。
  5. 下载并安装 Node.js v4.0 或更高版本。我已安装 V6.9.1（下载 链接）。

在开始 ASP.NET Core 模板包之前，请确保您已安装所有列出的工具。

现在，是时候安装 ASP.NET Core 模板包了。安装 ASP.NET Core 模板包有两种方法。

安装 ASP.NET Core 模板包的第一种方法

从此 链接下载 ASP.NET Core 模板包 visz 文件。

安装 ASP.NET Core 模板包的第二种方法

打开 Visual Studio 2015 >> 工具 >> 选择“扩展和更新”。

在右侧，单击搜索，输入“ASP.NET Core Template Pack”并下载模板。

安装 ASP.NET Core 模板包。

安装完成后，重启 Visual Studio 2015。现在，我们可以看到 ASP.NET Core 模板包已添加到 Web 项目模板下。

Using the Code

现在，让我们看看如何创建我们的第一个 ASP.NET Core Angular 2 应用程序。

步骤 1：创建数据库和表

我们将使用我们的 SQL Server 数据库来处理 WEB API 和 EF。首先，我们创建一个名为 StudentsDB 的数据库和一个名为 StudentMaster 的表。以下是创建数据库表和在我们的表中插入示例记录的 SQL 脚本。在本地 SQL Server 中运行以下查询，以创建将用于我们项目的数据库和表。

USEMASTER  
GO  
--1) Check  
for the Database Exists.If the database is exist then drop and create new DB  
IFEXISTS(SELECT[name] FROMsys.databasesWHERE[name] = 'StudentsDB')  
DROPDATABASEStudentsDB  
GO  
CREATEDATABASEStudentsDB  
GO  
USEStudentsDB  
GO  
--1) //////////// StudentMasters  
IFEXISTS(SELECT[name] FROMsys.tablesWHERE[name] = 'StudentMasters')  
DROPTABLEStudentMasters  
GO  
CREATETABLE[dbo].[StudentMasters](  
        [StdID] INTIDENTITYPRIMARYKEY, [StdName][varchar](100) NOTNULL, _
        [Email][varchar](100) NOTNULL, [Phone][varchar](20) NOTNULL, _
        [Address][varchar](200) NOTNULL  
    )  
    --insert sample data to Student Master table  
INSERTINTO[StudentMasters]([StdName], [Email], [Phone], [Address])  
VALUES('Shanu', 'syedshanumcain@gmail.com', '01030550007', 'Madurai,India')  
INSERTINTO[StudentMasters]([StdName], [Email], [Phone], [Address])  
VALUES('Afraz', 'Afraz@afrazmail.com', '01030550006', 'Madurai,India')  
INSERTINTO[StudentMasters]([StdName], [Email], [Phone], [Address])  
VALUES('Afreen', 'Afreen@afreenmail.com', '01030550005', 'Madurai,India')  
select * from[StudentMasters]

步骤 2：创建 ASP.NET Core Angular 2 应用程序

安装完上述所有先决条件和 ASP.NET Core 模板后，在桌面上单击开始 >> 程序 >> Visual Studio 2015 >> Visual Studio 2015。单击新建 >> 项目。选择Web >> ASP.NET Core Angular 2 Starter。输入您的项目名称，然后单击确定。

创建 ASP.NET Core Angular 2 应用程序后，请稍等几秒钟。您将看到所有依赖项都在自动恢复。

ASP.NET Core 模板包解决方案中的新增功能？

WWWroot

我们可以看到所有的 CSS、JS 文件都已添加到“dist”文件夹下。“main-client.js”文件是重要的文件，因为所有 Angular2 的结果都将被编译，并将结果从这个“js”文件加载到我们的 HTML 文件中。

ClientApp 文件夹

我们可以在项目解决方案中看到一个名为 Client App 的新文件夹。此文件夹包含所有与 Angular2 相关的应用程序，如模块、组件等。我们可以在此文件夹下添加所有与 Angular 2 相关的模块、组件、模板和 HTML 文件。我们可以在本文下面的内容中详细了解如何创建自己的 Angular2 应用程序。

在 app 文件夹下的 Components 文件夹中，我们可以看到许多子文件夹，如 app、counter、fetchdata、home 和 navmenu。默认情况下，所有这些示例应用程序都已创建，当我们运行应用程序时，可以看到所有示例 Angular2 应用程序的结果。

当我们运行应用程序时，可以看到左侧是导航，右侧是数据。所有 Angular2 示例都将从上面的文件夹加载。

Controllers 文件夹

这是我们的 MVC Controller 文件夹，我们可以在此文件夹中创建 MVC 和 Web API Controller。

View 文件夹

这是我们的 MVC View 文件夹。

其他重要文件

我们还可以看到其他重要的 ASP.NET Core 文件，例如：

project.json

ASP.NET Core 依赖项列表可以在此文件中找到。我们将在该文件的依赖项部分添加我们的 Entity Framework。

package.json

这是另一个重要文件，因为所有 Angular2 相关的依赖项列表都将在此处添加。默认情况下，所有与 Angular2 相关的依赖项都已添加到 ASP.NET Core 模板包中。

appsettings.json

我们可以在此 appsetting.json 文件中添加我们的数据库连接字符串。

我们将使用以上所有内容来创建、构建和运行我们的 Angular 2 结合 ASP.NET Core 模板包、WEB API 和 EF 1.0.1 项目。

我们可以在此 appsetting.json 文件中添加我们的数据库连接字符串。

我们将使用以上所有内容来创建、构建和运行我们的 Angular 2 结合 ASP.NET Core 模板包、WEB API 和 EF 1.0.1 项目。

步骤 3：创建 Entity Framework

添加 Entity Framework 包。

要将我们的 Entity Framework 包添加到 ASP.NET Core 应用程序中，请打开 Project.JSON 文件，并在 dependencies 部分添加以下行。

注意：此处我们使用了 EF 版本 1.0.1。

"Microsoft.EntityFrameworkCore.SqlServer": "1.0.1",  
"Microsoft.EntityFrameworkCore.Tools": "1.0.0-preview2-final"

保存 project.json 文件后，我们可以看到引用已恢复。

几秒钟后，我们可以看到 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 类。

创建 Student 的 Model 类

我们可以通过在 DataFolder 中添加一个新的类文件来创建一个模型。右键单击 Data 文件夹，然后单击添加 > 单击类。将类名输入为 StudentMasters，然后单击添加。

现在在这个类中，我们首先创建一个 property 变量，并添加 student。我们将在 WEB API 控制器中使用它。

using System;  
usingSystem.Collections.Generic;  
usingSystem.Linq;  
usingSystem.Threading.Tasks;  
usingSystem.ComponentModel.DataAnnotations;  
namespace Angular2ASPCORE.Data {  
    publicclassStudentMasters {  
        [Key]  
        publicintStdID {  
            get;  
            set;  
        }  
        [Required]  
        [Display(Name = "Name")]  
        publicstringStdName {  
            get;  
            set;  
        }  
        [Required]  
        [Display(Name = "Email")]  
        publicstring Email {  
            get;  
            set;  
        }  
        [Required]  
        [Display(Name = "Phone")]  
        publicstring Phone {  
            get;  
            set;  
        }  
        publicstring Address {  
            get;  
            set;  
        }  
    }  
}

创建数据库上下文

DBContext 是用于建立数据库连接的 Entity Framework 类。

我们可以通过在 Data 文件夹中添加一个新的类文件来创建一个 DBContext 类。右键单击 Data 文件夹，然后单击添加 > 单击类。将类名输入为 StudentContext，然后单击添加。

在这个类中，我们继承 DbContext 并为我们的 students 表创建 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;  
        }  
    }  
}

Startup.cs

现在我们需要添加我们的数据库连接字符串和提供程序（SQL SERVER）。要添加此项，我们在 Startup.cs 文件的 ConfigureServices 方法下添加以下代码。

services.AddDbContext < studentContext > (options =>  
    options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));

步骤 4：创建 Web API

要创建我们的 WEB API Controller，请右键单击 Controllers 文件夹。单击添加，然后单击新建项。

单击右侧的ASP.NET > 单击Web API Controller Class。输入名称为“StudentMastersAPI.cs”，然后单击添加。

在此，我们仅使用 Get 方法从数据库获取所有学生结果，并将最终结果绑定到 Angular2 到 HTML 文件。

在这里，仅在 web API 类中，添加 get 方法以获取所有 student 详细信息。以下是使用 WEB API 获取所有 student 结果的代码。

using System;  
usingSystem.Collections.Generic;  
usingSystem.Linq;  
usingSystem.Threading.Tasks;  
usingMicrosoft.AspNetCore.Mvc;  
using Angular2ASPCORE.Data;  
usingMicrosoft.EntityFrameworkCore;  
usingMicrosoft.AspNetCore.Http;  
// For more information on enabling Web API for empty projects, 
// visit http://go.microsoft.com/fwlink/?LinkID=397860  
  
namespace Angular2ASPCORE.Controllers {  
    [Produces("application/json")]  
    [Route("api/StudentMastersAPI")]  
    publicclassStudentMastersAPI: Controller {  
        privatereadonlystudentContext _context;  
  
        publicStudentMastersAPI(studentContext context) {  
            _context = context;  
        }  
  
        // GET: api/values  
  
        [HttpGet]  
        [Route("Student")]  
        publicIEnumerable < StudentMasters > GetStudentMasters() {  
            return _context.StudentMasters;  
        }   
    }  
}

要进行测试，我们可以运行我们的项目并复制 get 方法的 API 路径；在这里，我们可以看到 get 方法的 API 路径是 api/StudentMastersAPI/Student。

运行程序并粘贴上述 API 路径以测试我们的输出。

使用 Angular2

我们将所有与 Angular2 相关的应用、模块、服务、组件和 HTML 模板都放在 ClientApp/App 文件夹下。

我们在 app 文件夹下创建“students”文件夹，以创建用于显示 Student 详细信息的 TypeScript 和 HTML 文件。

步骤 5：创建我们的第一个组件 TypeScript

右键单击 student 文件夹，然后单击添加新项。从左侧选择客户端脚本，然后选择TypeScript 文件，将文件名命名为“students.component.ts”，然后单击添加。

在 students.component.ts 文件中，我们有三个部分：

  1. import 部分
  2. 组件部分
  3. 用于编写业务逻辑的类。

首先，我们导入将在组件中使用的 Angular 文件——在这里，我们导入 http 以在我们的 Angular2 组件中使用 http 客户端。

在组件中，我们有选择器和模板。选择器用于为此应用程序命名，在我们的 html 文件中，我们使用此选择器名称在我们的 html 页面中显示。

在模板中，我们指定我们的输出 html 文件名。这里我们将创建一个名为“students.component.html”的 html 文件。

Export 类是主类，我们在其中进行所有业务逻辑和变量声明，以便在我们的组件模板中使用。在此类中，我们获取 API 方法结果并将结果绑定到 student 数组。

import {  
    Component  
} from '@angular/core';  
import {  
    Http  
} from "@angular/http";  
@Component({  
    selector: 'students',  
    template: require('./students.component.html')  
})  
  
exportclassstudentsComponent {  
    public student: StudentMasters[] = [];  
    myName: string;  
    constructor(http: Http) {  
        this.myName = "Shanu";  
        http.get('/api/StudentMastersAPI/Student').subscribe(result => {  
            this.student = result.json();  
        });  
    }  
}  
exportinterfaceStudentMasters {  
    stdID: number;  
    stdName: string;  
    email: string;  
    phone: string;  
    address: string;  
}

步骤 6：创建我们的第一个组件 HTML 文件

右键单击 student 文件夹，然后单击添加新项。从左侧选择客户端脚本，然后选择 html 文件，将文件名命名为“students.component.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>
<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="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 StudentMasters  of student">
        <tr>
            <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>
    </tbody>
</table>

步骤 7：添加 Students 导航菜单

我们可以在现有菜单中添加我们新创建的 student 详细信息菜单。

要添加新的导航菜单，请在 navmenumenu 下打开“navmenu.component.html”。编写以下代码以添加 students 的导航菜单链接。

<li[routerLinkActive]="['link-active']">  
    <a[routerLink]="['/students']">  
        <spanclass='glyphiconglyphicon-th-list'>  
            </span> Students  
     </a>  
</li>

步骤 8：App Module

App Module 是所有文件的根目录，我们可以在 ClientApp\app 下找到 app.module.ts，并导入我们的 students 组件。

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' }
        ])
    ]
})
export class AppModule {
}

步骤 9：构建和运行应用程序

构建并运行应用程序，您将看到我们的 Student 页面将加载所有 Student 信息。

关注点

首先，在您的 SQL Server 中创建数据库和表。您可以运行本文中的 SQL 脚本来创建 StudentsDB 数据库和 StudentMasters 表，并且不要忘记在“appsettings.json”中更改连接字符串。

历史

  • 2016 年 12 月 20 日：初始版本
ASP.NET Core Angular 2 EF 1.0.1 Web API 使用模板包 - CodeProject - 代码之家
© . All rights reserved.