如何在 .NET 中禁用 @html.dropdownlist 選項標簽？

Question

查看標記：

@Html.DropDownListFor(model => model.entityType, ViewBag.entityType as SelectList, "Select Type", new { @class = "custom-select"})

這是.NET 中的下拉列表，“選擇類型”是選項標簽。

我的期望：我想禁用“選擇類型”選項標簽。 我怎樣才能做到這一點？

提前感謝誰幫助我。

問候：PHioNiX

Answer 1

我的期望：我想禁用“選擇類型”選項標簽。 我怎樣才能做到這一點？

好吧，它可以使用幾種方法來實現。 然而，最簡單和有效的方法是，我們將在您的場景中通過它的class name檢查SelectList ，它將是@class = "custom-select"並按照我們在這里期望的方式設置屬性，禁用更具體。 就像下面這樣：

$('.custom-select option:contains("Select Type")').attr("disabled", "disabled");

注意：這里， .custom-select是你的類名，我們正在檢查Select Type並最終設置屬性disabled 。 我們完了。 為什么它有效，因為循環總是花費很多。 我們在這里沒有使用總是具有Big 0影響的循環。

完整的解決方案：

模型：

public class EntityTypeModel
    {
        
        public string? entityType { get; set; }
    }

控制器：

public IActionResult Create()
        {
            List<SelectListItem> entityTypeList = new List<SelectListItem>();
            entityTypeList.Add(new SelectListItem { Text = "Entity-Type-C#", Value = "Entity-Type-C#" });
            entityTypeList.Add(new SelectListItem { Text = "Entity-Type-SQL", Value = "Entity-Type-SQL" });
            entityTypeList.Add(new SelectListItem { Text = "Entity-Type-Asp.net core", Value = "Entity-Type-Asp.net core" });
            ViewBag.entityType = entityTypeList;
            return View();
        }

看法：

@model DotNet6MVCWebApp.Models.EntityTypeModel
@{
    ViewData["Title"] = "Create";
}

<h4>Entity Type Dropdown</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label asp-for="entityType" class="control-label"></label>
            @Html.DropDownListFor(model => model.entityType, @ViewBag.entityType as SelectList, "Select Type", new { @class = "custom-select"})
            <span asp-validation-for="entityType" class="text-danger"></span>
        </div>
    </div>
</div>
@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.custom-select option:contains("Select Type")').attr("disabled", "disabled");
        });
    </script>
}

輸出：

更新：

您可以做的另一件事是：您可以像這樣從后端設置"Select Type"文本：

entityTypeList.Add(new SelectListItem { Text = "Select Type", Value = "Select Type" });

然后您可以檢查用戶是否選擇了Select Type在這種情況下您可以使用以下錯誤消息更新ModelState ：

if (EntityTypeModel.entityType.Contains("Select Type"))
            {
                ModelState.AddModelError("", "Entity Type should not be Select Type");
            }

Answer 2

可選標簽具有空value屬性。 因此，下面的 JavaScript 將其disabled ：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {        
        document.querySelectorAll("#entityType option").forEach(opt => {
            if (opt.value == "") {
                opt.disabled = true;
            }
        });
    });
</script>

@Html.DropDownListFor(model => model.entityType, ViewBag.entityType as SelectList, "Select Type", new { @class = "custom-select"})

Answer 3

如果您想完全隱藏選擇中的條目，只需將null作為optionLabel參數的值傳遞。

@Html.DropDownListFor(model => model.entityType, ViewBag.entityType as SelectList, null, new { @class = "custom-select"})

或者使用沒有optionLabel參數的方法的重載。

@Html.DropDownListFor(model => model.entityType, ViewBag.entityType as SelectList, new { @class = "custom-select"})