Blake Rivell
Blake Rivell

Reputation: 13875

Checkbox not working with boolean viewmodel property

I am using MVC6 and have a checkbox input field in my form, but when the form is submitted the value for the checkbox always gets passed to the ViewModel as false:

Here is how the property is declared in my ViewModel:

[Display(Name = "Include Sales Tax")]
public bool IncludeSalesTax { get; set; }

Here is how the form looks in my MVC6 razor form:

<div class="form-group">
    <div class="checkbox">
        <label><input asp-for="IncludeSalesTax" type="checkbox" value="">@Html.DisplayNameFor(m => m.IncludeSalesTax)</label>
    </div>
</div>

I figured the above would be the best way to follow Twitter Bootstrap standards and use the ASP.NET MVC6 asp-for tag for model binding.

When I submit the form the value for IncludeSalesTax is always false, even when checked. What am I doing wrong?

Upvotes: 28

Views: 48854

Answers (4)

Corey Jensen
Corey Jensen

Reputation: 429

Pinki's answer above is good if the checkbox should default to checked.

If the checkbox should default to unchecked, a little in-line javascript sets the value to true or false upon clicking:

<input name="yourPropertyName" type="checkbox" value="false" onchange="this.value=this.checked">

Upvotes: 16

pinki
pinki

Reputation: 970

input type checkbox sends an "on" if it is set. Otherwise it is not sent. It is important, that you set the value attribute to true. In this case it sends true or nothing, which is perfect to bind to a boolean.

<input type="checkbox" name="yourPropertyName" value="true" checked />

Upvotes: 68

Ziregbe Otee
Ziregbe Otee

Reputation: 554

The razor view engine normally creates a checkbox and one hidden input using the same name.

You can simply use the html below to ensure you get your desired result:

<div class="form-group">
        <div class="checkbox">     
    <input type="checkbox" value="true" name="IncludeSalesTax" />Include Sales Tax
    <input type="hidden" value="false" name="IncludeSalesTax" />
        </div>
    </div> 

Upvotes: 11

Blake Rivell
Blake Rivell

Reputation: 13875

After letting Visual Studio generate the form based on my ViewModel here is how it does it:

        <div class="checkbox">
            <input asp-for="isTaxable" />
            <label asp-for="isTaxable"></label>
        </div>

Additionally, I was missing the closing of my input tag. So it can also be done like this which is the bootstrap preferred way:

<label><input asp-for="isTaxable" type="checkbox" value=""/>@Html.DisplayNameFor(m => m.isTaxable)</label>

Upvotes: 11

Related Questions