CODEWITHSUNDEEP
asp.net-mvcrazorasp.net-mvc-4radiobuttonfor
AJ.
AJ.

Reputation: 16719

MVC4: Two radio buttons for a single boolean model property

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.

Upvotes: 65

Views: 86677

Answers (3)

carloswm85
carloswm85

Reputation: 2397

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

Radio button, using boolean values

It works in both directions.

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

false and true

Upvotes: 0

Darren
Darren

Reputation: 4488

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>

Upvotes: 14

Darin Dimitrov
Darin Dimitrov

Reputation: 1038810

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>
}

Upvotes: 119

Related Questions