在ASP.NET Core MVC中選擇標簽助手

 

在本文中，我們將探討標簽助手：它們是什么，內(nèi)置哪些標簽助手，選擇標簽助手，設(shè)置選定的選項，禁用選項和選項組，這是一個簡單的示例。

 

簡介

在本文中，我們將學習標簽助手。 本文介紹了以下主題。

• 什么是標簽助手？
• 什么是內(nèi)置標簽助手？
• 如何使用內(nèi)置的選擇標簽助手？
• 如何設(shè)置選擇的選項？
• 如何分組選項？
• 如何禁用選項或組？
• 結(jié)論

 

什么是標簽助手？

標記幫助程序使服務(wù)器端代碼可以幫助在Razor文件中創(chuàng)建和呈現(xiàn)HTML元素。 以下是標簽幫手為我們提供的東西：

• HTML友好的開發(fā)經(jīng)驗
• IntelliSense支持創(chuàng)建HTML和Razor標記
• 能夠使用僅服務(wù)器上可用的信息來生成更健壯，可靠和可維護的代碼

以下是標簽的Razor標記：

 

它為標簽生成以下HTML：

 

 

什么是內(nèi)置標簽助手？

以下是ASP.NET Core中的內(nèi)置標簽助手：

• 錨標簽
• 緩存標簽
• 組件標簽
• 分布式緩存標簽
• 環(huán)境標簽
• 表格標簽
• 表格行動標簽
• 圖片標簽助手
• 輸入標簽助手
• 標簽標簽助手
• 鏈接標簽
• 部分標簽
• 腳本標簽
• 選擇標簽
• 文本區(qū)標簽
• 驗證信息標簽
• 驗證摘要標簽

 

如何使用內(nèi)置選擇標簽助手？

它使用HTML select元素根據(jù)您的模型屬性生成一個下拉列表。 該下拉列表基于兩件事。 第一個是選擇，第二個是選項，其中包含選項列表。 替代方法是HTML幫助程序，即Html.DropDownListFor和Html.ListBoxFor。

以下是HTML下拉菜單的示例代碼：

 

 

輸出：上面的代碼僅顯示了帶有兩個選項的Mercedes和Audi的HTML下拉列表。

 

``asp-for''為選擇元素指定模型屬性名稱，為``選項''元素指定模型項名稱。 例如，在下面的代碼中，我們將了解如何在編程語言列表的幫助下使用Select Tag Helper。 在此示例中，我們創(chuàng)建了一個名為LangangageViewModel的視圖模型，該視圖模型具有兩個屬性-一個用于字符串類型的as-asp，另一個用于類型SelectListItem的asp項：

HTML:

 

 

C＃：Controller動作方法創(chuàng)建LangangageViewModel對象，并將其傳遞給視圖。

 

輸出：

 

以下是自動生成的用于選擇標簽助手的代碼。

HTML:

 

 

如何設(shè)置所選選項？

在前面的示例中，我們已經(jīng)看到它將C＃顯示為默認選定項，因為默認情況下列表中的第一個項是選中的。 如果要選擇與第一個項目不同的項目，可以設(shè)置如下代碼：

 

輸出：在下面的輸出中，您可以看到默認情況下選擇了TypeScript，因為我們已將模型語言屬性值設(shè)置為TS-它僅是選項值。

 

以下是自動生成的帶有默認選定項目的Select Tag Helper代碼。

HTML：在下面的代碼中，您可以看到為TS選項值添加了所選屬性。

如何分組選項？

在本文中，我們使用了``編程語言''示例在下拉列表中顯示語言列表。 現(xiàn)在我們要顯示帶有選項分組的下拉列表，例如前端和后端編程語言。

為此，我們將使用下拉選項組的屬性，即HTML optgroup元素。 我們在類型為SelectListGroup的SelectListItem中具有組屬性，讓我們看看如何使用它。

C＃：我已經(jīng)如下修改了我們的LanguageViewModel。

 

 

輸出：在下面，您可以按后端和前端編程語言查看選項分組。

 

 

以下是使用Group Option選擇標簽幫助程序的自動生成的代碼。

HTML：在下面的代碼中，您可以看到為后端和前端選項分組添加了optgroup元素。

 

 

 

如何禁用選項或組？

如果要禁用任何特定選項或選項組，則SelectListItem類和SelectListGroup類中都提供了布爾類型的禁用屬性。 該屬性的類型為布爾型，因此僅接受true或false值，默認值為false。 讓我們看看如何使用此屬性以及禁用一個選項或一組選項。

C＃：我已禁用選項Java和組選項Front-end進行選擇。

 

 

輸出：在下面您可以看到選項Java和組選項Front-end被禁用，文本為灰色。

 

以下是具有禁用屬性的Select Tag Helper的自動生成的代碼。

HTML：在下面的代碼中，您可以看到為前端選項分組和選項Java添加了禁用屬性。

 

 

結(jié)論

在本文中，我們通過一個簡單的示例討論了什么是標簽助手，內(nèi)置標簽助手，選擇標簽助手，設(shè)置選定選項，禁用選項和選項組。