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. codeforces 796A-D

    决定在 codeforces 练题啦,决定每个比赛刷前四道...太难就算了 796A Buying A House 题意:给出x轴上的n 个点,每个点有个权值,问离m 点最近的权值小于等于k 的点离m ...

  2. mysql查看死锁和解除锁

    解除正在死锁的状态有两种方法: 第一种: 1.查询是否锁表 show OPEN TABLES where In_use > 0; 2.查询进程(如果您有SUPER权限,您可以看到所有线程.否则, ...

  3. CentOS_7下安装MySQL

    卸载旧版本MySQl: 下载MySQ: MySQl官网:https://dev.mysql.com/downloads/mysql/ 版本自选,操作系统选Linux-Generic,64位系统或者32 ...

  4. 读取导入csv csv报错iterable expected, not float

    示例代码import pandas as pdimport reimport csv data = pd.read_csv('nuojia.csv', encoding='utf-8')# print ...

  5. docker 笔记

     批量删除Docker中已经停止的容器[转] 方法一: #显示所有的容器,过滤出Exited状态的容器,取出这些容器的ID, sudo docker ps -a|grep Exited|awk '{p ...

  6. 最小生成树——Prim算法和Kruskal算法

    洛谷P3366 最小生成树板子题 这篇博客介绍两个算法:Prim算法和Kruskal算法,两个算法各有优劣 一般来说当图比较稀疏的时候,Kruskal算法比较快 而当图很密集,Prim算法就大显身手了 ...

  7. 深入理解 GIL:如何写出高性能及线程安全的 Python 代码

    深入理解 GIL:如何写出高性能及线程安全的 Python 代码 本文由 伯乐在线 - 郑芸 翻译.未经许可,禁止转载!英文出处:A. Jesse.欢迎加入翻译组. GIL对多线程的影响:http:/ ...

  8. Flask 构建微电影视频网站(八)

    评论收藏及弹幕 实现电影评论添加及列表.数据查询实现统计播放量和评论量.jquery ajax实现收藏电影,flask结合redis消息队列实现电影弹幕,bug处理等功能. 电影评论-统计 class ...

  9. vue stylus 格式化问题

    IDE是vscode 安装了.vetur插件 由于stylus可以仅用缩进不用写大括号之类的,所以十分方便, 但有个问题,按alt shift F 格式化时,vetur这个插件会默认添加上正常css的 ...

  10. 从redis中取值如果不存在设置值,使用Redisson分布式锁【我】

    用到的jar包: <!-- Redis客户端 --> <dependency> <groupId>redis.clients</groupId> < ...