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的情况下使用内容页也是有用的。
Razor Page 文件的更多相关文章
- Razor Page Library:开发独立通用RPL(内嵌wwwroot资源文件夹)
ASP.NET Core知多少系列:总体介绍及目录 Demo路径:GitHub-RPL.Demo 1. Introduction Razor Page Library 是ASP.NET Core 2. ...
- Razor Page–Asp.Net Core 2.0新功能
Razor Page介绍 前言 上周期待已久的Asp.Net Core 2.0提前发布了,一下子Net圈热闹了起来,2.0带来了很多新的特性和新的功能,其中Razor Page引起我的关注,作为web ...
- ASP.NET Core教程【一】关于Razor Page的知识
关键文件和目录结构 按照asp.net core WEB应用程序向导,创建一个工程之后 你会发现如下几个目录和文件 wwwroot:放置网站的静态文件的目录 Pages:放置razor页面的目录 ap ...
- ASP.NET Core教程【二】从保存数据看Razor Page的特有属性与服务端验证
前文索引:ASP.NET Core教程[一]关于Razor Page的知识 在layout.cshtml文件中,我们可以看到如下代码: <a asp-page="/Index" ...
- 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 ...
- Asp.net core 学习笔记 Razor Page
更新 2019-04-27 最近做了更多的 research 发现微软视乎有意发展 razor page. razor page 的定位是 mvvm, 现在还有个叫 blazor 的东西, 类似用 c ...
- page文件
题目:主页面引用 page 文件 ./configs/style.conf ./templates/main.html <body> <{config_load file=" ...
- Scaffolding Template on Asp.Net Core Razor Page
Scaffolding Template Intro 我们知道在Asp.Net MVC中,如果你使用的EF的DBContext的话,你可以在vs中通过右键解决方案-添加控制器-添加包含视图的控制器,然 ...
- Do You Kown Asp.Net Core - 根据实体类自动创建Razor Page CURD页面模板
Scaffolding Template Intro 我们知道在Asp.Net MVC中,如果你使用的EF的DBContext的话,你可以在vs中通过右键解决方案-添加控制器-添加包含视图的控制器,然 ...
随机推荐
- Module build failed: Error: Cannot find module 'babel-runtime/core-js/get-it
npm i babel-loader@7.1.5 -D
- XML fragments parsed from previous mappers already contains value for xxxxx
错误信息: Caused by: org.springframework.core.NestedIOException: Failed to parse mapping resource: 'file ...
- NodeJS脚本启动工具总结
1. 使用npm 2. 使用pm2 安装: npm install pm2 -g 启动: NODE_ENV=test pm2 start newsCrawler.js 停止: pm2 stop new ...
- ILRuntime_NewbieGuide—进阶
进阶篇其实要求你应该拥有一个云服务器才有意思,但你用本地电脑也是一样的道理,只是没有这么有趣了. 笔者大一的时候,腾讯云搞活动,学生认证可以抢到1元的云主机,配置很低,但是平时练练手还是可以的,现在没 ...
- shutil、zipfile,tarfile
shutil 模块提供了大量的文件的高级操作.特别针对文件拷贝和删除,主要功能为目录和文件操作以及压缩操作. 1. shutil.copyfileobj(fsrc, fdst[, length]) 功 ...
- MT【323】向量模的范围
已知单位向量 $\overrightarrow e_1,\overrightarrow e_2$ 的夹角为 $120^\circ$,$\left|x\overrightarrow e_1+y\over ...
- [BJOI2019]排兵布阵(动态规划)
[BJOI2019]排兵布阵(动态规划) 题面 洛谷 题解 暴力dp: 设\(f[i][j]\)表示考虑到了第\(i\)座城市用了\(j\)人的最大收益,枚举在这个城市用多少人就可以了. 优化: 发现 ...
- LOJ#2665 树的计数
题意:给你DFS序和BFS序,求树的期望高度. 解:先分析性质. 考虑到BFS序是分层的,DFS序的子树是一段,那么我们遍历BFS序并在DFS序上标记对应点的话,就会发现BFS序每一层都会把若干棵子树 ...
- 盒模型的垂直居中css
https://www.cnblogs.com/zhouhuan/p/vertical_center.html
- Vue-router(基础)_滚动行为和history模式
一.前言 1.滚动事件 2.h5 history模式 二.主要内容 1. (1)使用前度路由,当切换到新路由时,想要页面滚动到顶部,或者是保持原先滚动的位置,就像重新加载页面那样.vue-rout ...