T4 SVG Markdown Typescript Text Visual Studio 2013 JSON CSS XML HTML Javascript ASP.NET C#

Angular 4 结合 ASP.NET WEB API 实现插入、更新、删除

Sujeet Bhujbal

4.27/5 (7投票s)

2018 年 9 月 20 日

CPOL

4分钟阅读

46622

1158

Angular 4 结合 ASP.NET WEB API 实现插入、更新、删除

下载应用程序 - 966.9 KB

引言

Angular 4 目前非常流行，对于初学者来说，我将介绍 Angular 4 的新特性，并通过一个 Angular 4 结合 ASP.NET Web API 的实际示例，演示如何插入、删除和显示数据。

本文将通过示例演示以下内容：

创建 ASP.NET Web API 项目的步骤
Angular 4 的先决条件和设置
如何创建 Angular 4 应用程序并安装 Angular 4 包
如何创建 Angular 4 的服务和组件
如何从服务器端（Web API）获取数据
如何使用 Angular 4 将服务器端数据绑定/加载/填充到 HTML 页面
如何使用 Angular 4 数据绑定在视图中执行插入、编辑、更新和删除操作

什么是 Angular

Angular 是由 Google 开发的开源框架。

Angular 4 是 Angular 的最新版本。它是一个前端 Web 应用程序平台。

Angular 4 的新特性

减小体积，提高性能
分离的动画包
ngIf 配合 else：您可以在模板中使用 else 语法。
As：引入了 new 关键字，As 关键字 允许将结果存储在模板的变量中，以便在元素中使用。
Titlecase：Angular 4 引入了一个新的 titlecase 管道。此管道将每个单词的首字母转换为大写。
Http：向 HTTP 请求添加搜索参数已得到简化。
Validators：添加了新的验证器，如 required、minLength、maxLength 和 pattern。电子邮件验证器可帮助您验证输入是否为有效电子邮件。

你需要的东西

具备 Angular 的基础知识
Angular CLI

必备组件

节点
Npm
Angular CLI
Typescript
文本编辑器 - Visual Studio Code

请按照以下步骤安装，使用 Visual Studio Code 或命令提示符。

节点
Npm
Angular CLI
Typescript
Visual Studio Code

Angular 4 设置

验证 Node 版本

node -v
npm –v

安装 Angular CLI

npm install -g @angular/cli

TypeScript 安装

首先，使用以下命令检查 TypeScript 版本。

tsc –version

如果 TypeScript 未安装，则使用命令：

npm install –g typescript

步骤 1：开始 ASP.NET Web API

创建数据库 WebAPIDB，结构如下：

CREATE TABLE [dbo].[Employee] (
    [EmployeeID] INT          IDENTITY (1, 1) NOT NULL,
    [FirstName]  VARCHAR (50) NULL,
    [LastName]   VARCHAR (50) NULL,
    [EmpCode]    VARCHAR (50) NULL,
    [Position]   VARCHAR (50) NULL,
    [Office]     VARCHAR (50) NULL,
    CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED ([EmployeeID] ASC)
);

从数据库生成实体模型，名称为 DBModel.edmx。

添加 Web API 控制器

public class EmployeeController : ApiController
   {
       private MyDBEntities db = new MyDBEntities(); 
       public IQueryable<Employee> GetEmployees()
       {
           return db.Employees;
       } 
       public IHttpActionResult PutEmployee(int id, Employee employee)
       { 
           if (id != employee.EmployeeID)
           {
               return BadRequest();
           } 
           db.Entry(employee).State = EntityState.Modified;

           try
           {
               db.SaveChanges();
           }
           catch (DbUpdateConcurrencyException)
           {
               if (!EmployeeExists(id))
               {
                   return NotFound();
               }
               else
               {
                   throw;
               }
           } 
           return StatusCode(HttpStatusCode.NoContent);
       } 
       [ResponseType(typeof(Employee))]
       public IHttpActionResult PostEmployee(Employee employee)
       {
           db.Employees.Add(employee);
           db.SaveChanges(); 
           return CreatedAtRoute("DefaultApi", new { id = employee.EmployeeID }, employee);
       }

       [ResponseType(typeof(Employee))]
       public IHttpActionResult DeleteEmployee(int id)
       {
           Employee employee = db.Employees.Find(id);
           if (employee == null)
           {
               return NotFound();
           } 
           db.Employees.Remove(employee);
           db.SaveChanges(); 
           return Ok(employee);
       }

       protected override void Dispose(bool disposing)
       {
           if (disposing)
           {
               db.Dispose();
           }
           base.Dispose(disposing);
       }

       private bool EmployeeExists(int id)
       {
           return db.Employees.Count(e => e.EmployeeID == id) > 0;
       }
   }

在上面的类中，我们有以下方法：

GetEmployee() 方法将以 JSON 格式返回所有员工。
PostEmployee() 方法将向数据库添加一个新的 employee。
DeleteEmployee() 方法将删除现有员工。

安装 Swagger 包 Swashbuckle

使用 Swagger 测试 Web API

步骤 2：开始 Angular 4

步骤 1

创建一个名为 EmployeeApplication 的文件夹。在 Visual Studio Code 中打开此文件夹。此文件夹将用作创建应用程序所需所有文件的工作区。

使用 Angular CLI 可以轻松创建新的 Angular 项目，方法如下：

转到“视图”->“集成终端”。

Cd EmployeeApplication

$ ng new EmployeeApplication

从命令提示符运行以下命令：

npm install

要在本地运行应用程序，请在您新创建的项目中运行以下命令：

ng serve

打开 Chrome 浏览器，输入地址：https://:4200/

使用以下命令创建新的 Employee Service：

ng generate service Employee

EmployeeService.js 文件用于通过 .$http` 调用服务器端代码。在 EmployeeService.js 文件中，我们创建了一个名为 EmployeeService 的 Angular 服务。为了调用 Web API EmployeeControllers 的 insert、update、delete 功能，我们在 EmployeeService.js 中创建了三个函数。

我们在服务中创建了以下方法来调用服务器端代码：

postEmployee()：此方法会将数据发布到服务器。
getEmployeeList()：此方法将从服务器获取数据。
deleteEmployee()：此方法将从服务器删除员工。

export class EmployeeService {
  selectedEmployee : Employee;
  employeeList : Employee[];
  constructor(private http : Http) { }

  postEmployee(emp : Employee){
    var body = JSON.stringify(emp);
    var headerOptions = new Headers({'Content-Type':'application/json'});
    var requestOptions = new RequestOptions({method : RequestMethod.Post,headers : headerOptions});
    return this.http.post('https://:28750/api/Employee',body,requestOptions).map(x => x.json());
  }

  putEmployee(id, emp) {
    var body = JSON.stringify(emp);
    var headerOptions = new Headers({ 'Content-Type': 'application/json' });
    var requestOptions = new RequestOptions({ method: RequestMethod.Put, headers: headerOptions });
    return this.http.put('https://:28750/api/Employee/' + id,
      body,
      requestOptions).map(res => res.json());
  }
  getEmployeeList(){
    this.http.get('https://:28750/api/Employee')
    .map((data : Response) =>{
      return data.json() as Employee[];
    }).toPromise().then(x => {
      this.employeeList = x;
    })
  }
  deleteEmployee(id: number) {
    return this.http.delete('https://:28750/api/Employee/' + id).map(res => res.json());
  }
}

Angular 中的组件

使用 Angular 4 进行开发的主要部分是在组件中完成的。

在 Angular 应用程序中，组件基本上是与组件的 .html 文件交互的类。

它包括：

模板
类
元数据

我们将通过以下链接获取组件的所有详细信息：

https://angular.io/guide/architecture-components

使用以下命令创建新的 Employee Component：

ng generate component Employee

export class EmployeeComponent implements OnInit {

  constructor(private employeeService: EmployeeService, private toastr: ToastrService) { }

  ngOnInit() {
    this.resetForm();
  }

  resetForm(form?: NgForm) {
    if (form != null)
      form.reset();
    this.employeeService.selectedEmployee = {
      EmployeeID: null,
      FirstName: '',
      LastName: '',
      EmpCode: '',
      Position: '',
      Office: ''
    }
  }

  onSubmit(form: NgForm) {
    if (form.value.EmployeeID == null) {
      this.employeeService.postEmployee(form.value)
        .subscribe(data => {
          this.resetForm(form);
          this.employeeService.getEmployeeList();
          this.toastr.success('New Record Added Successfully', 'Employee Register');
        })
    }
    else {
      this.employeeService.putEmployee(form.value.EmployeeID, form.value)
      .subscribe(data => {
        this.resetForm(form);
        this.employeeService.getEmployeeList();
        this.toastr.info('Record Updated Successfully!', 'Employee Register');
      });
    }
  }
}

为 List 添加另一个组件。

ng generate component EmployeeList

我们使用 ToasterService 在 UI 上显示通知。

此组件用于显示员工列表。它将从 Web API 获取数据并在 UI 上显示。

export class EmployeeListComponent implements OnInit {

  constructor(private employeeService: EmployeeService,private toastr : ToastrService) { }

  ngOnInit() {
    this.employeeService.getEmployeeList();
  }

  showForEdit(emp: Employee) {
    this.employeeService.selectedEmployee = Object.assign({}, emp);;
  }

  onDelete(id: number) {
    if (confirm('Are you sure to delete this record ?') == true) {
      this.employeeService.deleteEmployee(id)
      .subscribe(x => {
        this.employeeService.getEmployeeList();
        this.toastr.warning("Deleted Successfully","Employee Register");
      })
    }
  }
}

我们正在使用以下属性：

ng-model 属性用于在视图中将输入、文本区域和选择等控件绑定到模型。
ng-submit：ng-submit 指令将表单提交给指定函数。
ngModel：ng-model 属性用于将模型中的数据绑定到呈现给用户的视图。

将以下 UI 添加到 employee.component.html 文件中：

<form class="emp-form" 
#employeeForm="ngForm" (ngSubmit)="onSubmit(employeeForm)">
  <input type="hidden" name="EmployeeID" #EmployeeID="ngModel" 
    [(ngModel)]="employeeService.selectedEmployee.EmployeeID">
  <div class="form-row">
    <div class="form-group col-md-6">
      <input class="form-control" name="FirstName" #FirstName="ngModel" 
           [(ngModel)]="employeeService.selectedEmployee.FirstName"
        placeholder="First Name" required>
      <div class="validation-error" *ngIf="FirstName.invalid && FirstName.touched">
       This Field is Required.</div>
    </div>
    <div class="form-group col-md-6">
      <input class="form-control" name="LastName" #LastName="ngModel" 
         [(ngModel)]="employeeService.selectedEmployee.LastName" placeholder="Last Name"
        required>
      <div class="validation-error" *ngIf="LastName.invalid && LastName.touched">
       This Field is Required.</div>
    </div>
  </div>
  <div class="form-group">
    <input class="form-control" name="Position" #Position="ngModel" 
    [(ngModel)]="employeeService.selectedEmployee.Position" placeholder="Position">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <input class="form-control" name="EmpCode" #EmpCode="ngModel" 
       [(ngModel)]="employeeService.selectedEmployee.EmpCode" placeholder="Emp Code">
    </div>
    <div class="form-group col-md-6">
      <input class="form-control" name="Office" #Office="ngModel" 
       [(ngModel)]="employeeService.selectedEmployee.Office" placeholder="Office">
    </div>
  </div>
  <div class="form-row">
    <div class="form-group col-md-8">
      <button [disabled]="!employeeForm.valid" 
      type="submit" class="btn btn-lg btn-block btn-info">
        <i class="fa fa-floppy-o"></i> Submit</button>
    </div>
    <div class="form-group col-md-4">
      <button type="button" class="btn btn-lg btn-block btn-secondary" 
      (click)="resetForm(employeeForm)">
        <i class="fa fa-repeat"></i> Reset</button>
    </div>
  </div>
</form>

运行 command Ng Serve 来测试您的应用程序。

NPM Start

打开 Chrome 浏览器，输入地址：https://:4200/

通过此操作，您已成功将数据插入数据库，并且已将其显示在 gridview 中。点击提交。

请参阅附加的代码以获取更多信息。

编程愉快！

别忘了在下方留下您的反馈和评论！