How to make a boolean HTML5 attribute 'conditional' in ASP.Net MVC?

Question

I'm using ASP.Net MVC (5.2.3.0) to create a form field:

@Html.TextBoxFor(
    x => x.UserName, 
    new { 
        @class = "form-control", 
        placeholder = "Enter your username", 
        required = true, 
        autofocus = true 
});

So far so good, but now I like to make the autofocus attribute conditional. How would I go about?

The autofocus attribute is a boolean attribute and W3C states:

Note: The values "true" and "false" are not allowed on boolean attributes. To represent a false value, the attribute has to be omitted altogether.

The following doesn't work in MVC, because it still renders the autofocus attribute causing the browser to do the auto focus:

autofocus = String.IsNullOrEmpty(this.Model.UserName)
autofocus = String.IsNullOrEmpty(this.Model.UserName) ? null : ""`

Does anybody know how to solve this problem?

That's true, in practice all browsers ignore the value. How would I go about in getting the TextBoxFor _not_ to render the attribute. — Kees C. Bakker, Jan 24 '16 at 12:31
Possible duplicate of [Set disable attribute based on a condition for Html.TextBoxFor](https://stackoverflow.com/questions/6660146/set-disable-attribute-based-on-a-condition-for-html-textboxfor) — KyleMit, Nov 30 '17 at 15:27
As a side note, the `required` attribute is also a `boolean` attribute — , Nov 30 '17 at 21:42

score 5 · Accepted Answer · edited Jan 24 '16 at 13:13

5

You could create an attribute dictionary somewhere before in the view:

@{
    var usernameAttrs = new Dictionary<string, object>
    {
        {"class ", "form-control"},
        {"placeholder  ", "Enter your username"},
        {"required", true},
    };

    if (String.IsNullOrEmpty(this.Model.UserName))
    {
        usernameAttrs.Add("autofocus", true);
    }
}

and use it in the TextBoxFor()

@Html.TextBoxFor(x => x.UserName, usernameAttrs);

edited Jan 24 '16 at 13:13

Kees C. Bakker

32,294
27
115
203

answered Jan 24 '16 at 12:46

Linus Caldwell

10,908
12
46
58

1

This works. But the if condition needs to be between `{ }`, otherwise compilations fails. – Kees C. Bakker Jan 24 '16 at 12:55

score 0 · Answer 2 · edited Jan 24 '16 at 12:53

0

check your condition in controller and if true set ViewBag.Tag = autofocus and then in your view

@Html.TextBoxFor(
    x => x.UserName, 
    new { 
        @class = "form-control", 
        placeholder = "Enter your username", 
        required = true, 
        ViewBag.Tag 
});

edited Jan 24 '16 at 12:53

Linus Caldwell

10,908
12
46
58

answered Jan 24 '16 at 12:50

Arash

3,458
7
32
50

I don't understand this solution. Can you elaborate? – Kees C. Bakker Jan 24 '16 at 12:51
in your controller if ( !String.IsNullOrEmpty(Model.UserName)){ViewBag.Tag="autofocus"} and then you have ViewBag.tag in your view if the condition is not true then it just do nothing and if it is true it just print add autofocus as attribute. – Arash Jan 24 '16 at 12:52
ViewBag is Dynamic Type in C# , so you can add properties to it in runtime as we did in above example. – Arash Jan 24 '16 at 12:56
But I have a form with multiple fields. How would I go about in such a case? – Kees C. Bakker Jan 24 '16 at 12:58
excuse me but i am not clear about your comment , you can use autofocus only for one form field . – Arash Jan 24 '16 at 13:03
True, but when I have a condition, I can choose which field I would like to focus. – Kees C. Bakker Jan 24 '16 at 13:04
what is your condition ? – Arash Jan 24 '16 at 13:06
If field A is empty, I focus the control for field A else if B is empty, I focus the control for field B else I focus a submit button control. – Kees C. Bakker Jan 24 '16 at 13:08
well here you have two option , first you can use Linus Caldwell approach as he explained above , using dictionary type and using your if condition in your view , second option witch i think is a bit messy is to add another properties to your ViewBag and set its value as name of your class properties and in your view check that. for example if (yourobject.fieldA!=null){ViewBag.PropertyName="fieldA",ViewBag.tag=autofocus} and now check ViewBag.PropertyName . – Arash Jan 24 '16 at 13:16

How to make a boolean HTML5 attribute 'conditional' in ASP.Net MVC?

2 Answers2