MVC4: Two radio buttons for a single boolean model property

Question

I'm attempting to find the correct Razor syntax for mutually exclusive radio buttons that both reflect the value of a boolean property on my model. My model has this:

public bool IsFemale{ get; set; }

I would like to display this with two radio buttons, one "Male" and the other "Female," but everything I've tried so far has not reflected the actual value of the IsFemale property on the model. Currently, I have this:

@Html.RadioButtonFor(model => model.IsFemale, !Model.IsFemale) Male
@Html.RadioButtonFor(model => model.IsFemale, Model.IsFemale) Female

This seems to persist the value correctly if I change and update, but does not mark the correct value as checked. I'm sure this is something stupid, but I'm stuck.

What is your app's culture? Are you using localized .net? Because I cannot repro your issue and because Darin's solution worked maybe this is some culture setting issue... — nemesv, May 09 '12 at 15:12
I'm not currently setting the culture, so I assume it's using the machine default. — AJ., May 09 '12 at 15:24
Interesting... It's just strange because I'd also expect it work as you tried in fact it does in my repro... — nemesv, May 09 '12 at 15:29

score 119 · Accepted Answer · answered May 09 '12 at 14:47

119

Try like this:

@Html.RadioButtonFor(model => model.IsFemale, "false") Male
@Html.RadioButtonFor(model => model.IsFemale, "true") Female

And here's the full code:

Model:

public class MyViewModel
{
    public bool IsFemale { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel
        {
            IsFemale = true
        });
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return Content("IsFemale: " + model.IsFemale);
    }
}

View:

@model MyViewModel

@using (Html.BeginForm())
{
    @Html.RadioButtonFor(model => model.IsFemale, "false", new { id = "male" }) 
    @Html.Label("male", "Male")

    @Html.RadioButtonFor(model => model.IsFemale, "true", new { id = "female" })
    @Html.Label("female", "Female")
    <button type="submit">OK</button>
}

answered May 09 '12 at 14:47

Darin Dimitrov

1,023,142
271
3,287
2,928

1

Yep, that works. That seems completely counter-intuitive to me, since the overload for `RadioButtonFor` specifies that parameter as `object value`. Thanks very much! – AJ. May 09 '12 at 14:51
Great Answer. Works for Label clicking too. – Amirhossein Mehrvarzi Sep 13 '14 at 22:04
in my case default is false and if i dont click radio to change then on submit i receive true. @Html.RadioButtonFor(m => m.IsWorkDefaultAddress, "true", new { id = "default-work" }) @Html.RadioButtonFor(m => m.IsWorkDefaultAddress, "false", new { id = "default-home" }) – Adeem Apr 18 '17 at 09:15
1

If you want neither radio button selected then make IsFemale the nullable "bool?" and set IsFemale = null. – Jason Honingford Oct 03 '18 at 16:20
3

Why is a real bool value like `@Html.RadioButtonFor(model => model.IsFemale, false, new { id = "male" }) ` not working? – Stef Heyenrath Aug 14 '19 at 13:51

score 14 · Answer 2 · answered Dec 05 '17 at 15:35

14

In MVC 6 (ASP.NET Core) this can also be achieved with tag helpers:

<label>
    <input type="radio" asp-for="IsFemale" value="false" /> Male
</label>
<label>
    <input type="radio" asp-for="IsFemale" value="true" /> Female
</label>

answered Dec 05 '17 at 15:35

Darren

4,408
4
39
57

score 0 · Answer 3 · answered Sep 07 '22 at 13:00

As far as September 2022.

Boolean radio button using: .NET Framework 4.7.2, MVC 5.2.7, Bootstrap 5.1.3.

Model

public class TheViewModel
{
    public bool IndustrialDegree { get; set; }
}

View

<div class="col-4 col-md-2 mb-3">
    @Html.Label("Industrial Degree", new { @class = "d-block form-label" })
    <div class="btn-group d-flex" role="group" aria-label="Basic radio toggle button group">
        @Html.RadioButtonFor(Model => Model.IndustrialDegree, true, new { @class = "btn-check", @id = "IndustrialDegreeTrue" })
        @Html.Label("IndustrialDegreeTrue", "Yes", new { @class = "btn btn-outline-primary" })

        @Html.RadioButtonFor(Model => Model.IndustrialDegree, false, new { @class = "btn-check", @id = "IndustrialDegreeFalse" })
        @Html.Label("IndustrialDegreeFalse", "No", new { @class = "btn btn-outline-primary" })
    </div>
</div>

Notice that I'm returning a pure boolean value to the controller.

Result

It works in both directions.

This is what you'll see on the controller when debugging the view model.

and

MVC4: Two radio buttons for a single boolean model property

3 Answers3

Model

View

Result

Linked