Razor Page 文件

时间:2023-03-09 04:07:55
Razor Page 文件

Razor Pages

所有的Razor文件都以 .cshtml 结尾。大部分Razor文件都是可浏览的,包含客户端代码和服务器端代码的混合,处理后会将HTML发送到浏览器。这些页面通常被称为“内容页面”。 本章将深入了解内容页面,以及与其相关的 PageModel 文件。

内容页

作为一个Razor内容页的文件,一定具有以下三个特性:

  • 文件名不可以以下划线开头
  • 文件的扩展名是.cshtml
  • 文件的第一行一定是 @page

将 @page 指令放置在第一行很关键。如果没有这么做的话,那么这个文件将不会被认为是Razor页面,而且当你试图在浏览器寻找它的时候也不会被发现。在 @page 之前可以是空白区,但是绝对不可以有其他角色,就连一个空的代码块都不可以。唯一可以被允许的是与@page指令在同一行的路由模板(route template)。

内容页可以有一个指定的模板文件( layout file),但这并不是强制必须要有的。根据实际需要,他们可以包含代码块,HTML,JavaScript以及内联Razor 代码。

Razor 语法

内容页面主要由HTML组成,但它们也包含Razor语法(Razor syntax ),允许在内容中包含可执行的c#代码。c#代码在服务器上执行,通常会在发送到浏览器的响应中包含动态内容。

单一文件方法

尽管并不被推荐,然而仅仅依靠单一的内容页也是可以开发Razor Page 应用的。下面的例子的特点,对于有着脚本开发背景的开发人员来说是很熟悉的,比如PHP或者传统ASP。

Example.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>

Razor 内容页要求 @page 指令在文件顶部.  HasFormContentType 特性用于判断表单是否提交post请假。表单集合在 Razor 代码块中被引用,与其相关的值分配在  name 变量中。

Razor 代码块写在 @{  }里面。 内容是标准的C#代码。

单一控制结构不需要代码块。可以简单的加一个 标识前缀即可。就像上面的示例代码中的 if 代码块一样。

要呈现c#变量或表达式的值,可以使用 @ 符号作为前缀,如if 代码块块中的 name变量所示。

下一个示例的功能与前一个示例相同,但它使用 @functions 块声明一个公共属性,该属性使用 BindProperty 属性修饰,从而确保该属性参与模型绑定(model binding),从而消除了手动为变量分配表单值的需要。

Example.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>

这种方法是对上一种方法的改进,即使用强类型,虽然处理逻辑可以限制为 @functions 块,但是页面将变得更加难于维护和测试。

PageModel 文件

开发Razor页面应用程序的推荐方法是将内容页面中的服务器端代码数量最小化。与处理用户输入或数据相关的任何代码都应该放在PageModel(PageModel files)文件中,这些文件与相关的内容页共享一对一的映射。它们甚至共享相同的文件名,尽管最后添加了一个.cs来表示它们实际上是c#类文件。

下面的代码展示了适用于与PageModel一起工作的 Example.cshtml 文件:

Example.cshtml:

@page
@model ExampleModel
<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>

下面是PageModel 类的代码:

Example.cshtml.cs:

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace RazorPages.Pages
{
public class ExampleModel : PageModel
{
[BindProperty]
public string Name { get; set; }
}
}

PageModel类具有前面示例中定义的单个属性,并使用 BindProperty y特性对其进行修饰。内容页不再具有 @functions 块,但它现在包含一个  @model l指令,指定 ExampleModel 是页面的模型。这也在页面中启用了标记助手( Tag helpers),进一步利用了编译时类型检查。

默认项目生成与PageModel文件配对的内容页。这是推荐的方法。然而,了解如何在不需要使用PageModel的情况下使用内容页也是有用的。