Rendering Nullable Bool as CheckBox

Question

I'm new from WebForms to MVC. I have view model field with the type bool? and, by default, EditorFor() renders this field as a DropDownList with a "Not Set" option. I would prefer to render it as a CheckBox and, if the value is null, just set it to unchecked.

The field name is RFP.DatesFlexible and so I wrote the following markup in my view:

<input type="checkbox" id="RFP_DatesFlexible" name="RFP.DatesFlexible" />
<label for="RFP_DatesFlexible">My Dates are Flexible</label>

But this doesn't work. The result is always null and ModelState.IsValid is false.

Can anyone say how I could make this work?

EDIT

This is the code I ended up with, which appears to work fine.

@Html.CheckBox("RFP.DatesFlexible", Model.RFP.DatesFlexible ?? false)
@Html.Label("RFP.DatesFlexible", "My Dates are Flexible")

The label is correctly associated with the checkbox so that clicking the text will toggle the checkbox.

Thank's for the answer!

resnyanskiy
– resnyanskiy

2015-06-01 09:08:36 +00:00
Commented Jun 1, 2015 at 9:08 — resnyanskiy
– resnyanskiy, Commented Jun 1, 2015 at 9:08

hawkke · Accepted Answer · 2011-12-13 04:39:12Z

5

Something like this?

Models:

public class MyViewModel
{
    public ViewModel2 RDP { get; set; }
}

public class ViewModel2
{
    public bool? DatesFlexible { get; set; }
}

Controller:

    public ActionResult TestBool()
    {
        return View(new MyViewModel { RDP = new ViewModel2() });
    }

    [HttpPost]
    public ActionResult TestBool(MyViewModel vm)
    {
        return View();
    }

View:

@model mvc_testing_2.Models.MyViewModel

@using (Html.BeginForm())
{
    @Html.CheckBox("RDP.DatesFlexible", 
        Model.RDP.DatesFlexible != null && (bool)Model.RDP.DatesFlexible)

    <input type="submit" value="go" />
}

edited Dec 13, 2011 at 4:39

answered Dec 13, 2011 at 4:02

hawkke

4,2821 gold badge29 silver badges23 bronze badges

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

7 Comments

Jonathan Wood Over a year ago

This won't work. The first argument is an error because it can't convert bool? to bool. And if I typecast it to a bool, I get an error because it's not a property.

hawkke Over a year ago

Alright, then change it to this: @Html.CheckBox("DatesFlexible", Model.DatesFlexible != null && (bool)Model.DatesFlexible). This works, I just tested it. (Is RFP a property of another model? Model.RFP.DatesFlexible? If so, you'll probably need to name the input how you have it in your question, I can't remember off-hand)

Jonathan Wood Over a year ago

That compiles--thanks. However, the field is still null when the page is submitted. Somehow, it's not picking up that the control is associated with the field. (The field is Model.RFP.DatesFlexible.)

hawkke Over a year ago

Hmm, still seems to work fine for me when I rename the field to RFP.DatesFlexible (and change the Model.DatesFlexible to Model.RFP.DatesFlexible). Silly question: do you have the checkbox and submit button wrapped in a form?

Jonathan Wood Over a year ago

Yes, I have a form and other values are set as expected. To clarify, you are saying it is posting back the values of the checkbox when you test? Is your field of type bool??

|

Community · Accepted Answer · 2017-05-23 12:32:38Z

2

First, I think it would help to understand how Html.CheckBox works. It's not quite what you'd expect. Take a look at HTML.CheckBox Behaviour

To answer your question, the reason your code doesn't work is because your <input /> requires a value='true' to bind correctly. For example:

<input type='checkbox' name='RFP.DatesFlexible' value='true' />

And add a checked='checked' property if it should be checked.

That's why I usually override the Html.CheckBoxmethod with my own. The default implementation is just confusing.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Dec 13, 2011 at 6:37

Scott Rippey

15.8k5 gold badges73 silver badges88 bronze badges

2 Comments

Jonathan Wood Over a year ago

Yes, that is confusing. I've edited my question to show the actual code I ended up using. I was still able to use the @Html syntax, as it offers some benefits. And, sure enough, if I examine the markup, it does contain the attribute value='true'.

Scott Rippey Over a year ago

@JonathanWood Your actual code above looks perfect, that's exactly what I would have done.

scott_lotus · Accepted Answer · 2015-11-26 15:07:04Z

0

I know it's marked as accepted however I had the similar problem but I was iterating over sub items so I had problem with the name parameter bool? isOpen

When I used this is did bind to the ViewModel on post but rendered the dropdown:

@Html.EditorFor(model => model.Days[i].isOpen)

This rendered the checkbox but values where null in the post:

@Html.EditorFor("isOpen", model.Days[i].isOpen ?? false)

By looking at the rendered html I did this in the view which solved it:

@Html.CheckBox("Days[" + i +"].isOpen", Model.Days[i].isOpen ?? false)

I know it's know it's a bit quick n dirty but it worked

Hope this helps someone somewhere.

edited Nov 26, 2015 at 15:07

scott_lotus

3,28322 gold badges58 silver badges72 bronze badges

answered Nov 26, 2015 at 14:00

Tomas Hesse

4155 silver badges10 bronze badges

Collectives™ on Stack Overflow

Rendering Nullable Bool as CheckBox

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related