user547794
user547794

Reputation: 14511

adding "name" attribute to CheckBoxFor

I am trying to add a "name" attribute to my CheckBoxFor and can't get it to work.

@Html.CheckBoxFor(
model => model.ProvidePracticalSuggestions, 
new { @name = "help_practicalSuggestions" 
                })

Any idea what I am doing wrong here?

Rendered HTML:

<div>
      <input data-val="true" data-val-required="The Provide practical suggestions for implementing change, e.g. step-by-step best practices field is required." id="ProvidePracticalSuggestions" name="ProvidePracticalSuggestions" type="checkbox" value="true" /><input name="ProvidePracticalSuggestions" type="hidden" value="false" />
       <span class="field-validation-valid" data-valmsg-for="ProvidePracticalSuggestions" data-valmsg-replace="true"></span>
       <label for="ProvidePracticalSuggestions">Provide practical suggestions for implementing change, e.g. step-by-step best practices</label>
</div>

Upvotes: 14

Views: 34180

Answers (8)

Shyju
Shyju

Reputation: 218722

EDIT on 09/07/2016

This will not work

@Html.CheckBoxFor(model => model.ProvidePracticalSuggestions,
                                              new { name = "help_practicalSuggestions"   })

But This will work

@Html.CheckBoxFor(model => model.ProvidePracticalSuggestions,
                                              new { Name = "help_practicalSuggestions"   })

The trick is to use capital letter "N" in "Name"


I do not think this is Possible. You can not change the name attribute for a checkbox element when using the HTML Helper method. Out of curiousity, i looked into the MVC source code and found something interesting inside InputHelper method which is being called from the CheckBoxHelper method which is being called from the CheckBoxFor method

enter image description here

It is calling the MergeAttribute method for "type", "name" and "value". And this code is only for the Checkbox element

EDIT : Looked into the MergeAttribute method and this is how it is

public void MergeAttribute(string key, string value)
{
    bool flag = false;
    this.MergeAttribute(key, value, flag);
}

So it is calling MergeAttribute of the TagBuilder class and it looks like this

public void MergeAttribute(string key, string value, bool replaceExisting)
{
    if (!string.IsNullOrEmpty(key))
    {
        if (replaceExisting || !this.Attributes.ContainsKey(key))
        {
            this.Attributes[key] = value;
        }
        return;
    }
    else
    {
        throw new ArgumentException(CommonResources.Argument_Cannot_Be_Null_Or_Empty, "key");
    }
}

And the the first If condition returns true and the inner if will not return true because ( I guess) name is present in the Attributes collection. So it will just execute the return statement.

Solution : Instead of using Html.CheckBoxFor helper method, you might use the Html.CheckBox method.

public static MvcHtmlString CheckBox(
    this HtmlHelper htmlHelper,
    string name
)

So your code will become

@Html.CheckBox("help_practicalSuggestions",Model.ProvidePracticalSuggestions)

The first parameter is the name you want for the input element.

Also, as explained in one of the other answer , If you use new { @Name="MyCustomName"} and It will generate the checkbox element with the name you are passing. But it will not generate the hidden input field with this name. your hidden field will still have the same name as your model property name. CheckboxFor helper method usually generate the hidden field to store the selected/unselected value of checkbox in this hidden field. So it is important that you should have both field's(checkbox and it's associated hidden field) name as same.

So the best solution is to use Html.CheckBox helper method. This will generate the proper name for the hidden field as well.

Upvotes: 30

Rahul
Rahul

Reputation: 5636

First add filter to your model that called DisplayAttribute

[DisplayAttribute(Name = "Some Text")]
public bool IsChecked { get; set; }

And you can use Label for model

@Html.LabelFor(model => model.PropertyName)

Upvotes: 0

tklives
tklives

Reputation: 469

Actually, all you have to do is use "@Name" (with a uppercase N) as shown below, and everything should work out just fine! :)

@Html.CheckBoxFor(
model => model.ProvidePracticalSuggestions,
         new { @Name = "help_practicalSuggestions"})

Cheers!

Upvotes: 16

Karan
Karan

Reputation: 1

In CheckBoxFor helper we bind the control to property using expression. The property name is used to set the name attribute of the control.

@Html.CheckBoxFor(model => model.IsMarried)

When I bind the model property with the checkbox, it assigns the name attribute of the control with property name itself as shown below :

Rendered HTML:

<input id="IsMarried" name="IsMarried" type="checkbox" value="true" />
<input name="IsMarried" type="hidden" value="false" />

You can propbably use CheckBox helper to give name attribute or you can create your own custom helper method where you can assign attributes as you wish.

For more additional information visit :

http://20fingers2brains.blogspot.in/2013/02/html-checkboxfor-helper-in-mvc3-razor.html

Upvotes: 0

jschell12
jschell12

Reputation: 61

Just create a temp variable and pass that in the lambda expression.

@{var help_practicalSuggestions = Model.ProvidePracticalSuggestions; } 
@Html.CheckBoxFor(model => help_practicalSuggestions)

Update

Serg Rogovtsev is actually right. The '...For' version of the helper function provides the name attribute for you automatically.

Upvotes: 0

HatSoft
HatSoft

Reputation: 11191

You don't need the @ symbol in name

@Html.CheckBoxFor(
model => model.ProvidePracticalSuggestions, 
new { name = "help_practicalSuggestions" })

Upvotes: 1

Sergei Rogovtcev
Sergei Rogovtcev

Reputation: 5832

Can't do that. The whole point of CheckBoxFor is to auto-generate name. If you want your own name, use

@Html.CheckBox("help_practicalSuggestions", Model.ProvidePracticalSuggestions)

Upvotes: 16

Shane Fulmer
Shane Fulmer

Reputation: 7708

Try without the @:

@Html.CheckBoxFor(model => model.ProvidePracticalSuggestions, new { name = "help_practicalSuggestions" })

Upvotes: 0

Related Questions