[ASP.NET Core Razor Pages系列教程]Razor Pages 页面视图文件的组成和约束(03)

ASP.NET Core 作者: Rector 34阅读 0评论 0收藏 收藏本文

郑重申明:本文未经许可,禁止任何形式转载

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文件。

阅读了该文章的人还浏览了...

本文永久链接码友网 » [ASP.NET Core Razor Pages系列教程]Razor Pages 页面视图文件的组成和约束(03)

发布于: 2018-10-18 09:24:00
分享扩散: