iT邦幫忙

2024 iThome 鐵人賽

DAY 23
0
佛心分享-IT 人自學之術

ASP.NET Core 30日成長路系列 第 23

Day23:Tag Helpers搭配Razor使用的常見語法

  • 分享至 

  • xImage
  •  

Tag Helpers搭配Razor使用的常見語法


  1. <partial>部分檢視
    用來呼叫Partial View部分檢視,語法如下
<partial name="_PartialName" />  <!-- 呼叫 Partial View -->
<partial name="_PartialName" view-data="ViewData" />  <!--用 view-data 屬性傳遞 ViewData-->
<partial name="_PartialName" model="model 物件" />  <!-- 用 model 屬性傳遞 model 物件 -->
<partial name="_PartialName" for="model 物件" />  <!-- 用 for 屬性傳遞 model 物件 -->
<partial name="_PartialName" model="model 物件" view-data="ViewData"/> 
  1. <img>影像標籤
    用途是為<img>加上版本號碼,且版本具有唯一性。
    若是靜態圖檔遭到變更或修改,則會重新產生一組版本碼,這達到了快取破壞的效果,使瀏覽器一定會下載正確且最新的圖檔,而不是快取圖檔。

  2. <a>錨點
    Anchor錨點是藉由添加新的屬性來增強<a>標籤,而屬性是以asp-為開頭,因此設定受到asp-xxx所影響。
    下表為Anchor支援屬性的說明📄

asp-action:動作方法的名稱
asp-controller:控制器的名稱
asp-area:區域的名稱
asp-page:Razor 頁面的名稱
asp-page-handler:Razor 頁面處理常式的名稱
asp-route:路由名稱
asp-route-{value}:單一 URL 路由值,例如 asp-route-id="1234"
asp-all-route-data:所有路由值
asp-fragment:URL 片段
asp-protocol:URL 的通訊協定,例如 http 或 https
asp-host:Host 主機名稱

  1. <form>表單
    Form是用來產生HTML的<form>元素及其action屬性,設定方法有兩種:
    1️⃣指定Controller/Action名稱
    2️⃣指定Route路由名稱
    除了產生<form>元素之外,還會自動產生隱藏的請求驗證權杖(Request Verification Token),而在HTML.Helper的Html.BeginForm()方法中,須明確宣告Html.AntiForgery()才會產生。
    下表為Form支援屬性的說明📄

asp-controller:控制器的名稱
asp-action:動作方法的名稱
asp-area:區域的名稱
asp-page:Razor 頁面的名稱
asp-page-handler:Razor 頁面處理常式的名稱
asp-route:路由名稱
asp-route-{value}:單一 URL 路由值,例如 asp-route-id="1234"
asp-all-route-data:所有路由值
asp-fragment:URL 片段

  1. Form Action
    Form Action是針對Form內的<button><input type = "submit"><input type = "image">產生formaction屬性,其屬性之數值是指向特定URL。
    基本上formaction與Form標籤協助程式的功用大同小異,最大的差異就是URL的層級不同,因為formaction的層級大於Form標籤協助程式。
    且如果說一個表單中有多個按鈕分別指向不同URL,則Form action就可以很輕易地滿足該要求。

  2. <label>
    用來產生<label>元素及其標題與for屬性。
    但一般多搭配<input>使用。

  3. <input>
    input是用來產生<input>元素,以及id、name及type等屬性。

  4. <select>
    select會根據model模型的屬性來產生<select><option>元素。
    它可以用來當Html.DropDownListFor和Html.ListBoxFor的替代。

  5. <textarea>
    TextArea會依據asp-for屬性產生<textarea>元素及id、name屬性,它是Html.TextAreaFor的替代。

  6. <Validation>
    Validation Message會根據model屬性產生驗證訊息。
    驗證不通過時,會產生驗證失敗訊息,以提醒輸入之資料的格式錯誤。
    此屬性為Html.ValidationMessageFor的替代。

驗證訊息標籤協助程式:
組成➡️一個Validation+input(輸入驗證用)+<span>(驗證訊息產生的地方)
驗證發生地➡️預設是發生在Server端,但若在前端加入適當的JavaScript函式庫參考,就可在前端先發生。

  1. <Validation Summary>
    Validation Summary可在前端彙整所有驗證失敗的驗證訊息,並做摘要彙總顯示。
    而驗證摘要的設定方式是在<div>的asp-validation-summary屬性設定顯示訊息的範圍,如下所示。
    <div asp-validation-summary = "ModelOnly" class = "taxt-danger"></div>

  2. <cache>
    快取標籤協助程式可快取ASP.NET Core應用程式的內容至快取提供者,以增加效能。
    在ASP.NET Core中支援數種快取,其中最常見且最簡單的是IMemoryCache,此種快取實作是將快取儲存在相同Web Server的記憶體中,占用相同主機的記憶體空間,同時會受Web Server重啟而快取消失之影響。
    不過該快取是ASP.NET Core內建的快取實作,不需要額外的相依性注入,開發與測試相對較為簡單容易。

以下是快取支援的屬性說明📄

enabled:啟用快取。可設為 true 或 false
expires-on:指定絕對過期日期
expires-after:於首次快取內容後多少時間過期
expires-sliding:設定快取項目值多久未被存取就會過期
vary-by-header:在標頭值改變時會觸發快取重新整理
vary-by-query:依查詢字串的改變,而觸發快取重新整理
vary-by-cookie:依 cookie 的改變,而觸發快取重新整理
vary-by-user:依 @User.Identity.Names 改變,而觸發快取重新整理。可為 true 或 false
vary-by:當屬性字串值所參考的物件變更,而觸發快取重新整理
priority:設定快取保留的優先權層級,有 High、Normal(預設)、Low、NeverRemove 四種設定

  1. <distributed-cache>
    分散式快取可將內容快取分散至分散式快取來源,如:SQL Server或Redis,藉此大大提升效能。

分散式快取的優點:
✅可跨越多個網頁伺服器之請求,保持快取內容一致性。
✅不受網頁伺服器重啟或程式部署之影響。
✅不占用網頁伺服器本機記憶體

  1. <environment>
    Environment會依現有的裝載(Hosting)環境的不同,而有條件轉譯輸出所包含的內容。
    如以下environment設定,意思為在裝載環境為Staging或者是Development的情況下(環境間用逗號分隔),會輸出bootstrap.css的參考連結內容。
<environment names = "Staging, Development">
    <link rel = "stylesheet" href = "~lib/bootstrap/dist/css/bootstrap.css" />
</environment>

而若是將names項改為include也會有相同的效果,若是改成exclude則是將這些環境排除作輸出。
而最經典會用到環境標籤協助程式的例子就是「ASP.NET Core 2.2」預設的_Layout.cshtml會依照主機環境的不同去決定要從主機還是CDN去載入CSS與js函式庫。

那麼以上就是今天的分享啦~
明天見啦~See YA(。•̀ᴗ-)


上一篇
Day22:Tag Helpers vs Html Helpers
下一篇
Day24:如何用Html Helpers建立CRUD表單
系列文
ASP.NET Core 30日成長路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言