NetCore Razor
(1) Pages文件夹
存放所有Razor页面,包括Razor 页面和支持文件。 每个 Razor 页面都是一对文件:
一个 .cshtml 文件,其中包含使用 Razor 语法的 C# 代码的 HTML 标记。
一个 .cshtml.cs 文件,其中包含处理页面事件的 C# 代码。
Page 对象方法
方法 | 描述 |
---|---|
href | 使用指定的值创建 URL。 |
RenderBody() | 呈现不在布局页命名区域的内容页的一部分。 |
RenderPage(page) | 在另一个页面中呈现某一个页面的内容。 |
RenderSection(section) | 呈现布局页命名区域的内容。 |
Write(object) | 将对象作为 HTML 编码字符串写入。 |
WriteLiteral | 写入对象时优先不使用 HTML 编码。 |
Page 对象属性
属性 | 描述 |
---|---|
isPost | 如果客户端使用的 HTTP 数据传输方法是 POST 请求,则返回 true。 |
Layout | 获取或者设置布局页面的路径。 |
Page | 提供了对页面和布局页之间共享的数据的类似属性访问。 |
Request | 为当前的 HTTP 请求获取 HttpRequest 对象。 |
Server | 获取 HttpServerUtility 对象,该对象提供了网页处理方法。 |
_Layout.cshtml 布局页面
1 2 3 4 5 6 7 8 | <! DOCTYPE html> < html > < head >< title >@Page.Title</ title > </ head > < body > @RenderBody() </ body > </html |
Home.cshtml 页面
1 2 3 4 | @{ Layout="~/Shared/Layout.cshtml"; Page.Title="Home Page" } |
创建Script脚本
公共页面:
@await RenderSectionAsync( "Scripts" , required: false ) |
调用页面:
1 2 3 4 5 | @section scripts { <script type= "text/javascript" > code </script> } |
(2) wwwroot 文件夹
包含静态文件,如 HTML 文件、JavaScript 文件和 CSS 文件
(3) appSettings.json
包含配置数据,如连接字符串
(4) Program.cs
包含程序的入口点,启动主机,Razor Pages 服务启用
1 2 | builder.Services.AddRazorPages(); app.MapRazorPages(); |
页面布局
<partial>
标记调用共享文件,如:_Header.cshtml
和 _Footer.cshtml
1 2 3 4 5 | <body> <partial name= "_Header" > @RenderBody() <partial name= "_Footer" > </body> |
默认启动模板:_ViewStart.cshtml
默认布局模板:_Layout.cshtml
默认表单验证:_ValidationScriptsPartial.cshtml
默认Razor指令:_ViewImports.cshtml
加载内容:@RenderBody()
加载模块块:@RenderPage("header.cshtml")
加载脚本:@await RenderSectionAsync("Scripts", required: false)
默认使用模板:@{Layout="_Layout.cshtml";}
不需要默认模板:@ { Layout = null; }
防止文件被浏览:文件的名称以下划线开头,可以防止这些文件在网上被浏览,如:_Header.cshtml、_Footer.cshtml、_Layout.cshtml
Razor 命令:
@page指令:@page指令必须是页面上的第一个 Razor 指令
隐式Razor表达式:
隐式 Razor 表达式以 @ 开头,后跟 C# 代码。
隐式表达式不能包含空格,但 C# await
关键字除外。
调用属性
1 | <p>今天是:@DateTime.Now</p> |
调用函数
1 | < p >@DateTime.IsLeapYear(2024)</ p > |
使用C#关键字
1 | < p >@await DoSomething("hello", "world")</ p > |
显式 Razor 表达式
定义变量:
1 2 3 4 | @{ var name = "Hello" ; <p>Now in HTML, was in C# @name</p> } |
定义函数:
1 2 3 4 5 6 7 | @{ void RenderName(string name) { < p >Name: < strong >@name</ strong ></ p > } RenderName("Hello"); } |
表达式编码计算表达式@():
1 | @(2 - 1) |
HTML转纯文本:
1 | @("< span >Hello World</ span >") |
字符串转 HTML:
1 | @Html.Raw("< span >Hello World</ span >") |
@if, else if, else
1 2 3 4 5 6 7 8 9 10 11 12 | @{ int value = 10; } @ if (value == 0) { <p>hello</p> } else { <p>wold</p> } |
@switch (value)
1 2 3 4 5 6 7 8 9 | @ switch (value) { case 1: <p>Hello!</p> break ; default : <p>Wold.</p> break ; } |
@for
1 2 3 4 | @ for ( var i = 0; i < 10; i++) { } |
@foreach
1 2 3 4 | @foreach (var person in people) { < p >Name: @person.Name</ p > } |
@while
1 2 3 4 5 6 7 | @{ var i = 0; } @while (i < people.Length ) { var person = people[i]; <p>Age: @person.Name</ p > i++; } |
@do while
1 2 3 4 5 6 7 | @{ var i = 0; } @do { var person = people[i]; < p >Name: @person.Name</ p > i++; } while (i < people.Length); |
@try, catch, finally
1 2 3 4 5 6 7 8 9 10 11 12 | @ try { throw new InvalidOperationException( "无效操作." ); } catch (Exception ex) { <p>异常信息: @ex.Message</p> } finally { <p> finally 块.</p> } |
复合语句 @using
在 C# 中,
using
语句用于确保释放对象。
1 2 3 4 5 6 7 | @using (Html.BeginForm()) { < div > Email: < input type="email" id="Email" value=""> < button >Register</ button > </ div > } |
@lock
1 2 3 4 | @lock (SomeLock) { // Do critical section work } |
Razor注释
1 2 3 4 5 6 7 8 9 10 11 12 | @{ /* C# comment */ // Another C# comment } <!-- HTML comment --> @* @{ /* C# comment */ // Another C# comment } <!-- HTML comment --> *@ |
例1:.shtml 页面调用 .cs 实体类的内容
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | public class IndexModel : PageModel { private readonly ILogger<IndexModel> _logger; public IndexModel(ILogger<IndexModel> logger) { _logger = logger; } public string Message { get ; private set ; } = "Hello world" ; public void OnGet() { } } |
文件 .shtml
1 2 3 | @page @model IndexModel @Model.Message |
显示图像
1 | < img src="@imagePath" alt="图像" /> |
判断是否为Post提交
1 2 3 4 5 6 | @{ if (IsPost) { if (Request["name"] != null ) { string companyname = Request["name"]; } } |
GET 请求
请求页面:<a asp-page="./Privacy" asp-route-id="@Model.Id">Get</a>
详情页面:
1 2 3 4 5 6 7 8 9 10 11 12 13 | public class PrivacyModel : PageModel { private readonly ILogger<PrivacyModel> _logger; public PrivacyModel(ILogger<PrivacyModel> logger) { _logger = logger; } public void OnGet( int id) { } } |
生成链接
-
从一个基础 controller 的 area 中的方法生成链接到同一 controller 的另一个方法。
当前请求路径像/Products/Home/Create
HtmlHelper 语法:@Html.ActionLink("Go to Product's Home Page", "Index")
TagHelper 语法:<a asp-action="Index">Go to Product's Home Page</a>
注意这里不需要提供 ‘area’ 和 ‘controller’ 值因为他们在当前请求上下文中已经可用。这种值被称作ambient
值。 -
从一个基础 controller 的 area 中的方法生成链接到不同 controller 的另一个方法。
当前请求路径像/Products/Home/Create
HtmlHelper 语法:@Html.ActionLink("Go to Manage Products’ Home Page", "Index", "Manage")
TagHelper 语法:<a asp-controller="Manage" asp-action="Index">Go to Manage Products’ Home Page</a>
注意这里用的 ‘area’ 环境值是上面 ‘controller’ 明确指定的。 -
从一个基础 controller 的 area 中的方法生成链接到不同 controller 和不同 area 另一个方法。
当前请求路径像/Products/Home/Create
HtmlHelper 语法:@Html.ActionLink("Go to Services’ Home Page", "Index", "Home", new { area = "Services" })
TagHelper 语法:<a asp-area="Services" asp-controller="Home" asp-action="Index">Go to Services’ Home Page</a>
注意这里没有环境值被用。 -
从一个基础 controller 的 area 中的方法生成链接到不在一个 area 中的不同 controller 的另一个方法。
HtmlHelper 语法:@Html.ActionLink("Go to Manage Products’ Home Page", "Index", "Home", new { area = "" })
TagHelper 语法:<a asp-area="" asp-controller="Manage" asp-action="Index">Go to Manage Products’ Home Page</a>
因此生成链接到非 area 的基础 controller 方法,清空了这里 ‘area’ 的环境值。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?