Razor Pages 页面视图文件的组成和约束

Razor页面视图引擎文件

在Razor Pages(以及ASP.NET Core MVC)项目中，所有的Razor文件均以.cshtml扩展名命名。绝大多数的Razor文件都可能包含了客户端和服务端的代码，对于服务端的代码而言，在服务器处理Razor视图文件时会渲染成HTML代码然后发送到客户端的浏览器。这部分页面通常叫做”内容页”，”内容页”关联了一个以PageModel文件，它以内容文件+.cs来命名。

比如:内容页面为Index.cshtml，关联的PageModel文件则为Index.cshtml.cs

内容页的约束与配置

在Razor Pages应用程序中，创建一个Razor视图文件，必须符合以下三个基于的要求：

• 不能以下划线开头，如:/Pages/Post/_Index.cshtml是不可以的(在Razor Pages中，以下划线开始的.cshtml视图文件通常被认为是部分视图文件(Patial Page))
• 文件的扩展名一定是.cshtml
• 文件内容的第一行必须是 @page

注意： 这里强调将@page放在文件内容的第一行，是Razor Pages应用程序的约束。这里的@page是Razor Pages中的一个指令。@page指令表明当前文件作为MVC action处理，它意味着请求不通过控制器而直接处理客户端发送过来的请求。

当然，@page后面还可以有配置路由模板，后面的文章将作详细的介绍。

在这个内容文件中，我们还可以指定布局模板，这和ASP.NET MVC中的而已模板是类似的，如：

@{
    Layout="...";
}

但是，这里的模板不是必须的，也可以不用设置。Razor引擎会自动加载_ViewStart.cshtml文件中指定的模板(如果有_ViewStart.cshtml的话)。

内容页面主要由HTML组成，但它们还包括Razor语法，该语法允许在内容中包含可执行的C＃代码。 C＃代码在服务器上执行，其中通常包含动态内容被执行，然后发送到客户端的浏览器。

不使用PageModel的单文件Razor模式

上文中我们提到过，Razor会关联一个PageModel文件。如果不创建这个关联的.cs文件也是可以的(但不推荐此种方法)。

以下将演示没有PageModel的单文件方式，它类似PHP或者ASP:

Demo.cshtml:

@page 
@{
    var name = string.Empty;
    if (Request.HasFormContentType)
    {
        name = Request.Form["name"];
    }
}

<div style="margin-top:30px;">
    <form method="post">
        <div>Name: <input name="name" /></div>
        <div><input type="submit" /></div>
    </form>
</div>
<div>
    @if (!string.IsNullOrEmpty(name))
    {
        <p>Hello @name!</p>
    }
</div>

在以上的 [Demo.cshtml] Razor文件中，我们在第一行使用了@page指令，表明当前的.cshtml文件作为Razor Pages处理，不经过Controller。

HasFormContentType属性用来检测请求中是否包含表单，如果有表单，则Request.Form会收集所有的表单元素，然后我们可以通过表单的name属性分别获取对应的表单数据。

在示例中，Razor代码使用形如@{...}的格式包裹，其中的内容是标准的C#代码。

在Razor代码块中，我们还可以包含HTML标签等，如以上示例中的后面一个@ifRazor代码块：

@if (!string.IsNullOrEmpty(name))
    {
        <p>Hello @name!</p>
    }

其中包含了段落标签 p， 这与PHP，ASP的书写类似。

在Razor文件中，我们还可以使用@functions{...}格式书写纯粹的C#代码，如：

Demo2.cshtml

@page

@functions {
    [BindProperty]
    public string Name { get; set; }
}

<div style="margin-top:30px;">
    <form method="post">
        <div>Name: <input name="name" /></div>
        <div><input type="submit" /></div>
    </form>
    @if (!string.IsNullOrEmpty(Name))
    {
        <p>Hello @Name!</p>
    }
</div>

在[Demo2.cshtml]中，完成的功能和[Demo.cshtml]相同，只是我们使用@functions{...}代码块定义了一个Name属性，并指定了BindProperty属性。它叫做model binding(模型绑定)，表明在Razor处理请求时自动绑定表单的数据，而无需开发人员手动处理表单变量的数据。

有了模型绑定的好处是：在@functions代码块中的代码变得多和复杂时方便维护和管理，开发人员只需按照约束编码即可。

使用PageModel的Razor模式

PageModel即为上文中提到的关联的.cs文件模式，使用PageModel来分离HTML代码和业务逻辑代码是比较推荐的。它让代码更清晰，更好维护。在PageModel中，开发人员只书写与业务相关的C#代码即可。

以下示例代码实现的功能与上面两个示例相同，但不同的是使用PageModel来实现：

Demo3.cshtml:

@page
@model Demo3Model

<div style="margin-top:30px;">
    <form method="post">
        <div>Name: <input asp-for="Name" /></div>
        <div><input type="submit" /></div>
    </form>
    @if (!string.IsNullOrEmpty(Model.Name))
    {
        <p>Hello @Model.Name!</p>
    }
</div>

与[Demo3.cshtml]关联的PageModel文件如下：

Demo3.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace RazorPages.Pages
{
    public class Demo3Model : PageModel
    {
        [BindProperty]
        public string Name { get; set; }
    }
}

在[Demo3.cshtml]没有了@functions，而使用另外一个指令@model指定了当前视图的模型为Demo3Model，之后 ，我们便可以愉快地在Razor视图中使用Demo3Model这个实体了。

提示: 在Visual Studio创建Razor Pages视图时，可以选择是否自动创建PageModel文件。