簡(jiǎn)介

我們已經(jīng)介紹過(guò)Tag Helpers以及一些最常用的Tag Helpers，也談到了緩存Tag Helpers。在這篇文章中，我們將討論表單Tag Helpers。

HTML或Web表單通過(guò)使用各種HTML元素用于收集來(lái)自用戶(hù)的輸入，如輸入框、復(fù)選框、單選按鈕、下拉列表等。使用 <form> 元素時(shí)，我們通常使用POST請(qǐng)求。雖然也可以使用GET請(qǐng)求，不過(guò)GET請(qǐng)求建議提交于少量、非敏感的數(shù)據(jù)來(lái)獲取數(shù)據(jù)。

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

Form Tag Helper

當(dāng)我們使用<form>元素時(shí)，ASP.NET Core MVC會(huì)自動(dòng)添加防御CSRF攻擊保護(hù)措施；它通過(guò)生成隱藏的請(qǐng)求驗(yàn)證令牌以防止CSRF攻擊。

看一個(gè)簡(jiǎn)單的例子：

此代碼輸出的界面如下：

然而，這并不是全部，在幕后發(fā)生了什么：

請(qǐng)注意在HTTP Post操作方式中，RequestVerificationToken 與內(nèi)置的[ValidateAntiForgeryToken]屬性一起工作，同時(shí)，該請(qǐng)求方法會(huì)被標(biāo)記為post方式。

Form Tag Helper的還提供了asp-route-{ParameterName}屬性，其中參數(shù)名稱(chēng)為被添加到路由的值；并且還提供了@Html.BeginForm和@Html.BeginRouteForm另一種清晰的替代方式。

如果我們添加一個(gè)自定義路由：

并將表單修改為如下：

我們得到以下HTML：

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

這是使用舊的HTML Helpers語(yǔ)法：

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

    }

新的語(yǔ)法是：

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

    }

第一個(gè)可能看起來(lái)更短更好，但第二個(gè)更自然，對(duì)于設(shè)計(jì)師或一名JS開(kāi)發(fā)人員來(lái)說(shuō)，在使用Angular、React的過(guò)程中，這將會(huì)更加自然。

Input Tag Helper

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

假設(shè)我們有一個(gè)具有 Name 屬性的視圖模型：

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

會(huì)產(chǎn)生如下代碼：

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

Label Tag Helper

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

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

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

與其它一樣，也具有智能感知功能，一旦您開(kāi)始鍵入，就會(huì)檢測(cè)屬性的名稱(chēng)：

如果我們將 Display 特性應(yīng)用于 Name 屬性：

這是我們將獲得的HTML內(nèi)容：

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

TextArea Tag Helper

這一個(gè)非常類(lèi)似于Input Tag Helper：

以下Razor代碼：

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

我們將得到以下輸出：

Validation Message Tag Helper

我們使用Validation Tag Helper為我們的視圖模型的屬性顯示驗(yàn)證消息，使用方式也很簡(jiǎn)單：

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

我們得到的HTML：

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

到此這篇關(guān)于ASP.NET Core MVC中Form Tag Helpers用法的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論