# Razor 视图开发模式 ## 查看结构 ### 项目布局浏览量/ ├── 共享/ │ ├── _Layout.cshtml # 主布局模板 │ ├── _LayoutEmpty.cshtml # 最小布局（无页眉/页脚） │ ├── _Header.cshtml # 部分标题 │ ├── _Footer.cshtml # 页脚部分 │ ├── _Navigation.cshtml # 导航部分 │ ├── _Pagination.cshtml # 可重复使用的分页 │ └── 组件/ # 查看组件 │ └── 搜索框/ │ └── 默认.cshtml ├── 首页/ │ ├── 索引.cshtml │ └── 关于.cshtml ├── 产品/ │ ├── 索引.cshtml │ ├── 详情.cshtml │ └── _ProductCard.cshtml # 页面特定部分 ├── _ViewImports.cshtml # 共享导入和标签助手 └── _ViewStart.cshtml # 默认布局分配 ### _ViewImports.cshtml @使用MyApp.Web @using MyApp.Web.Models @使用MyApp.Core.Models @addTagHelper *，Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *，MyApp.Web ### _ViewStart.cshtml @{ 布局=“_Layout”； } ## 布局模板 ### 主要布局 @* 视图/共享/_Layout.cshtml *@ <头> <元字符集=“utf-8”/> @ViewData["Title"] - 我的应用程序 @* 页面特定样式的头部部分 *@ @await RenderSectionAsync（“样式”，必需：false） <标题> @await Html.PartialAsync("_Header") @await Html.PartialAsync("_Navigation") <主类=“容器”> @RenderBody() <页脚> @await Html.PartialAsync("_Footer") @* 页面特定 JavaScript 的脚本部分 *@ @await RenderSectionAsync("脚本"，必需：false) ### 页面使用布局 @model ProductListViewModel @{ ViewData["标题"] = "产品"; ViewData["BodyClass"] = "产品页面"; } @section样式{ }

@ViewData["标题"]

@foreach（Model.Products 中的 var 产品） { @await Html.PartialAsync("_ProductCard", 产品) }

@section脚本{ } ### 嵌套布局 @* 视图/共享/_LayoutAdmin.cshtml *@ @{ 布局=“_Layout”； }

@section脚本{ @await RenderSectionAsync("AdminScripts"，必需：false) } ## 部分视图 ### 渲染部分 @* 异步（推荐）*@ @await Html.PartialAsync("_ProductCard", 产品) @* 具有明确的视图路径 *@ @await Html.PartialAsync("~/Views/Shared/_Header.cshtml") @* 同步（避免 I/O 操作） *@ @Html.Partial("_Sidebar") @* 作为标签助手 *@ @* 带视图数据 *@ ### 部分视图示例 @* 视图/产品/_ProductCard.cshtml *@ @型号产品 <文章类=“产品卡”>

@Model.Name

@Model.Price.ToString("C")

@if（模型.IsOnSale） { 促销 }

## 查看组件 ### 组件类 // ViewComponents/RecentArticlesViewComponent.cs 公共类RecentArticlesViewComponent：ViewComponent { 私有只读 IArticleService _articleService; 公共RecentArticlesViewComponent（IArticleService文章服务） { _articleService = 文章服务； } 公共异步任务 InvokeAsync(int count = 5) { var 文章=等待_articleService.GetRecentAsync(count); 返回视图（文章）； } } ### 组件视图 @* Views/Shared/Components/RecentArticles/Default.cshtml *@ @model IEnumerable<文章> <节类=“最近的文章”>

最近的文章

@文章.标题 <时间 datetime="@article.PublishedDate.ToString("yyyy-MM-dd")"> @article.PublishedDate.ToString("MMM dd, yyyy")

### 调用组件 @* 标签助手语法（首选）*@ @* 异步语法 *@ @await Component.InvokeAsync("RecentArticles", new { count = 5 }) @* 带缓存 *@ <缓存过期后=“@TimeSpan.FromMinutes（10）”> ## 标签助手 ### 内置标签助手 @* 锚标记助手 *@ 查看详情 @* 表单标签助手 *@

<标签asp-for =“名称”>

<标签asp-for =“电子邮件”>

<标签asp-for =“类别”>

@section脚本{ } ### 带验证的 ViewModel 公共类 ContactFormViewModel { [必填(ErrorMessage = "姓名为必填项")] [StringLength(100, ErrorMessage = "名称不能超过 100 个字符")] [显示（名称=“全名”）] 公共字符串名称{获取;放; } [必填(ErrorMessage = "电子邮件为必填项")] [EmailAddress(ErrorMessage = "请输入有效的电子邮件地址")] 公共字符串电子邮件{获取;放; } [必需(ErrorMessage = "消息为必填项")] [字符串长度（2000，最小长度 = 10， ErrorMessage =“消息长度必须在 10 到 2000 个字符之间”)] 公共字符串消息{获取;放; } } ## 条件渲染 ### If/Else 语句 @if (模型.产品.Any()) {

@foreach（Model.Products 中的 var 产品） { }

} 否则 {

未找到产品。

返回首页

} ### Switch 语句 @switch（模型.状态） { 案例 OrderStatus.Pending：待处理打破；案例 OrderStatus.Processing：处理打破；案例 OrderStatus.Shipped：已发货打破；案例 OrderStatus.Delivered: 已交付打破；默认：未知打破； } ### 空检查 @* 空条件 *@

作者：@Model.Author？.姓名？？ “未知”

@* 有后备 *@ @if（模型.ImageUrl！= null） { @Model.Title

} 否则 {

} @* 三元运算符 *@

@模型.标题

## 循环和集合 ### For 循环 @for (int i = 0; i < Model.Items.Count; i++) {

@(i + 1) @Model.Items[i].Name

} ### 带索引的 Foreach @{ 变量索引 = 0; } @foreach（Model.Items 中的 var item） {

@项目名称

索引++； } ### 渲染列表

@if（是最后一个） { @crumb.Title } 否则 { @crumb.Title }

## HTML 帮助程序与标签帮助程序 ### 更喜欢标签助手 @* HTML Helper（旧方法）*@ @Html.ActionLink("详细信息", "详细信息", "产品", new { id = Product.Id }, new { @class = "btn btn-link" }) @* 标签助手（现代，首选）*@ 详情 @* 表单的 HTML 助手 *@ @Html.TextBoxFor(m => m.Name, new { @class = "form-control", placeholder = "输入名称" }) @* 标签助手（清理器）*@ ### 何时使用 HTML 助手 @* 复杂的动态属性 *@ @Html.TextBoxFor(m => m.Name, Model.GetInputAttributes()) @* 原始 HTML 内容 *@ @Html.Raw(模型.HtmlContent) @* 显示模板 *@ @Html.DisplayFor(m => m.CreatedDate) @* 编辑器模板 *@ @Html.EditorFor(m => m.Address) ## ViewData、ViewBag 和 TempData ### 查看数据（字典） @* 在控制器中 *@ ViewData["标题"] = "产品详情"; ViewData["显示侧边栏"] = true; @* 在视图中 *@

@ViewData["标题"]

@if ((bool?)ViewData["ShowSidebar"] == true) { } ### ViewBag（动态） @* 在控制器中 *@ ViewBag.Categories =等待_categoryService.GetAllAsync(); @* 在视图中 *@

@section脚本{ <脚本> $('#contact-form').on('提交', function(e) { e.preventDefault(); var $form = $(this); var $button = $form.find('button[type="submit"]'); $button.prop('已禁用', true).text('正在发送...'); $.ajax({ url: $form.attr('action'), 类型：'发布'，数据：$form.serialize(), 成功：函数（响应）{ $('#result').html(响应); $form[0].reset(); }, 错误：函数（xhr）{ $('#result').html('

发生错误。

'); }, 完成：函数（）{ $button.prop('已禁用', false).text('提交'); } }); }); } ### 从控制器返回部分视图 [http获取] 公共异步任务 LoadMore(int page) { var products = wait _productService.GetPagedAsync(page, 10); 返回 PartialView("_ProductGrid", 产品); } [http邮报] [验证防伪令牌] 公共异步任务 SubmitAjax（ContactFormViewModel 模型） { if (!ModelState.IsValid) { 返回 PartialView("_ContactFormErrors", 模型); } 等待 _contactService.ProcessAsync(模型); 返回 PartialView("_ContactFormSuccess"); } ## 辅助功能注意事项 @* 带有 ARIA 的语义 HTML *@

@* 表单可访问性 *@

<标签 asp-for="电子邮件" id="电子邮件标签"> <输入 asp-for="电子邮件" aria-labelledby="电子邮件标签" aria-描述的=“电子邮件帮助电子邮件错误”/> 我们永远不会分享您的电子邮件。

@* 跳过键盘导航链接 *@

前端剃刀

包含技能