当前位置：首页 > article >正文

Microsoft前后端不分离编程新风向：cshtml

article 2025/6/8 10:12:36

在这里插入图片描述

文章目录

- 什么是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>&copy; @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应用程序。
在这里插入图片描述