Microsoft前后端不分離編程新風向：cshtml

在這里插入圖片描述

文章目錄

- 什么是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應用程序。
在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/83033.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/83033.shtml
英文地址，請注明出處：http://en.pswp.cn/web/83033.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！