Input Tag Helper Not Working with Razor Code

Question

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.

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" />

Rendered output...

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

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" />

Rendered output...

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

Note that combining tag helpers and razor does work if the razor code is inside a class attribute. Unfortunately input fields require the disabled attribute and not the disabled class for bootstrap 3.

Is there a way to make this work?

Answer 1

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" />

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

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

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

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

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"/> 

Answer 2

You can use ASP Core tag helper like this:

<input asp-for="Name" />

and then put [Editable(false)] for your property like this:

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

then you should extend 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);
        }
    }
}

and finally import your TagHelper in _ViewImports.cshtml:

@addTagHelper *, <your assembly name>

the advantage of this solution is putting logic in Model and preserving MVC principles.

Answer 3

For me the TagHelper extension is an overkill, since I needed just two inputs disabled/enabled, based on some model values. Therefore I went for the simpliest (probably not the best) approach - @if/else.

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