如何使用 React 和 ASP.NET Core 实现 CRUD 表单

引言

近年来，涌现了许多竞争性的单页应用程序 (SPA) 框架，如 Angular、Vue 和 React。其中，React - Facebook 的产品 - 已遥遥领先。在本教程中，我将向您展示如何使用 React 编写一个数据驱动的 ASP.NET Core 2.0 SPA，其中包含 CRUD 操作（创建、读取、更新和删除）。我们的数据将存储在 SQL Server 数据库中，但除此之外，我们不会使用任何其他第三方技术，例如 Redux 甚至 JQuery。请继续关注，您将看到 React 的强大之处，以及它如何使 JQuery 几乎过时。

背景

React 提供了许多好处，在我看来，其中最重要的是组件。React 组件很简单。它们简化了您的应用程序架构，它们是封装的并且可以重用，而且样式化组件非常简单（告别您的全局样式表）。在本教程中，我们将使用 TypeScript 编写 JSX，因此我们也将利用 ES6 JavaScript 增强功能，它提供了更多好处。我决定写这篇教程是因为我找不到一个全面的教程来处理在数据驱动的 ASP.NET Core 2.0 应用程序中使用 React。接下来的内容是三部分系列的第一部分。

Using the Code

您可以通过简单地更改模型名称来在自己的应用程序中使用本教程中的代码，例如，更改传递给每个组件的模型数据的类型。这现在可能对您没有意义，但到本教程结束时，您将完全理解。届时，您还将了解 React 如何融入 ASP.NET Core 框架。让我们开始吧！

构建我们的 React 应用程序

在本教程中，我们将构建一个电影数据库应用程序。Visual Studio 2017 包含一个基本的 React 项目模板，因此我们将从它开始。让我们创建我们的项目...

1. 打开 Visual Studio 并选择“新建项目”。
2. 在“新建项目”对话框中，选择 .NET Core，然后选择 ASP.NET Core Web 应用程序（图 1）

   

3. 在 ASP.NET Core Web 应用程序对话框中，选择 React.js（图 2）

   

4. 将应用程序命名为 'TestReactMovieApplication'。

构建我们的模型

我们的模型由三个类组成：Actor、Movie 和 MovieActor，它们简单地定义了电影和演员之间的关系。让我们首先创建一个新的 Class。在 Visual Studio 中，右键单击项目，选择“添加”，然后选择“新建类”。将新类命名为 models.cs（图 2.1）。

接下来，打开 models.cs 文件，并按照下面的方式粘贴 Actor 类（图 2.2）。然后对下面的 Movie 和 MovieActor 类执行相同的操作（图 2.3 和 2.4）。请注意，为了减少文件数量，我们的 models.cs 文件将包含所有三个类。

[Table("Actor")]
public class Actor
{
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    [Key, Column(Order = 0)]
    [Required]
    [DisplayName("Id")]
    public int Id { get; set; }

    [Required]
    [MaxLength(50)]
    [DisplayName("Name")]
    public string Name { get; set; }

    [MaxLength(10)]
    [DisplayName("Gender")]
    public string Gender { get; set; }

    [DisplayName("Age")]
    public int? Age { get; set; }

    [MaxLength(255)]
    [DisplayName("Picture")]
    public string Picture { get; set; }
}

[Table("Movie")]
public class Movie
{
    [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
    [Key, Column(Order = 0)]// check order #
    [Required]
    [DisplayName("Id")]
    public int Id { get; set; }

    [Required]
    [MaxLength(100)]
    [DisplayName("Title")]
    public string Title { get; set; }

    [Required]
    [MaxLength(100)]
    [DisplayName("Director")]
    public string Director { get; set; }

    [Required]
    [DisplayName("DateReleased")]
    public DateTime DateReleased { get; set; }

    [MaxLength(50)]
    [DisplayName("ReleasedBy")]
    public string ReleasedBy { get; set; }

    [MaxLength(10)]
    [DisplayName("Rating")]
    public string Rating { get; set; }

    [MaxLength(50)]
    [DisplayName("Genre")]
    public string Genre { get; set; }

    [DisplayName("GrossRevenue")]
    public decimal? GrossRevenue { get; set; }
}  

[Table("MovieActor")]
public class MovieActor
{
    [Key, Column(Order = 0)]
    [Required]
    [DisplayName("MovieId")]
    public int MovieId { get; set; }

    [Key, Column(Order = 1)]
    [Required]
    [DisplayName("ActorId")]
    public int ActorId { get; set; }
}

接下来，我们需要为 EntityFramework 创建一个数据库上下文。右键单击您的项目，选择“添加”，然后选择“类”。将文件命名为 AppDbContext.cs。然后打开新文件并粘贴以下代码（图 2.5）。请注意，我们已将 DBSets 的名称复数化。这有助于我们轻松区分模型和数据集。另外，由于我们的 MovieActor 表具有复合主键，因此我们需要在 OnModelCreating() 方法中指定它。

public class AppDbContext : DbContext
{
    public AppDbContext(DbContextOptions<appdbcontext> options)
        : base(options)
    {
    }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        /* Define any composite PKs here*/
        modelBuilder.Entity<movieactor>()
            .HasKey(m => new {m.MovieId,m.ActorId}); 
    }

    public DbSet<actor> Actors {get; set;}
    public DbSet<movie> Movies {get; set;}
    public DbSet<movieactor> MovieActors {get; set;}
}

我们需要将 DbContext 添加到项目服务中。我们还将指定一个 JSON 选项，该选项将保留我们字段名称的大小写，而不是将它们更改为 camelCase（这是默认设置）。（这会破坏 Microsoft 的 Fetch Data 示例 - 不要惊慌。）打开项目根目录下的 startup.cs 文件，并确保 ConfigureServices() 方法如下所示（图 2.5.1）。

public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<appdbcontext>(options =>
    {
        options.UseSqlServer(Configuration.GetConnectionString("AppDbContext"));
        options.ConfigureWarnings(x => x.Ignore(RelationalEventId.AmbientTransactionWarning));
    });

    services.AddMvc().AddJsonOptions(options =>
    {
        options.SerializerSettings.ContractResolver = new DefaultContractResolver();
    });
}

配置应用程序

tsconfig.json

由于我们将编写一些 TypeScript，我们将关闭 TypeScript 的 'strict' 模式，以使我们的生活更轻松。在 tsconfig.json（位于应用程序根目录）中，让我们将 'strict' 设置为 false，如下所示

  "compilerOptions": { "strict": false   

连接字符串

我们将在 appsettings.json（同样位于应用程序根目录）中设置连接字符串（图 2.6）。您的连接字符串应该与上面显示的类似，但您的服务器名称可能与您安装 SQL Server 时指定的名称不同。将其放在“Logging”设置之前。

{
  "ConnectionStrings": {
    "AppDbContext": "server=localhost\\SQL2012;Database=Movies;Integrated Security=True;
                    MultipleActiveResultSets=true"
  },
  "Logging": {

React TS 应用程序的结构

此时，我想稍微偏离一下主题，谈谈我们的 React.js 应用程序的结构。本教程将遵循 MVC（模型、视图、控制器）方法，只是我们没有服务器端视图，而是使用充当视图的客户端 React 组件。我还想更详细地谈谈我们的 React 应用程序的结构。

项目

当您创建 ASP.NET Core React 应用程序时，您会发现以下项目项（图 7）。最重要的是要知道：我们不再使用服务器端视图（取而代之的是 ClientApp 文件夹下的 React 组件）；客户端脚本必须被“编译”（由 webpack 执行）；客户端脚本被“转译”（根据您的 tsconfig.json 文件从 TypeScript 转换为 ES5 或 ES6）；所有服务器到客户端的通信都使用 AJAX 和 JSON。

模型

除了我们上面创建的服务器端模型（图 7 中的 models.cs）之外，React 还需要客户端模型。我们将创建一个客户端模型文件，其结构基本相同，只是数据类型不同（TypeScript 数据类型更简单，数量更少），并且没有任何 ASP.NET 数据属性。

组件（视图）

在我们的 React 应用程序中，我们将在 ClientApp\components 中构建客户端组件，以充当应用程序的“视图”（图 10）。与传统的 ASP.NET MVC 应用程序一样，我们将为每个组件（模型）创建一个文件夹。但是，我们不会创建五个视图，而是只用三个来完成我们所有的 CRUD 操作，这将简化视图的维护。

此外，每个组件都将有自己的 .css 文件。这比全局 styles.css 文件有了很大的改进，在全局样式表中，一切都会影响其他一切。关于组件 CSS 文件唯一需要知道的是，它将只影响自身及其包含的任何子项。

控制器

与传统的 ASP.NET MVC 应用程序一样，我们的 React 应用程序将为每个模型拥有一个控制器，即我们将有三个单独的控制器（图 11）。

我们的控制器将与传统的 MVC 控制器有一些不同。我们的所有控制器都将是 WebAPI 控制器，并且所有方法都将返回 JSON 数据。这样做的优点是可以让我们利用我们的应用程序也为移动应用程序提供服务。其次，遵循许多 WebAPI 实践，我们将分别使用 PUT 和 POST HTTP 方法进行编辑和创建。因此，我们不会有一个 Create 方法，而是有一个 POST 方法，而不是一个 Edit 方法，我们会有一个 PUT 方法。

第一部分教程到此结束。敬请期待。在第二部分中，我们将创建我们的组件。

历史

• 2017 年 11 月 7 日：原始文章