ASP.NET Core MVC中Form Tag Helpers用法介紹

2022-02-21 19:00:53

簡介

我們已經介紹過Tag Helpers以及一些最常用的Tag Helpers，也談到了快取Tag Helpers。在這篇文章中，我們將討論表單Tag Helpers。

HTML或Web表單通過使用各種HTML元素用於收集來自使用者的輸入，如輸入框、核取方塊、無線電鈕、下拉選單等。使用 <form> 元素時，我們通常使用POST請求。雖然也可以使用GET請求，不過GET請求建議提交於少量、非敏感的資料來獲取資料。

ASP.NET Core MVC提供了一些Form Tag Helpers，讓我們看看最重要的是什麼。

當我們使用<form>元素時，ASP.NET Core MVC會自動新增防禦CSRF攻擊保護措施；它通過生成隱藏的請求驗證令牌以防止CSRF攻擊。

看一個簡單的例子：

此程式碼輸出的介面如下：

然而，這並不是全部，在幕後發生了什麼：

請注意在HTTP Post操作方式中，RequestVerificationToken 與內建的[ValidateAntiForgeryToken]屬性一起工作，同時，該請求方法會被標記為post方式。

Form Tag Helper的還提供了asp-route-{ParameterName}屬性，其中引數名稱為被新增到路由的值；並且還提供了@Html.BeginForm和@Html.BeginRouteForm另一種清晰的替代方式。

如果我們新增一個自定義路由：

並將表單修改為如下：

我們得到以下HTML：

它將執行與剛才指定的 controller 和 action 方法。

這是使用舊的HTML Helpers語法：

    @using (Html.BeginForm("Edit", "Categories")) {

    }

新的語法是：

    <form asp-action="Edit" asp-controller="Categories">{

    }

第一個可能看起來更短更好，但第二個更自然，對於設計師或一名JS開發人員來說，在使用Angular、React的過程中，這將會更加自然。

這一個很簡單，它是@Html.EditorFor(m => m.Name)的替代方式。

假設我們有一個具有 Name 屬性的檢視模型：

    <input asp-for="Name" />`

會產生如下程式碼：

    <input type="text" id="Name" name="Name" />

這一個也很簡單，它是@Html.LabelFor(m => m.Name)的替代方式。

它與輸入框Tag Helper配合使用：

    <input asp-for="Name" />
    <label asp-for="Name" />

與其它一樣，也具有智慧感知功能，一旦您開始鍵入，就會檢測屬性的名稱：

如果我們將 Display 特性應用於 Name 屬性：

這是我們將獲得的HTML內容：

    <label for="Name">Category Name</label>

這一個非常類似於Input Tag Helper：

以下Razor程式碼：

    <textarea asp-for="Name"></textarea>`

我們將得到以下輸出：

我們使用Validation Tag Helper為我們的檢視模型的屬性顯示驗證訊息，使用方式也很簡單：

    <span asp-validation-for="Name"></span>

我們得到的HTML：

    <span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

到此這篇關於ASP.NET Core MVC中Form Tag Helpers用法的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支援it145.com。