文章目录
- 什么是CSHTML？
- 基础语法
- 内联表达式
- 代码块
- 控制结构
- 布局页面
- _ViewStart.cshtml
- _Layout.cshtml
- 使用布局
- 模型绑定
- 强类型视图
- 模型集合
- HTML辅助方法
- 基本表单
- 验证
- 局部视图
- 创建局部视图
- 使用局部视图
- 高级特性
- 视图组件
- 依赖注入
- Tag Helpers
- 性能优化
- 缓存
- 捆绑和压缩
- 安全考虑
- 防跨站请求伪造(CSRF)
- HTML编码
- 实际应用示例
- 电子商务产品页面
- 调试技巧
- 使用@functions
- 调试视图
- 最佳实践
- 结语
什么是CSHTML？
CSHTML是ASP.NET Razor视图引擎使用的文件扩展名，它是C# (CS)和HTML的混合体。这种文件类型允许开发者在HTML标记中直接嵌入C#代码，用于构建动态Web页面。CSHTML文件在服务器端处理，生成纯HTML发送到客户端浏览器。
基础语法
Razor语法是CSHTML的核心，它提供了在HTML中嵌入C#代码的简洁方式。
内联表达式
最基本的Razor语法是使用@符号将C#表达式直接嵌入HTML：
<p>当前时间是：@DateTime.Now</p>
代码块
对于多行C#代码，可以使用代码块：
@{
var greeting = "欢迎来到我们的网站！";
var weekDay = DateTime.Now.DayOfWeek;
}
<h1>@greeting 今天是 @weekDay</h1>
控制结构
Razor支持常见的C#控制结构：
@if(DateTime.Now.Hour < 12)
{
<p>早上好！</p>
}
else
{
<p>下午好！</p>
}
循环结构示例：
<ul>
@for(int i = 1; i <= 5; i++)
{
<li>项目 @i</li>
}
</ul>
布局页面
ASP.NET Razor提供了布局系统，类似于Master Page的概念，但更加灵活。
_ViewStart.cshtml
这个特殊文件定义了所有视图的默认布局：
@{
Layout = "_Layout";
}
_Layout.cshtml
布局页面定义了网站的整体结构：
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
@RenderSection("styles", required: false)
</head>
<body>
<header>
<h1>我的网站</h1>
</header>
<div class="content">
@RenderBody()
</div>
<footer>
© @DateTime.Now.Year
</footer>
@RenderSection("scripts", required: false)
</body>
</html>
使用布局
在具体视图中：
@{
ViewBag.Title = "主页";
}
<p>这是主页内容</p>
@section scripts {
<script>
console.log("页面加载完成");
</script>
}
模型绑定
CSHTML强大的功能之一是模型绑定，可以将C#对象直接传递到视图。
强类型视图
@model MyNamespace.Models.Product
<h2>@Model.Name</h2>
<p>价格: @Model.Price.ToString("C")</p>
模型集合
@model IEnumerable<MyNamespace.Models.Product>
<ul>
@foreach(var product in Model)
{
<li>@product.Name - @product.Price.ToString("C")</li>
}
</ul>
HTML辅助方法
ASP.NET提供了许多HTML辅助方法，简化了表单创建和其他常见HTML元素的生成。
基本表单
@using(Html.BeginForm("Action", "Controller", FormMethod.Post))
{
@Html.LabelFor(m => m.Name)
@Html.TextBoxFor(m => m.Name)
@Html.LabelFor(m => m.Price)
@Html.TextBoxFor(m => m.Price)
<input type="submit" value="保存" />
}
验证
@Html.LabelFor(m => m.Email)
@Html.TextBoxFor(m => m.Email)
@Html.ValidationMessageFor(m => m.Email)
局部视图
局部视图是可重用的视图组件。
创建局部视图
_ProductCard.cshtml:
@model Product
<div class="product-card">
<h3>@Model.Name</h3>
<p>@Model.Description</p>
<span class="price">@Model.Price.ToString("C")</span>
</div>
使用局部视图
@foreach(var product in Model.Products)
{
@Html.Partial("_ProductCard", product)
}
高级特性
视图组件
视图组件类似于局部视图，但包含业务逻辑：
public class ShoppingCartViewComponent : ViewComponent
{
public IViewComponentResult Invoke()
{
var cart = GetShoppingCart();
return View(cart);
}
}
使用视图组件：
@await Component.InvokeAsync("ShoppingCart")
依赖注入
可以直接在视图中注入服务：
@inject IEmailService EmailService
<p>联系我们: @EmailService.GetSupportEmail()</p>
Tag Helpers
ASP.NET Core引入了Tag Helpers，使HTML更加自然：
<form asp-controller="Account" asp-action="Login" method="post">
<label asp-for="Email"></label>
<input asp-for="Email" />
<span asp-validation-for="Email"></span>
<button type="submit">登录</button>
</form>
性能优化
缓存
<cache expires-after="@TimeSpan.FromMinutes(30)">
@await Component.InvokeAsync("PopularProducts")
</cache>
捆绑和压缩
<environment include="Development">
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
安全考虑
防跨站请求伪造(CSRF)
<form asp-action="UpdateProfile" method="post">
@Html.AntiForgeryToken()
<!-- 表单内容 -->
</form>
HTML编码
Razor自动对输出进行HTML编码：
<!-- 用户输入会被自动编码 -->
<p>@userInput</p>
<!-- 如果需要原始HTML -->
<p>@Html.Raw(userInput)</p> <!-- 谨慎使用 -->
实际应用示例
电子商务产品页面
@model ProductDetailViewModel
@section styles {
<link rel="stylesheet" href="~/css/product.css" />
}
<div class="product-container">
<div class="product-images">
<img src="@Model.MainImageUrl" alt="@Model.Name" />
<div class="thumbnails">
@foreach(var image in Model.AdditionalImages)
{
<img src="@image.Url" alt="@image.AltText" />
}
</div>
</div>
<div class="product-details">
<h1>@Model.Name</h1>
<div class="price">
@if(Model.IsOnSale)
{
<span class="original-price">@Model.OriginalPrice.ToString("C")</span>
<span class="sale-price">@Model.Price.ToString("C")</span>
<span class="discount">节省 @Model.DiscountPercentage.ToString("P0")</span>
}
else
{
<span>@Model.Price.ToString("C")</span>
}
</div>
<div class="rating">
@for(int i = 1; i <= 5; i++)
{
<span class="@(i <= Model.AverageRating ? "filled" : "")">★</span>
}
<span>(@Model.ReviewCount 条评价)</span>
</div>
<form asp-action="AddToCart" method="post" class="add-to-cart">
@Html.AntiForgeryToken()
<input type="hidden" asp-for="ProductId" />
<div class="quantity">
<label asp-for="Quantity"></label>
<select asp-for="Quantity">
@for(int i = 1; i <= 10; i++)
{
<option value="@i">@i</option>
}
</select>
</div>
<button type="submit">加入购物车</button>
</form>
<div class="product-description">
<h3>产品描述</h3>
<p>@Html.Raw(Model.Description)</p>
</div>
</div>
</div>
@section scripts {
<script src="~/js/product.js"></script>
}
调试技巧
使用@functions
可以在视图中定义函数：
@functions {
public string GetCssClassForRating(int star, double averageRating)
{
return star <= averageRating ? "filled" : "";
}
}
调试视图
@{
// 设置断点可以调试
var debugInfo = Model;
}
最佳实践
- 保持视图简单：将复杂逻辑移入控制器或服务层
- 使用强类型视图：避免使用ViewBag/ViewData
- 重用组件：利用局部视图和视图组件
- 关注安全：始终对用户输入进行验证和编码
- 优化性能：使用缓存和捆绑等技术
- 保持一致性：遵循项目约定的代码风格
结语
CSHTML作为ASP.NET Razor视图引擎的核心，提供了强大的功能来创建动态Web应用程序。从简单的内联表达式到复杂的布局系统和视图组件，它能够满足从简单到复杂的所有Web开发需求。通过遵循最佳实践并充分利用其特性，开发者可以构建出高效、安全且易于维护的Web应用程序。
掌握CSHTML需要实践和经验积累。建议从简单的页面开始，逐步尝试更复杂的特性，最终你将能够充分利用ASP.NET Razor视图引擎的全部潜力，构建出功能丰富、响应迅速的现代Web应用程序。
