Optionally disable element rendered via MVC

Question

I've got a textbox element which is being rendered inside of my .ascx file using MVC's mark-up:

<%= Html.TextBoxFor(model => model.AssignedOperatorDisplayName, new
    {
        @class = "assignedOperatorDisplayNameTextArea"
    })
%>

I now need to conditionally disable this textbox element. Initially, I attempted to do so by setting the disabled attribute to true or false:

<%= Html.TextBoxFor(model => model.AssignedOperatorDisplayName, new
    {
        @class = "assignedOperatorDisplayNameTextArea",
        disabled = Model.IsElementDisabled()
    })
%>

Unfortunately, this does not work because the browser interprets the presence of the disabled attribute as "true" regardless of whether its value is set to true or false as seen here: http://jsfiddle.net/zWQbL/

So, I'm left wondering how to do this. I was playing around with merging two anonymous objects together using the following article: Merging anonymous types but this isn't working and it feels really wrong.

Any ideas?

EDIT: I'm went with this answer, but there are a few ways to achieve the result. I'd encourage anyone looking at this to consider there needs before using one solution over another.

<%= Html.TextBoxFor(model => model.AssignedOperatorDisplayName, new Dictionary<string, object>()
{
    {
        "class", "assignedOperatorDisplayNameTextArea"
    }
}.WithAttrIf(Model.IsTaskComplete(), "disabled", "true"))%>   

public static Dictionary<string, object> WithAttrIf(this Dictionary<string, object> dictionary, bool condition, string attrname, object value)
{
    if (condition)
        dictionary[attrname] = value;

    return dictionary;
}

not sure, but try `visible` – Tim Vermaelen Apr 18 '14 at 17:27 — Tim Vermaelen, Apr 18 '14 at 17:27

Craig W. · Accepted Answer · 2014-04-18T17:35:59.843

3

Use a ternary operator to conditionally assign the HTML attributes.

<$= Html.TextBoxFor(model => model.AssignedOperatorDisplayName, 
    Model.IsElementDisabled() ? 
        (object)new 
        {
            disabled="disabled", 
            @class = "assignedOperatorDisplayNameTextArea" 
        } :
        new { @class = "assignedOperatorDisplayNameTextArea" })

edited Apr 18 '14 at 17:35

answered Apr 18 '14 at 17:32

Craig W.

17,838
6
49
82

Is there a way to achieve this while keeping my class declaration DRY? – Sean Anderson Apr 18 '14 at 17:35
1

You could create your own helper method that allowed you to pass in whether or not you wanted the control disabled. There's an example of doing that on Stackoverflow here http://stackoverflow.com/a/6660176/97382. – Craig W. Apr 18 '14 at 17:37
Cool. Thanks for the information. I have to apply this logic to several types of elements, not just a TextBoxFor. Do you have any thoughts on whether it is better to apply an extension method to multiple types of elements or whether using the dictionary extension I edited into my original post would be better? – Sean Anderson Apr 18 '14 at 17:40
1

I think the decision which way to go is really one of personal preference. I like to try to keep my views fairly clean and, to me, the syntax of using that dictionary extension is a little yucky, and it'll get yuckier the more HTML attributes you want to set. But that's a personal/aesthetic opinion, not a technical one. – Craig W. Apr 18 '14 at 17:45

Optionally disable element rendered via MVC

1 Answers1