时间戳

首页 > 解决方案 > 我正在尝试将 Razor 页面上的 Select 选项设置为动态禁用

asp.net-core - 我正在尝试将 Razor 页面上的 Select 选项设置为动态禁用

问题描述

我正在尝试将 IEnumerable 中的选项之一设置为 Razor 页面中的禁用。希望它在列表中但被禁用的原因是数据库将保存 StatusId 但我需要用户选择其他选项之一，但要在页面加载时选择数据库状态。

这是我正在使用的 Razor 语法，它按预期填充列表。

 <div class="form-group col-md-6">
    <label asp-for="@Model.Status" class="control-label"></label>
    <select class="form-control" asp-for="@Model.Status" asp-items="@(new SelectList(Model.Statuses, "StatusId", "Description"))">
        <option disabled>Select Status</option>
    </select>
<span asp-validation-for="@Model.Status"></span>

我要做的是将一个项目（它的 StatusId 为 0）设置为禁用。如何在代码中实现这一点？

我希望生成的 HTML 看起来像这样

<div class="form-group col-md-6">
    <label class="control-label" for="Description">Description</label>
    <select class="form-control" data-val="true" data-val-required="The Status field is required." id="Status" name="Status">
        <option disabled>Select Status</option>
        <option value="1">Status 1</option>
        <option value="5">Status 2</option>
        <option value="99">Status 3</option>
        <option disabled selected="selected" value="0">Not Selectable Status</option>
    </select>
    <span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
</div>

这是可以实现的吗？谢谢

标签： asp.net-corerazor-pages

解决方案

您可以尝试使用 foreach 循环来构建选项。我完全不知道属性名称，所以我选择了 Disabled、Value、Text（您可以根据您的模型进行修改）

PS：如有语法错误请指正

<div class="form-group col-md-6">
    <label class="control-label" for="Description">Description</label>
    <select class="form-control" data-val="true" data-val-required="The Status field is required." id="Status" name="Status">
        <option disabled>Select Status</option>
        @foreach(var s in Model.Statuses)
        {
           if (s.Disabled)
           {
             <option disabled  value="@s.Value">@s.Text</option>
           }
           else
           {
              <option value="@s.Value">@s.Text</option>
           }
        }
    </select>
    <span class="field-validation-valid" data-valmsg-for="Description" data-valmsg-replace="true"></span>
</div>

推荐阅读