输入标签助手不能与剃刀代码一起使用 [英] Input Tag Helper Not Working with Razor Code

问题描述

我想将输入标签助手与剃刀代码结合使用以设置属性，但是我无法使这两种技术协同工作。我只是试图根据视图模型属性的值在输入字段上设置禁用属性。

I want to combine an input tag helper with razor code to set an attribute but I cannot get the two technologies to work together. I am simply trying to set the disabled attribute on the input field based on the value of view model property.

当我将剃刀代码放在 asp-for 标签无法识别剃刀智能感应并且该字段未按预期禁用...

When i put the razor code after the asp-for tag the razor intellisense is not recognized and the field is not disabled as expected...

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

渲染输出...

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

当我将剃须刀代码放在 asp-for 标签无法识别标签帮助程序intellisense，并且未按预期设置视图模型属性的字段...

When i put the razor code before the asp-for tag the tag helper intellisense is not recognized and the field is not set with the view model properties as expected...

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

渲染输出...

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

请注意，如果剃刀代码在class属性中，则结合使用标签助手和剃刀即可。不幸的是，输入字段要求使用bootstrap 3的disabled属性而不是disabled类。

有没有办法使这项工作呢？

Is there a way to make this work?

推荐答案

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

To render the disabled input element, you simply need to add a disabled attribute. All the below will render a disabled input text element.

<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中，您可以扩展现有的输入标记助手，以创建一个只读的输入标记助手。 。

In Asp.NET Core, You can extend the existing input tag helper to create a readonly input tag helper.

扩展 InputTagHelper 类，添加新属性以标识是否应该禁用输入，并基于

Extend the InputTagHelper class, add a new property to identify whether the input should be disabled or not and based on this value, add the "disabled" attribute to the input.

[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 方法。

Now to use this custom textarea helper, you need to call the addTagHelper method in _ViewImports.cshtml.

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

现在在您的视图中，您可以指定 asp-is-disable 属性值。

Now in your view, you can specify the asp-is-disabled attribute value.

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

这篇关于输入标签助手不能与剃刀代码一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！