如何使用 React 和 ASP.NET Core 实现 CRUD 表单 - 第二部分

引言

在本教程的这一部分，我们将构建高性能的 ASP.NET Core React.js 组件，而无需使用 Redux 或 JQuery。如果您尚未完成本教程的第一部分，建议您先完成第一部分，然后再返回此页面。我们将从创建客户端模型开始。

客户端模型

客户端模型是什么？由于我们的 React 组件需要访问我们的模型，因此我们需要客户端模型以及我们之前创建的服务器端模型。幸运的是，我们的客户端模型会更简单，因为 TypeScript 只有几种简单的类型，而且我们不需要任何属性。就像我们的服务器端模型一样，我们将有三个类：Actor、Movie 和 MovieActor。

首先展开“ClientApp”文件夹，然后右键单击“ClientApp”文件夹，选择“添加”，然后选择“新建项…(如图 1 所示)”。从左侧的“模板”框中，选择“ASP.NET Core”，然后选择“Web”，再选择“脚本”。从中间框中选择“TypeScript 文件”，然后输入名称models.ts (如图 1 所示)。

复制并粘贴下面显示的三种模型 (如图 2)

export class Actor{
	Id: number;
	Name: string;
	Gender: string;
	Age: number;
	Picture: string;
}
export class Movie{
	Id: number;
	Title: string;
	Director: string;
	DateReleased: string;
	ReleasedBy: string;
	Rating: string;
	Genre: string;
	GrossRevenue: number;
}
export class MovieActor{
	MovieId: number;
	ActorId: number;
}

Actor 组件

现在让我们创建 Actor React.js 组件。正如我在第一部分提到的，我们的每个组件都将驻留在自己的文件夹中。所以，首先在ClientApp/Components下创建一个名为Actor的文件夹。然后右键单击Actor文件夹，选择“添加”，然后选择“新建项…”。从“添加新项”对话框的左侧，选择“ASP.NET Core”，然后选择“Web”，再选择“脚本”(如图 3 所示)。然后从中间框中选择“TypeScript JSX 文件”，并将文件名命名为：Index.tsx。

TypeScript JSX 文件是我们用于创建 React 组件的文件。

导入

ES6（JavaScript 的当前版本）中的导入语句类似于 C# 中的 `using` 语句，它们允许我们引用其他脚本模块。我们需要引用我们的客户端模型和其他一些内容，所以让我们添加一些 `import` 语句。我们的前三个 `import` 包括：对 React 的引用、对 React Router 的引用以及对我们客户端模型的引用。复制这三个 `import` 语句，如下图所示 (如图 4)。

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import * as models from '../../models'

React 组件是状态化的，称为“受控”组件。在 React 中，您只修改状态，React 会负责渲染。我们从不触碰 DOM，这就是我们不需要 JQuery 的原因。事实上，直接操作 DOM 可能会有问题，因为您可能会破坏组件的状态。这是一种非常清晰的架构，但如果您是经验丰富的开发人员，您必须抵制直接操作 DOM 的冲动。我们将使用一个接口来定义 `Actor` 组件的状态。就在您刚刚复制的 `import` 语句下方，复制以下接口 (如图 5)。

interface ActorState {
	actor: models.Actor[]
    loading: boolean
}

让我们继续。我们的组件可以在我们应用程序的任何地方使用（并可供其他应用程序重用），因此类声明必须以“export”开头，并且还将扩展 `Rect.Component`。我们将从构造函数开始，它将初始化组件的状态并获取视图的数据。复制下面显示的代码 (如图 6)

export class Actors extends React.Component<routecomponentprops<{}>, ActorState> {
    constructor(props) {
        super(props);
        this.state = {
            actor: [],
            loading: true
        };
        fetch('api/actor/index')
			.then(response => response.json() as Promise<models.actor[]>)
            .then(data => {
                this.setState({
                    actor: data,
                    loading: false,
                });
            });
    }

React 组件的魔力发生在 `render()` 方法中。每当您通过设置其中一个值来更改组件的状态时，React 都会重新渲染您的组件。所以，让我们像下面这样编写我们的 `render` 方法 (如图 7)。您可能已经注意到，我们在返回的标记中插入了变量：{contents}。这只是允许我们将标记分解成更易于管理的块，随着组件变得越来越复杂，这将变得更加重要。

最后，我们只需要编写 `renderTable()` 方法。它是一个相当基本的 HTML 表格，但您需要注意几点。JavaScript 的 `.map()` 方法用于迭代我们的数据，这些数据作为参数 `actor` 传递给我们的方法。此外，React 强烈建议为可能包含许多条目的表格或 `ul` 和 `ol` 形式的标记添加唯一的“key”。这使得 React 能够优化其组件的重新渲染方式，即，在我们的示例中，只重新渲染已更改的行。继续键入下面显示的标记 (如图 8)。

这样就完成了我们的组件。接下来，我们将转到控制器。

控制器

正如我在第一部分提到的，我们的控制器将是一个 ASP.NET Core WebAPI 控制器。它将返回 JSON，这意味着我们可以利用它来为原生移动应用程序提供服务。让我们开始吧。

右键单击“Controllers”文件夹，然后选择“添加”，再选择“Controller”。如果出现一个名为“Add dependencies to enable scaffolding”的弹出窗口，请选择“Minimal Dependencies”并等待 Visual Studio 安装一些脚手架包，然后重试。在“Add Scaffold”弹出窗口中，选择“API Controller with Actions using Entityframework”。然后从下一个弹出窗口中，选择 `Actor` 作为 `Model`，选择 `AppDbContext` 作为 Data context (如图 9)。请注意，如果您的项目包含任何编译器错误，操作将失败，您需要首先解决这些错误。

我们将对控制器进行一个小小的更改。我们将 `GetActors()` 方法重命名为 `Index()`，以便遵循旧的 MVC 约定（请对此迁就我一下）。此外，我们添加了 `[HttpGet("[action]")]` 属性，允许我们使用操作名称（Index）调用该方法。现在请进行这两项更改 (如图 9.1)。

[Produces("application/json")]
[Route("api/Actors")]
public class ActorController : Controller
{
    private readonly AppDbContext _context;

    public ActorsController(AppDbContext context)
    {
        _context = context;
    }

    //[HttpGet]
    //public IEnumerable<actor><Actor> GetActors()
    [HttpGet("[action]")]
    public IEnumrable<Actor> Index()
    {
        return _context.Actors;
    }

路由

我们 React 单页应用程序中的路由由 react-router 组件处理。我们需要通过向 ClientApp/routes.tsx 和 ClientApp/components/navmenu.tsx 文件添加条目来告知它我们的新组件。进行如下修改 (如图 10 和 11)。

此时，我们可以运行我们的应用程序并访问我们的 `Actor` 组件（也称为视图）。您的视图中将没有任何数据，但如果您想在此阶段查看数据，只需使用 SQL Management Studio 将其添加到数据库中。

第二部分教程到此结束。请继续关注。在第三部分中，我们将通过添加 `Create`、`Edit`、`Details` 和 `Delete` 方法来实现神奇！

如何使用 React 和 ASP.NET Core 实现 CRUD 表单 - 第一部分

历史

• 2017年11月8日：初版文章