如何在 .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"})