如何有条件地禁用标记助手中的<select>?

时间:2017-08-07 22:12:13

标签: razor asp.net-core asp.net-core-tag-helpers

我的目标是根据传递给视图的模型对象的状态有条件地禁用下拉列表。 以下代码正确呈现已禁用的&lt; select&gt;标签(但不是有条件的): &lt; select class =&#34; form-control&#34; ASP-用于=&#34;优先级&#34; ASP-项=&#34; @ priorityList&#34;禁用&GT;&LT; /选择&GT; 以下不是。禁用的属性不会出现在呈现页面的页面源中: @ {string disabled = Model.CaseMode == Mode.Active? &#34;&#34; :&#34;禁用&#34 ;; } &lt; select class =&#34; form-control&#34; ASP-用于=&#34;优先级&#34; ASP-项=&#34; @ priorityList&#34; @禁用&GT;&LT; /选择&GT; 此外,以下也不会禁用&lt; select&gt;标签。 &lt; select class =&#34; form-control&#34; ASP-用于=&#34;优先级&#34; ASP-项=&#34; @ priorityList&#34; @((Model.CaseMode == Mode.Closed)?&#34;禁用&#34;:&#34;&#34;)&gt;&lt; / select&gt; 我认为这个问题与标签助手处理&lt; select&gt;有关。在模板中完成字符串替换之前的标记。谁能建议我如何有条件地禁用这个元素而不必在if else结构中渲染两个单独的元素?

3 个答案:

答案 0 :(得分:6)

无需创建自定义TagHelper。试试这个。

<select class="form-control" asp-for="Priority" asp-items="@priorityList" disabled="@(true)"></select>
<select class="form-control" asp-for="Priority" asp-items="@priorityList" disabled="@(false)"></select>

这个渲染:

<select class="form-control" id="Priority" name="Priority" disabled="disabled">...</select>
<select class="form-control" id="Priority" name="Priority">...</select>

我从这里意识到:https://github.com/aspnet/Mvc/issues/7333#issuecomment-363504164

答案 1 :(得分:3)

使用默认的select标记帮助程序是不可能的,但是您可以创建自己的,并将其配置为对接受布尔值的自定义asp-disabled属性做出反应。

在您看来:

<select class="form-control" asp-for="Priority" asp-items="@priorityList" asp-disabled="@(Model.CaseMode == Mode.Closed)"></select>

然后,创建您的TagHelper课程:

using Microsoft.AspNetCore.Razor.TagHelpers;
using System;

namespace YourNamespace.TagHelpers
{
    // Triggered on all select elements with the asp-disabled attribute
    [HtmlTargetElement("select", Attributes = DisabledAttributeName)]
    public class SelectTagHelper : TagHelper
    {
        private const string DisabledAttributeName = "asp-disabled";

        /// Get the value of the condition
        [HtmlAttributeName(DisabledAttributeName)]
        public bool Disabled { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            if (context == null)
                throw new ArgumentNullException(nameof(context));

            if (output == null)
                throw new ArgumentNullException(nameof(output));

            if (Disabled)
                output.Attributes.SetAttribute("disabled", null);
        }
    }
}

为确保您使用TagHelper,您还需要在_ViewImports.cshtml中注册:

@addTagHelper *, YourNamespace

答案 2 :(得分:0)

因为disabled =“ false”对我不起作用,也不想只为一个选择列表添加扩展类...这是我解决的方法:

@{ string disabled = Model.CaseMode == Mode.Active ? "disabled" : null; }
<select  asp-for="Priority" class="form-control" disabled="@disabled" asp-items="@priorityList"></select>

另一种可行的解决方案是将您的条件保存在ViewData词典中,并在文档加载后进行评估:

@if((bool)ViewData["YourModelCondition"]){
     $('#selectListID').prop('disabled', 'disabled');
}

注意:如果使用第二种解决方案,则需要为选择项指定ID。