Conditional Html attribute using razor @html helpers

Question

I'm trying to add a disable attribute to the html that is generated via @html helper functions but can't seem to get something working that works in the attrib parameters of the html helper. what i have below will still write disabled for the html... but i can't remove it cause then the helper doesn't work.

i have a variable defined:

@{ var displayItem = (Model.TypeId == 100) }

@Html.TextBox("listitem", "", new {@class = "form-control", @disabled = (@displayItem ? "" : "disabled")})

but because i have to list the parameter @disabled, that produces html like this:

<input class="form-control"  disabled="" id="listitem" name="listitem"  type="text" value="" />

because disabled is listed it disables the input. but the html helper doesn't work unless i give it a parameter name.

How to write the disabled in the parameter list so that disabled doesn't show at all if it's not supposed to be disabled?

user3559349 · Accepted Answer · 2017-08-10 22:07:52Z

3

You can use

@{ var displayItem = (Model.TypeId == 100) }
@Html.TextBox("listitem", "", displayItem ? (object)new { @class = "form-control", disabled = "disabled" } : (object)new { @class = "form-control"});

or

@{
    var attributes = Model.TypeId == 100 ? (object)new { @class = "form-control", disabled = "disabled" } : (object)new { @class = "form-control"});
}
@Html.TextBox("listitem", "", attributes)

or a simple if block

@(if Model.TypeId == 100)
{
    @Html.TextBox("listitem", "", new {@class = "form-control", disabled = "disabled" })
}
else
{
    @Html.TextBox("listitem", "", new {@class = "form-control" })
}

Note that the value of disabled controls are not submitted, so a readonly attribute may be more appropriate

answered Aug 10, 2017 at 22:07

user3559349

Sign up to request clarification or add additional context in comments.

1 Comment

user1161137 Over a year ago

ok, i was wondering if there was some other trick to doing the construction of the attribute parameter, but i guess not. Tx.

Dave de Jong · Accepted Answer · 2023-11-20 16:09:58Z

3

You also can use a Dictionary<string, object> and pass that to the html helper:

@{
    var attributes = new Dictionary<string, object>
    {
        { "class", "form-control" }
    };

    if (Model.TypeId == 100)
    {
        attributes.Add("disabled", "disabled");
    }
}

@Html.TextBox("listitem", "", attributes)

edited Nov 20, 2023 at 16:09

answered Jun 8, 2020 at 9:58

Dave de Jong

1,0648 silver badges14 bronze badges

1 Comment

Cornescu Cătălin Over a year ago

This is the most correct way in my opinion. The htmlAttributes parameter for HtmlHelpers can be either object or IDictionary<string, object>

Collectives™ on Stack Overflow

Conditional Html attribute using razor @html helpers

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related