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的情况下使用内容页也是有用的。

Razor Page 文件的更多相关文章

  1. Razor Page Library:开发独立通用RPL(内嵌wwwroot资源文件夹)

    ASP.NET Core知多少系列:总体介绍及目录 Demo路径:GitHub-RPL.Demo 1. Introduction Razor Page Library 是ASP.NET Core 2. ...

  2. Razor Page–Asp.Net Core 2.0新功能

    Razor Page介绍 前言 上周期待已久的Asp.Net Core 2.0提前发布了,一下子Net圈热闹了起来,2.0带来了很多新的特性和新的功能,其中Razor Page引起我的关注,作为web ...

  3. ASP.NET Core教程【一】关于Razor Page的知识

    关键文件和目录结构 按照asp.net core WEB应用程序向导,创建一个工程之后 你会发现如下几个目录和文件 wwwroot:放置网站的静态文件的目录 Pages:放置razor页面的目录 ap ...

  4. ASP.NET Core教程【二】从保存数据看Razor Page的特有属性与服务端验证

    前文索引:ASP.NET Core教程[一]关于Razor Page的知识 在layout.cshtml文件中,我们可以看到如下代码: <a asp-page="/Index" ...

  5. Do You Kown Asp.Net Core -- Asp.Net Core 2.0 未来web开发新趋势 Razor Page

    Razor Page介绍 前言 上周期待已久的Asp.Net Core 2.0提前发布了,一下子Net圈热闹了起来,2.0带来了很多新的特性和新的功能,其中Razor Page引起我的关注,作为web ...

  6. Asp.net core 学习笔记 Razor Page

    更新 2019-04-27 最近做了更多的 research 发现微软视乎有意发展 razor page. razor page 的定位是 mvvm, 现在还有个叫 blazor 的东西, 类似用 c ...

  7. page文件

    题目:主页面引用 page 文件 ./configs/style.conf ./templates/main.html <body> <{config_load file=" ...

  8. Scaffolding Template on Asp.Net Core Razor Page

    Scaffolding Template Intro 我们知道在Asp.Net MVC中,如果你使用的EF的DBContext的话,你可以在vs中通过右键解决方案-添加控制器-添加包含视图的控制器,然 ...

  9. Do You Kown Asp.Net Core - 根据实体类自动创建Razor Page CURD页面模板

    Scaffolding Template Intro 我们知道在Asp.Net MVC中,如果你使用的EF的DBContext的话,你可以在vs中通过右键解决方案-添加控制器-添加包含视图的控制器,然 ...

随机推荐

  1. [CF 1043F] Make It One

    Description 给定 \(n\) 个正整数 \(a_i\),最少选出多少个 \(a_i\) 使得他们 \(gcd\) 为 \(1\)?\(n,a_i\le 3\times 10^5\). So ...

  2. luogu P1659 [国家集训队]拉拉队排练

    唔....话说好久没有发布题解了(手痒痒了 首先特别鸣谢lykkk大佬今天下午教我Manacher算法,甚是感谢 为了体现学习成果,写一篇蒟蒻版的题解(大佬勿喷 言归正传 题面——>在这儿 首先 ...

  3. Eureka 配置

    #是否向服务注册中心注册自己,该值默认为trueeureka.client.register-with-eureka=falseserver端建议设为false #服务注册中心的配置内容,指定服务注册 ...

  4. php对某个页面设置基础认证登录设置

    记录下. 对某个页面设置认证 代码最开始添加: <?php $user = 'test'; $password = '111111'; // 通过HTTP认证进行验证 if (!isset($_ ...

  5. js数组sort排序方法的算法

    说明一下,ECMAScript没有定义使用哪种排序算法,各个浏览器的实现方式会有不同.火狐中使用的是归并排序,下面是Chrome的sort排序算法的实现. sort方法源码 DEFINE_METHOD ...

  6. 理解依赖注入,laravel IoC容器

    在看laravel文档的时候,有一个服务容器(IoC)的概念.它是这样介绍的:Laravel 服务容器是一个用于管理类依赖和执行依赖注入的强大工具.依赖注入听上去很花哨,其实质是通过构造函数或者某些情 ...

  7. python验证卡普耶卡(D.R.Kaprekar)6174猜想

    1955年,卡普耶卡(D.R.Kaprekar)对4位数字进行了研究,发现一个规律: 对任意各位数字不相同的4位数,使用各位数字能组成的最大数减去能组成的最小数,对得到的差重复这个操作,最终会得到61 ...

  8. Jmeter接口测试操作

    一.Jmeter接口测试操作步骤 1. 启动jmeter,右键点击测试计划-->添加-->Threads(Users)-->线程组,点击线程组菜单,右边显示参数设置. 2 . 右键点 ...

  9. Windows环境下Anaconda安装TensorFlow的避坑指南

    最近群里聊天时经常会提到DL的东西,也有群友在学习mxnet,但听说坑比较多.为了赶上潮流顺便避坑,我果断选择了TensorFlow,然而谁知一上来就掉坑里了…… 我根据网上的安装教程,默认安装了最新 ...

  10. Neo4j安装

    一.Windows版本 1)下载java8,并配置环境变量 java下载请点击,提取码:f6ci 2)Neo4j下载 选windows版本 新建系统环境变量: 并配置Path环境变量,添加bin所在目 ...