通过.NET Core CLI创建RazorPage程序

Author Image
admin Friday, May 8, 2020 阅读数: 198

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

推荐视频:

通过.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。如果其他方法都失败了,而你又不能确定问题的原因,你可以通过电子邮件给我发邮件,地址是ltm@ddxc.org,我会尽力帮助你。

创建示例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基础课程》学习。

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

完整代码如下:


    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.csConfigureServices方法中将IProductRepository, MockProductRepository注册到依赖注入容器中,代码如下:

 public void ConfigureServices(IServiceCollection services)
        {

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

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

dotnet run 

编译成功后,访问http://localhost:5000/,最终呈现的效果如下:

示例项目

深入浅出 ASP.NET Core 与 Docker 入门课程