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

角落的白板报

发布于 2023-03-21 15:40:40

3.7K0

发布于 2023-03-21 15:40:40

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

ASP.NET Core Razor Pages 介绍

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

启动Visual Studio 2019

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

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

YoYoMooc.StudentManagement.RazorPage，然后点击下一步。

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

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

了解Razor Pages

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

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。