输入标签助手不能与Razor代码一起工作

本文关键字：Razor 代码 一起 工作 不能 标签 输入 | 更新日期: 2023-09-27 18:17:07

我想结合输入标记帮助器和razor代码来设置属性，但是我无法让这两种技术一起工作。我只是试图根据视图模型属性的值在输入字段上设置禁用属性。

当我将剃刀代码放在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属性，而不是disabled类。

有办法让这个工作吗?

输入标签助手不能与Razor代码一起工作

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

<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。您可以扩展现有的输入标记帮助器来创建只读输入标记帮助器。

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

[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);
    }
}

现在要使用这个自定义文本区域帮助器，您需要调用_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"/>

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

<input asp-for="Name" />

，然后为你的属性设置[edit (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>
这个解决方案的优点是将逻辑放在Model中并保留MVC原则。

对我来说TagHelper扩展是多余的，因为我只需要根据一些模型值禁用/启用两个输入。因此，我采用了最简单的(可能不是最好的)方法——@if/else。

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