4.通过.NET Core CLI创建RazorPage示例应用程序

通过.NET Core CLI创建RazorPage示例应用程序

当我们所有的环境和依赖安装完成后，我们通过创建一个简单的控制台应用程序来验证我们的.NET Core 版本是否正确。

然后我们再创建一个示例程序，用于后面我们的 Docker 容器操作。

首先使用.NET Core Cli 命令来验证，通过 CLI 工具创建一个控制台程序，检查它的版本号是否为.NET Core 3.1。

创建一个控制台程序

打开我们的资源管理器，创建一个EnvTest文件夹,然后打开 Powershell 工具，输入以下命令。

代码语言：javascript复制

dotnet new console

它会在 EnvTest 文件夹中会创建两个文件:

EnvTest.csproj
Program.cs

通过安装的 VsCode 打开EnvTest文件夹,检查EnvTest.csproj 文件的内容，如图所示：

EnvTest.csproj

代码语言：javascript复制

<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    <OutputType>Exe</OutputType>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>

</Project>

然后打开Program.cs 文件，修改它的代码如下：

代码语言：javascript复制

using System;

namespace EnvTest
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.WriteLine("Docker基础学习!");
        }
    }
}

这是一个简单的控制台程序，我们可以对外输出一则消息，现在我们保存文件。然后在EnvTest文件夹中打开终端控制台，输入以下命令：

代码语言：javascript复制

dotnet restore

它会为我们的控制台程序安装 NuGet 包。接下来，在EnvTest文件夹中运行下面的命令来编译代码并运行测试程序。

代码语言：javascript复制

dotnet run

这个命令将编译并运行项目。如果一切顺利，那么你应该会看到如下输出

代码语言：javascript复制

Docker基础学习!

说明我们的.NET 环境已经准备完毕。

注意：如果您无法完成上述流程，说明您的环境出现了异常。您需要重新安装您的 SDK 环境。如果这都还不行，那就尝试删除所有其他版本的.NET Core，仅保留.NET 3.1 的 SDK。如果其他方法都失败了，而你又不能确定问题的原因，你可以前往QA地址：http://code.52abp.com/52abp/qa/yoyomooc 我会尽力帮助你。

创建示例 MVC 应用程序

要了解 Docker 容器的工作原理，最好的方法就是通过实践，所以动起手来吧。现在创建一个简单的 ASP.NET Core MVC 项目，作为我们的示例项目来练习使用容器。

你可能已经习惯了依赖 Visual Studio 或 Visual Studio Code 提供的内置支持来创建和管理 ASP.NET Core 项目，但我直接依赖本系列中的.NET CLI 命令行工具。

在本系列课程中，我们会实践大量的命令行，所以会尽可能的少图形化的内容。这是因为使用 Docker 的时候，大多数都是脱离了 IDE 工作的，需要非常熟悉.NET CLI 命令行。

创建 RazorPage 项目

在你的电脑中选择一个路径，创建一个名为YoYoMooc.ExampleApp的文件夹。打开一个新的命令提示符，导航到YoYoMooc.ExampleApp文件夹路径中，输入以下命令，它会创建一个带有基本内容模板的 ASP.NET Core MVC RazorPage 的项目。

代码语言：javascript复制

   dotnet new razor --language C# --auth None --framework netcoreapp3.1

上述代码表示，我们创建了一个无须授权的razorpage项目，指定了它的.NET SDK 版本号为 3.1

我们采用的 dotnet new 命令默认包含了各种内置的模板，如：

创建 RazorPage 的内置模板命令如下：

代码语言：javascript复制

dotnet new razor --language C# --auth None --framework netcoreapp3.1
 或
dotnet new webapp --language C# --auth None --framework netcoreapp3.1

创建 mvc 的内置模板命令如下：

代码语言：javascript复制

 dotnet new mvc --language C# --auth None --framework netcoreapp3.1

创建 Blazor 的内置模板命令如下：

代码语言：javascript复制

dotnet new blazorserver --language C# --auth None --framework netcoreapp3.1

当然您可以前往微软的官方网站进行查看更多的命令内容。

如果你还不会 MVC 项目，可以前往https://www.52abp.com/College/Course/1学习。
如果你不会 Razorpage，请不要担心会了 MVC 项目后理解 Razorpage 也是很轻松的事情。
如果你都不会，也不要紧，我的视频会包含每个步骤，跟紧我的步伐即可。

现在打开我们 CLI 命令行工具创建的项目后，可以在图中看到已经内置了 Bootstrap 和 JQuery 的模板。

示例项目

接下来我们创建一些演示数据。

创建数据模型和存储库

我将创建一个简单的数据模型和一个数据源，里面会包含一些测试数据。测试数据将暂时是一堆硬编码的数据，随着课程的进度，我会介绍通过 Entity Framework 访问的真正的数据库时，才会配置数据库。

创建一个YoYoMooc.ExampleApp/Models的文件夹，并在其中添加一个名为Product.cs的文件，代码如下：

代码语言：javascript复制

using System.ComponentModel.DataAnnotations.Schema;

namespace YoYoMooc.ExampleApp.Models
{
    public class Product
    {
        public Product() { }
        public Product(string name = null,
        string category = null,
        decimal price = 0)
        {
            Name = name;
            Category = category;
            Price = price;
        }
        public int ProductID { get; set; }
        public string Name { get; set; }
        public string Category { get; set; }

        [Column(TypeName = "decimal(18,4)")]
        public decimal Price { get; set; }
    }
}

这是一个很简单的产品模型，让我们创建一个仓储模式，当然因为本书不是一个搭建框架的课程，所以我们不会创建泛型仓库，毕竟本书的重点是 Docker。

现在让我创建在YoYoMooc.ExampleApp/Models文件夹中，创建一个名为IProductRepository.cs的文件，代码如下：

代码语言：javascript复制

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace YoYoMooc.ExampleApp.Models
{
    public interface IProductRepository
    {
        IQueryable<Product> Products { get; }

    }
}

IProductRepository仅定义了一个 Products 属性的接口，用于返回Product对象的集合，当然一个真正的项目是需要完成它的增删改查的，但是本系列课程中我们只有这一个方法，毕竟 Docker 才是本课程的重点，你如果想学习完整的项目可以前往《ASP.NET CORE MVC And Entity Framework 基础课程》[3]学习。

接下来，我会创建一个仓储类MockProductRepository.cs添加到Models文件夹中，然后继承仓储接口，暂时作为我们的数据源。我会在后面的章节中实现采用真实的数据库仓储的来连接数据库，你如果还不知道仓储模式，可以前往我的 MVC 基础视频 49 ASP NET Core 中的仓储模式[4] 了解。

完整代码如下：

代码语言：javascript复制

    public class MockProductRepository : IProductRepository
    {

       private static readonly Product[] DummyData = new Product[] {
new Product { Name = "产品1", Category = "分类1", Price = 100 },
new Product { Name = "产品2", Category = "分类1", Price = 100 },
new Product { Name = "产品3", Category = "分类2", Price = 100 },
new Product { Name = "产品4", Category = "分类2", Price = 100 },
};
        public IQueryable<Product> Products => DummyData.AsQueryable();

     }

MockProductRepository类实现了IProductRepository类，其 Products 属性返回一个静态只读类的 Product 的对象集合，在作为连接数据库前，这个作为入门已经足够了。

传递数据到视图前的准备工作

一个视图组件，需要一个视图类和一个视图文件来显示。在YoYoMooc.ExampleApp/Pages路径中，已经存在了 Index.cshtml 和 Index.cshtml.cs 两个文件。

我们针对他们进行修改,打开Index.cshtml.cs文件，对它进行调整完整代码如下：

代码语言：javascript复制

  public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;
        private readonly IProductRepository _repository;
        private readonly IConfiguration _config;
        public string Message { get; set; }
        public List<Product> Products { get; set; }
        public IndexModel(ILogger<IndexModel> logger, IProductRepository repository, IConfiguration config)
        {
            _logger = logger;
            _repository = repository;
            _config = config;
        }
        public void OnGet()
        {
            Message = _config["MESSAGE"] ?? "深入浅出 ASP.NET Core 与Docker";
            Products = _repository.Products.ToList();
        }
    }

代码说明：

我们向构造函数中注入了 IProductRepository,这是通过将它注册到 ASP.NET Core 的依赖注入容器中从而完成上下文连接。
在构造函数中声明了 IConfiguration 接口的依赖关系,，它将提供访问应用程序的配置信息。这样就可以读取一个名为MESSAGE的设置内容，然后通过 Razorpage 的视图模型传递到视图中。

配置信息是一个非常考察基础知识的一个地方，在后面的内容中，我们会通过它来展示在不同的伸缩扩展容器的时候返回不同的容器 ID 结果，当然这在视频的一开始就给大家呈现过效果了。

接下来，我们修改Index.cshtml文件，代码如下：

代码语言：javascript复制

<div class="text-center">

     <div class="m-1 p-1">

 <h3 class="display-4">欢迎</h3>
  <p>创建年轻人的 <a href="https://www.yoyomooc.com">第一个 ASP.NET Core项目</a>.</p>
   <h4 class="bg-success text-xs-center p-1 text-white"> @Model.Message</h4>
<table class="table table-sm table-striped">
   <thead>
    <tr><th>ID</th><th>名称</th><th>分类</th><th>价格</th></tr>
   </thead>
   <tbody>
    @foreach (var p in Model.Products)
    {
     <tr>
      <td>@p.ProductID</td>
      <td>@p.Name</td>
      <td>@p.Category</td>
      <td>￥@p.Price.ToString("F2")</td>
     </tr>
    }
   </tbody>
  </table>
        </div>
   </div>

代码说明：

将配置信息呈现到视图页面中
将硬编码的产品信息遍历到我们的视图页面

注册到容器中

访问startup.cs在ConfigureServices方法中将 IProductRepository, MockProductRepository 注册到依赖注入容器中，代码如下：

代码语言：javascript复制

 public void ConfigureServices(IServiceCollection services)
        {

            services.AddTransient<IProductRepository, MockProductRepository>();
            services.AddRazorPages();
        }

打开我们的终端工具，导航到项目文件所在路径，输入以下命令

代码语言：javascript复制