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

角落的白板报

发布于 2020-05-24 10:44:02

1.2K0

发布于 2020-05-24 10:44:02

文章被收录于专栏：角落的白板报角落的白板报

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

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

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

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

创建一个控制台程序

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

dotnet new console

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

EnvTest.csproj
Program.cs

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

EnvTest.csproj

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

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

</Project>

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

using System;

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

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

dotnet restore

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

dotnet run

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

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 的项目。

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

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

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

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

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

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

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

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

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的文件，代码如下：

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的文件，代码如下：

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] 了解。

完整代码如下：

    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文件，对它进行调整完整代码如下：

  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文件，代码如下：

<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 注册到依赖注入容器中，代码如下：

 public void ConfigureServices(IServiceCollection services)
        {

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

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