3.正式开始学习ASP.NET Core 6 Razor Pages 介绍

admin

2021-06-03

ASP.NET Core Razor Pages 介绍

导航：

ASP.NET Core 6 RazorPages与EF Core入门视频目录
视频课程更佳：ASP.NET Core 6 RazorPages与EF Core入门视频

我们将使用Visual Studio 2019使用 Razor Pages 创建新的Web应用程序。以下是步骤。

启动Visual Studio 2019

单击“ 创建新项目”选项。

1-1

在随后的屏幕上，选择“ ASP.NET Core Web应用程序”模板，然后单击“ 下一步”。在下一个屏幕上，为项目提供一个名称。我命名了YoYoMooc.StudentManagement.RazorPage，然后点击下一步。 1-1

然后在配置新项目的过程中，选择我们需要的.NET 版本，这里我们选择使用.NET 6的版本，然后在其中创建项目的位置，然后单击“ 创建”按钮。

1-1

//todo: 需要检查.NET 6图片

了解Razor Pages

Razor Pages的视图文件均位于Web应用程序根文件夹中的Pages文件夹中,如下图完整的项目结构如下

1-1

Index.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

Index.cshtml是显示模板，扩展名为.cshtml。它很像MVC中的Razor视图文件。 @page指令指定它是一个 Razor Pages 。 @model指令指定模型。该模型是对应的PageModel类，如下所示。

Index.cshtml.cs

public class IndexModel : PageModel
    {
        private readonly ILogger<IndexModel> _logger;

        public IndexModel(ILogger<IndexModel> logger)
        {
            _logger = logger;
        }

        public void OnGet()
        {

        }
    }

Index.cshtml.cs是相应的PageModel类。
它与显示模板具有相同的名称，并以.cs扩展名结尾。
为什么是CS结尾，因为编程语言是CSHARP。
该文件中的类是显示模板的模型。它从PageModel类派生。
就像MVC一样， Razor Pages 也支持依赖项注入。
内置的ILogger服务是使用构造函数注入的。
通过ILogger服务，我们可以记录到几个不同的记录目标。
除依赖注入和日志记录外， Razor Pages 还支持其他ASP.NET Core 功能，例如配置源，模型绑定，模型验证等功能这些在我们之前的课程以及说过了。

Razor Pages中的Hello World

PageModel类（Index.html.cs）说明:


public class IndexModel : PageModel
{
    public string Message { get; set; }

    public void OnGet()
    {
        Message = "Hello World!";
    }
}

Razor Pages 使用公共属性将数据公开给显示模板。
显示模板中提供了公共属性Message。
除了这些将数据传送到显示模板的公共属性之外，PageModel类还包括OnGet()和OnPost()之类的方法。
这些是分别响应HTTP GET和POST请求的方法

显示模板（Index.html）

注意，公共属性Message需要通过@Model.Message 在显示模板中使用。

当我们运行该项目并导航到http://localhost:2221/index时，我们会在浏览器中看到索引页面。同样，如果您有一个ContactUs.chtml 视图文件，并且导航到http://localhost:2221/ContactUs，您将在浏览器中看到ContactUs页面。URL中不需要填写扩展名.CSHTML。