Auxiliary input tag does not work with razor code

Question

I want to combine an auxiliary input tag with a razor code to set an attribute, but I cannot get these two technologies to work together. I'm just trying to set a disabled attribute in an input field based on the value of the property of the view model.

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

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

Highlighted output ...

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

When I put the razor code in front of the asp-for tag, the intellisense helper tag is not recognized, and the field is not set using the view model properties, as expected ...

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

Highlighted output ...

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

Note that combining intermediary and razor tags works if the razor code is inside the class attribute. Unfortunately, input fields require the disabled attribute, not a disabled class for bootstrapping.

Is there any way to make this work?

Answer 1

To display a disabled input element, you just need to add the disabled attribute. All below displays a disabled text input 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 an existing input tag helper to create an auxiliary read-only input tag.

Extend the InputTagHelper class, add a new property to determine whether the input should be disabled or not, and based on this value add the attribute "disabled" 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 special textarea helper, you need to call the addTagHelper method in _ViewImports.cshtml .

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

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

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

Answer 2

You can use the ASP Core tag helper this way:

 <input asp-for="Name" /> 

and then enter [Editable (false)] for your property as follows:

[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 into _ViewImports.cshtml:

 @addTagHelper *, <your assembly name> 

The advantage of this solution is to put logic in the model and preserve the principles of MVC.

Answer 3

For me, the TagHelper extension is redundant since I only needed to disable / enable two inputs, based on some model values. Therefore, I chose the simplest (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" /> } 

Answer 4

For anyone looking at this, check this out: https://github.com/aspnet/Mvc/issues/7333

Answer 5

you better do something like this:

 @{ var isDisabled = ((Model.OtherDrugs == null) ? "disabled" : string.Empty()); } 

and then

 @Html.TextBox("OtherDrugs", "", new { isDisabled })