输入标签助手不使用 Razor 代码答案

【问题标题】：Input Tag Helper Not Working with Razor Code输入标签助手不使用 Razor 代码
【发布时间】：2017-03-22 03:00:17
【问题描述】：

我想将输入标签助手与剃须刀代码结合起来设置属性，但我无法让这两种技术一起工作。我只是想根据视图模型属性的值在输入字段上设置 disabled 属性。

当我将剃须刀代码放在asp-for 标记之后时，无法识别剃须刀智能感知并且该字段未按预期禁用...

<input asp-for="OtherDrugs" @((Model.OtherDrugs == null) ? "disabled" : "") class="form-control" />

渲染输出...

<input type="text" id="OtherDrugs" name="OtherDrugs" value="" />

当我将剃须刀代码放在asp-for 标记之前时，无法识别标记助手智能感知，并且未按预期使用视图模型属性设置该字段...

<input @((Model.OtherDrugs == null) ? "disabled" : "") asp-for="OtherDrug" class="form-control" />

渲染输出...

<input disabled asp-for="OtherDrugs" class="form-control" />

请注意，如果 razor 代码位于类属性中，则组合标签助手和 razor 确实有效。不幸的是，输入字段需要 disabled 属性，而不是 bootstrap 3 的 disabled 类。

有没有办法让它工作？

【问题讨论】：

我没用过TagHelpers，所以在这里暗中拍摄，你能把三元包在中吗？

标签： c# razor asp.net-core asp.net-core-tag-helpers

【解决方案1】：

要渲染禁用的输入元素，您只需添加一个禁用属性。以下所有内容都将呈现禁用的输入文本元素。

<input type="checkbox" disabled />
<input type="checkbox" disabled="disabled" />
<input type="checkbox" disabled="false" />
<input type="checkbox" disabled="no" />
<input type="checkbox" disabled="enabled" />
<input type="checkbox" disabled="why is it still disabled" />

在 Asp.NET Core 中，您可以扩展现有的输入标签助手以创建只读输入标签助手。

扩展InputTagHelper类，添加一个新属性来识别输入是否应该被禁用，并根据这个值，为输入添加“禁用”属性。

[HtmlTargetElement("input", Attributes = ForAttributeName)]
public class MyCustomTextArea : InputTagHelper
{
    private const string ForAttributeName = "asp-for";

    [HtmlAttributeName("asp-is-disabled")]
    public bool IsDisabled { set; get; }

    public MyCustomTextArea(IHtmlGenerator generator) : base(generator)
    {
    }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        if (IsDisabled)
        {
            var d = new TagHelperAttribute("disabled", "disabled");
            output.Attributes.Add(d);
        }
        base.Process(context, output);
    }
}

现在要使用这个自定义 textarea 助手，您需要调用 _ViewImports.cshtml 中的 addTagHelper 方法。

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, YourAssemblyNameHere

现在在您看来，您可以指定asp-is-disabled 属性值。

<input type="text" asp-for="OtherDrugs" 
                                  asp-is-disabled="@Model.OtherDrugs==null"/>

【讨论】：

开箱即用会很好，但您的自定义标签助手做得很好。谢谢
@Shyju 我在输入中使用了这个自定义标签助手，除了一个问题外它工作得很好。它两次呈现一个复选框。对此有什么想法吗？
所以我可以确认它是 assembly name - .dll/.exe 扩展名而不是命名空间（有时两者实际上可能不同）

【解决方案2】：

你可以像这样使用 ASP Core 标签助手：

<input asp-for="Name" />

然后像这样为您的属性添加 [Editable(false)]：

[Editable(false)] public string Name {set;get;}

那么你应该扩展 InputTagHelper:

[HtmlTargetElement("input", Attributes = ForAttributeName)]
public class ExtendedInputTagHelper : InputTagHelper
{
    private const string ForAttributeName = "asp-for";

    public ExtendedInputTagHelper(IHtmlGenerator generator)
        : base(generator) { }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        var isContentModified = output.IsContentModified;

        if (For.Metadata.IsReadOnly)
        {
            var attribute = new TagHelperAttribute("disabled", "disabled");
            output.Attributes.Add(attribute);
        }

        if (!isContentModified)
        {
            base.Process(context, output);
        }
    }
}

最后在 _ViewImports.cshtml 中导入您的 TagHelper：

@addTagHelper *, <your assembly name>

这种解决方案的优点是将逻辑放入模型中并保留 MVC 原则。

【讨论】：

【解决方案3】：

对我来说，TagHelper 扩展有点过头了，因为我只需要根据一些模型值禁用/启用两个输入。因此，我选择了最简单（可能不是最好）的方法 - @if/else。

@if (Model.OtherDrugs == null)
{
    <input asp-for="OtherDrug" disabled="disabled" class="form-control" />
}
else
{
    <input asp-for="OtherDrug" class="form-control" />
}

【讨论】：