ASP.NET MVC 中的 视图（View） 是负责“页面最终长什么样”的部分，文件后缀通常是 .cshtml（C# Razor）或 .vbhtml（VB Razor）。下面给你一份最全、最实用的 视图大全，看完就能写出漂亮、专业、可维护的页面。
一、Razor 语法速查表（2025 年最新写法）
| 用途 | C# Razor 写法（.cshtml） | VB Razor 写法（.vbhtml） | 说明 |
|---|---|---|---|
| 输出变量 | @Model.Name 或 @userName | @Model.Name | 自动 HTML 编码 |
| 输出不编码（显示 HTML） | @Html.Raw("<strong>加粗</strong>") | @Html.Raw("<strong>加粗</strong>") | 危险！防 XSS |
| 代码块 | @{ var x = 1; } | @Code Dim x = 1 End Code | 多行逻辑 |
| if 判断 | @if (user.IsAdmin) { <span>管理员</span> } | @If user.IsAdmin Then <span>管理员</span> End If | 注意大写 If |
| foreach 循环 | @foreach (var p in Model) { <tr>...</tr> } | @For Each p In Model ... Next | 最常用 |
| 注释 | @* 这是一段注释 *@ | @* 这是一段注释 *@ | 不会出现在源码 |
| 声明使用布局页 | @{ Layout = "~/Views/Shared/_Layout.cshtml"; } | 同左 | 必须写 |
| 声明页面标题 | @{ ViewBag.Title = "商品列表"; } | 同左 | 布局页读取 |
| 插入局部视图 | @Html.Partial("_ProductItem", item) | 同左 | 复用组件 |
| 调用带数据的 Action | @Html.Action("Menu","Nav") | 同左 | 子请求 |
二、一个标准的企业级视图长什么样（推荐模板）
@{
ViewBag.Title = "商品列表";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@section styles {
<link href="~/Content/DataTables/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
}
<div class="card shadow mb-4">
<div class="card-header py-3">
<h7 class="m-0 font-weight-bold text-primary">
商品管理
<a href="@Url.Action("Create")" class="btn btn-primary btn-sm float-end">
<i class="fas fa-plus"></i> 新增商品
</a>
</h7>
</div>
<div class="card-body">
@if (TempData["Success"] != null)
{
<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
@TempData["Success"]
</div>
}
<table class="table table-bordered table-hover" id="dataTable">
<thead>
<tr>
<th>@Html.DisplayNameFor(m => m.First().Name)</th>
<th>价格</th>
<th>库存</th>
<th>状态</th>
<th width="150">操作</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@Html.ActionLink(item.Name, "Details", new { id = item.Id })</td>
<td>@item.Price.ToString("C")</td>
<td>@item.Stock</td>
<td>
@if (item.IsActive)
{
<span class="badge bg-success">上架</span>
}
else
{
<span class="badge bg-secondary">下架</span>
}
</td>
<td>
@Html.ActionLink("编辑", "Edit", new { id = item.Id }, new { @class = "btn btn-warning btn-sm" })
<a href="@Url.Action("Delete", new { id = item.Id })"
class="btn btn-danger btn-sm"
onclick="return confirm('确定删除吗？');">删除</a>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
@section scripts {
<script src="~/Content/DataTables/js/jquery.dataTables.min.js"></script>
<script src="~/Content/DataTables/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function () {
$('#dataTable').DataTable({
"language": { "url": "//cdn.datatables.net/plug-ins/1.13.7/i18n/zh.json" }
});
});
</script>
}三、视图中最常用的 10 个 HtmlHelper
| Helper | 作用 | 示例 |
|---|---|---|
@Html.ActionLink() | 生成超链接 | 编辑 删除 |
@Html.TextBoxFor(m => m.Name) | 带验证的输入框 | 表单 |
@Html.ValidationMessageFor() | 显示验证错误 | 必填提示 |
@Html.LabelFor() | 带 for 属性的标签 | 表单美观 |
@Html.DropDownListFor() | 下拉框 | 分类选择 |
@Html.CheckBoxFor() | 复选框 | 是否上架 |
@Html.HiddenFor() | 隐藏字段 | Id |
@Html.BeginForm() | 表单开始标签（带防伪令牌） | 推荐 |
@Url.Action() | 生成 URL（更安全） | JS 中常用 |
@Html.AntiForgeryToken() | 防止 CSRF | 必须加 |
四、局部视图（Partial View）—— 复用神器
- 创建文件：
Views/Shared/_ProductCard.cshtml - 内容：
@model Product
<div class="col-md-4 mb-4">
<div class="card h-100">
<img src="@Model.ImageUrl" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">@Model.Name</h5>
<p class="card-text text-danger fw-bold">@Model.Price.ToString("C")</p>
<a href="@Url.Action("Details", "Product", new { id = Model.Id })"
class="btn btn-primary">查看详情</a>
</div>
</div>
</div>- 主视图中使用：
<div class="row">
@foreach (var p in Model)
{
@Html.Partial("_ProductCard", p)
}
</div>五、视图分类与存放规范（企业级标准）
Views/
├─ Home/ ← 前台首页相关
├─ Product/ ← 商品模块
│ ├─ Index.cshtml
│ ├─ Details.cshtml
│ ├─ _ProductCard.cshtml ← 局部视图
│ └─ EditorTemplates/ ← 编辑模板（高级）
├─ Account/ ← 登录注册（Internet 模板自带）
├─ Shared/ ← 全局共享
│ ├─ _Layout.cshtml
│ ├─ _LoginPartial.cshtml
│ └─ Error.cshtml
└─ Admin/ ← 后台所有视图（Areas 内）六、终极建议
- 所有页面都写
@{ Layout = ... }或用_ViewStart.cshtml统一 - 所有表单都用
@Html.BeginForm()+@Html.AntiForgeryToken() - 所有列表页都加
@section scripts放 DataTables、分页 - 所有提示信息都用
TempData["Success"]+ Alert 框 - 所有可复用组件都做成 Partial View
学会上面这些，你写的页面就已经比 95% 的开发者更专业、更美观、更易维护了！
需要我直接发你一个「企业级完整视图模板包」吗？包含：
- 前台商城完整页面（列表、详情、购物车）
- 后台管理所有标准页面（带 DataTables、表单验证）
- 所有局部视图组件（分页、面包屑、搜索框）
- Bootstrap 5 + AdminLTE 双布局完美切换
直接复制进 Views 文件夹就能用，省你一个月美工时间，随时说一声就发！
