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
– Kees C. Bakker, Commented Jan 24, 2016 at 12:31
Possible duplicate of Set disable attribute based on a condition for Html.TextBoxFor — KyleMit
– KyleMit ♦, Commented Nov 30, 2017 at 15:27
As a side note, the required attribute is also a boolean attribute — user3559349
– user3559349, Commented Nov 30, 2017 at 21:42

Kees C. Bakker · Accepted Answer · 2016-01-24 13:13:07Z

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, 2016 at 13:13

Kees C. Bakker

33.6k31 gold badges120 silver badges208 bronze badges

answered Jan 24, 2016 at 12:46

Linus Caldwell

11.1k12 gold badges48 silver badges61 bronze badges

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

1 Comment

Kees C. Bakker Over a year ago

This works. But the if condition needs to be between { }, otherwise compilations fails.

Linus Caldwell · Accepted Answer · 2016-01-24 12:53:54Z

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, 2016 at 12:53

Linus Caldwell

11.1k12 gold badges48 silver badges61 bronze badges

answered Jan 24, 2016 at 12:50

Arash

3,7089 gold badges37 silver badges55 bronze badges

9 Comments

Kees C. Bakker Over a year ago

I don't understand this solution. Can you elaborate?

Arash Over a year ago

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 Over a year ago

ViewBag is Dynamic Type in C# , so you can add properties to it in runtime as we did in above example.

Kees C. Bakker Over a year ago

But I have a form with multiple fields. How would I go about in such a case?

Arash Over a year ago

excuse me but i am not clear about your comment , you can use autofocus only for one form field .

|

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related