在ASP.NET Core MVC中選擇標(biāo)簽助手

 

 

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

 

簡(jiǎn)介

在本文中，我們將學(xué)習(xí)標(biāo)簽助手。 本文介紹了以下主題。

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

 

什么是標(biāo)簽助手？

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

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

以下是標(biāo)簽的Razor標(biāo)記：

 

 

它為標(biāo)簽生成以下HTML：

 

 

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

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

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

 

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

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

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

 

 

輸出：上面的代碼僅顯示了帶有兩個(gè)選項(xiàng)的Mercedes和Audi的HTML下拉列表。

 

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

HTML:

 

 

??

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

 

 

?輸出：

 

 

以下是自動(dòng)生成的用于選擇標(biāo)簽助手的代碼。

HTML:

 

 

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

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

?

 

輸出：在下面的輸出中，您可以看到默認(rèn)情況下選擇了TypeScript，因?yàn)槲覀円褜⒛Ｐ驼Z(yǔ)言屬性值設(shè)置為TS-它僅是選項(xiàng)值。

 

以下是自動(dòng)生成的帶有默認(rèn)選定項(xiàng)目的Select Tag Helper代碼。

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

如何分組選項(xiàng)？

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

為此，我們將使用下拉選項(xiàng)組的屬性，即HTML optgroup元素。 我們?cè)陬愋蜑镾electListGroup的SelectListItem中具有組屬性，讓我們看看如何使用它。

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

 

?

 

輸出：在下面，您可以按后端和前端編程語(yǔ)言查看選項(xiàng)分組。

 

以下是使用Group Option選擇標(biāo)簽幫助程序的自動(dòng)生成的代碼。

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

 

 

 

如何禁用選項(xiàng)或組？

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

C＃：我已禁用選項(xiàng)Java和組選項(xiàng)Front-end進(jìn)行選擇。

 

 

 

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

 

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

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

 

 

 

結(jié)論

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