Razor语法完全手册：掌握@指令、模板布局与Tag Helper的实用指南
Razor语法完全手册：掌握@指令、模板布局与Tag Helper的实用指南
【免费下载链接】razorCompiler and tooling experience for Razor ASP.NET Core apps in Visual Studio and VS Code.项目地址: https://gitcode.com/gh_mirrors/razo/razor
Razor是ASP.NET Core应用程序中用于创建动态Web页面的强大模板引擎，它将HTML标记与C#代码无缝结合，让开发者能够轻松构建交互式Web应用。本文将全面介绍Razor语法的核心概念，包括@指令、模板布局和Tag Helper的使用方法，帮助你快速掌握这一必备技能。
一、Razor基础：@符号的魔力 ✨
在Razor中，@符号是连接HTML和C#代码的桥梁。它不仅用于标识C#代码块，还能直接输出表达式结果。以下是几种常见用法：
1. 输出表达式
<p>当前时间: @DateTime.Now</p> <p>欢迎消息: @($"Hello, {User.Name}!")</p>2. 代码块
@if (User.IsAuthenticated) { <p>欢迎回来，@User.Name！</p> } else { <p>请<a href="/login">登录</a>以继续</p> }3. 循环结构
<ul> @foreach (var item in Model.Items) { <li>@item.Name - @item.Price.ToString("C")</li> } </ul>二、必备@指令：构建页面基础 🚀
Razor提供了多种@指令，用于定义页面特性和行为。以下是最常用的几个：
1. @page：定义Razor页面
用于标识Razor Pages文件，指定页面路由：
@page "/products" @model ProductsModel提示：在Razor Pages应用中，每个
.cshtml文件顶部都需要@page指令
2. @model：指定页面模型
声明页面使用的模型类型，使强类型视图成为可能：
@model CustomerViewModel <h1>@Model.CustomerName的订单</h1>3. @inject：依赖注入
在视图中注入服务：
@inject IEmailService EmailService <button onclick="@(async () => await EmailService.SendConfirmationAsync(Model.Email))"> 发送确认邮件 </button>4. @addTagHelper：引入Tag Helper
启用Tag Helper功能，扩展HTML元素的能力：
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers <form asp-action="Create"> <!-- 自动生成正确的表单action --> </form>三、模板布局：打造一致的页面结构 📐
Razor提供了强大的布局系统，确保网站各页面保持一致的外观和行为。
1. 布局文件(_Layout.cshtml)
定义网站的整体结构，包括公共的头部、导航和页脚：
<!DOCTYPE html> <html> <head> <title>@ViewData["Title"] - 我的应用</title> <link rel="stylesheet" href="~/css/site.css" /> </head> <body> <header> <nav> <!-- 导航菜单 --> </nav> </header> <main> @RenderBody() <!-- 页面内容将在这里呈现 --> </main> <footer> <!-- 页脚内容 --> </footer> </body> </html>2. @inherits：继承布局
在视图中指定要使用的布局：
@inherits LayoutComponentBase @{ Layout = "_Layout"; }3. @section：定义页面区域
在视图中定义可在布局中呈现的内容块：
@section Scripts { <script src="~/js/product-details.js"></script> }在布局中使用@RenderSection("Scripts")呈现这些内容。
四、Tag Helper：增强HTML元素 🔧
Tag Helper是Razor的强大功能，它允许服务器端代码参与创建和呈现HTML元素。
1. 内置Tag Helper
ASP.NET Core提供了多种内置Tag Helper，如表单、链接和图像：
<!-- 表单Tag Helper --> <form asp-action="Create" asp-controller="Products"> <input asp-for="ProductName" /> <span asp-validation-for="ProductName"></span> <button type="submit">保存</button> </form> <!-- 链接Tag Helper --> <a asp-action="Details" asp-route-id="123">查看详情</a>2. 视图组件Tag Helper
使用<vc:前缀调用视图组件：
@addTagHelper "*, MyApp" <vc:product-card product="Model.FeaturedProduct" /> <vc:cart-summary count="@Model.CartItems.Count" />3. 自定义Tag Helper
创建自己的Tag Helper以扩展HTML功能。例如，创建一个格式化日期的Tag Helper：
[HtmlTargetElement("date-format")] public class DateFormatTagHelper : TagHelper { public DateTime Value { get; set; } public string Format { get; set; } = "yyyy-MM-dd"; public override void Process(TagHelperContext context, TagHelperOutput output) { output.TagName = "span"; output.Content.SetContent(Value.ToString(Format)); } }使用自定义Tag Helper：
@addTagHelper *, MyApp <date-format value="@DateTime.Now" format="yyyy年MM月dd日"></date-format>五、Razor开发最佳实践 💡
1. 代码组织
- 将复杂逻辑放在视图模型或服务中，保持视图简洁
- 使用局部视图(
@Html.Partial)重用UI组件 - 利用_ViewImports.cshtml引入常用命名空间和Tag Helper
2. 性能优化
- 使用
@model强类型视图避免类型转换 - 利用
@inject注入服务而非直接在视图中实例化 - 合理使用缓存标签助手
<cache>减少重复计算
3. 可维护性
- 保持视图专注于UI呈现，避免复杂业务逻辑
- 使用布局和部分视图确保一致的UI
- 遵循DRY原则，提取可重用组件
Razor项目典型文件结构展示，包含布局、页面和视图组件
六、快速入门：开始使用Razor
要开始使用Razor开发ASP.NET Core应用，只需按照以下步骤操作：
- 克隆仓库：
git clone https://gitcode.com/gh_mirrors/razo/razor探索示例代码：
- Razor语法示例：src/Razor/benchmarks/testapps/ComponentApp/Components/Pages/FormattingTest.razor
- 布局示例：src/Compiler/perf/Microsoft.AspNetCore.Razor.Microbenchmarks.Generator/SampleApp/Shared/MainLayout.razor
- Tag Helper示例：src/Compiler/Microsoft.AspNetCore.Mvc.Razor.Extensions/test/TestFiles/IntegrationTests/CodeGenerationIntegrationTest/ViewComponentTagHelperOptionalParam.cshtml
参考官方文档：docs/Onboarding Docs/01_Razor_Basics.md
通过本文的介绍，你已经掌握了Razor语法的核心概念和使用方法。无论是构建简单的网页还是复杂的Web应用，Razor都能帮助你高效地创建动态、交互式的用户界面。开始动手实践，体验Razor带来的开发乐趣吧！
【免费下载链接】razorCompiler and tooling experience for Razor ASP.NET Core apps in Visual Studio and VS Code.项目地址: https://gitcode.com/gh_mirrors/razo/razor
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考