MVC Razor Radio Button

Question

In partial view I work with textboxes like this.

@model Dictionary<string, string>
@Html.TextBox("XYZ", @Model["XYZ"])

How can i generate radiobuttons, and get the desired value in the form collection as YES/NO True/False) ? Currently i am getting null for "ABC" if i select any value for the below.

   <label>@Html.RadioButton("ABC", @Model["ABC"])Yes</label>
   <label>@Html.RadioButton("ABC", @Model["ABC"])No</label>

Controller

        public int Create(int Id, Dictionary<string, string> formValues)
        {
         //Something Something
        }

possible duplicate of [ASP.NET MVC Yes/No Radio Buttons with Strongly Bound Model MVC](http://stackoverflow.com/questions/2559208/asp-net-mvc-yes-no-radio-buttons-with-strongly-bound-model-mvc) — John Koerner, May 29 '12 at 19:59

Mathew Thompson · Accepted Answer · 2012-05-29T20:12:35.700

72

In order to do this for multiple items do something like:

foreach (var item in Model)
{
    @Html.RadioButtonFor(m => m.item, "Yes") @:Yes
    @Html.RadioButtonFor(m => m.item, "No") @:No
}

edited May 29 '12 at 20:12

answered May 29 '12 at 19:51

Mathew Thompson

55,877
15
127
148

1

I call all my partial views passing @model Dictionary i need a way to return (True, False) or (Yes,No) for selected values in radio buttons. – Nanu May 29 '12 at 19:56
1

@KirkWoll his code wouldn't bind to a `Dictionary` (as his model states). Based on a Yes No response, a bool is probably best, a Nullable bool if you're allowing none to be selected though. – Mathew Thompson May 29 '12 at 19:58
@KirkWoll Check my updated edit, I originally thought he just wanted a Yes No for one option, thus recommending a bool. – Mathew Thompson May 29 '12 at 20:01
I don't want to change my model, i want to keep @model Dictionary – Nanu May 29 '12 at 20:11
1

@Nikhil Ah well that's fine, you'll have either "Yes" or "No" as the values then (or `null` if nothing was selected). Try my updated edit and keep your model as `Dictionary` – Mathew Thompson May 29 '12 at 20:13
@Nikhil no problems glad I could help :) – Mathew Thompson May 29 '12 at 20:19
@:No / @:Yes is not working ( ':' is not allowed as a start of razor expression ) - maybe cause im not using loop – Michael Brennt Dec 11 '13 at 13:06
3

@MichaelBrennt The "@:" is used to break out of Razor, similar to the `` tag as Yes and No are basically HTML/non-C# code (you may not need it depending on your structure). – Mathew Thompson Dec 11 '13 at 13:07
It doesn't preserve field's state on postbacks if there's an error in the form. – Maksim Vi. Feb 20 '15 at 00:20

score 25 · Answer 2 · answered May 29 '12 at 20:30

25

Simply :

   <label>@Html.RadioButton("ABC", True)Yes</label>
   <label>@Html.RadioButton("ABC", False)No</label>

But you should always use strongly typed model as suggested by cacho.

answered May 29 '12 at 20:30

Kuqd

497
3
8

You have to be careful as none of the posted solutions perform any kind of server-side validation. Here's an elegant solution that performs both client-side and server-side validation to ensure valid data is posted to the model. https://stackoverflow.com/a/56185910/3960200 – Etienne Charland May 17 '19 at 12:07

Cacho Santa · Answer 3 · 2017-08-31T17:29:18.443

15

I solve the same problem with this SO answer.

Basically it binds the radio button to a boolean property of a Strongly Typed Model.

@Html.RadioButton("blah", !Model.blah) Yes 
@Html.RadioButton("blah", Model.blah) No

Hope it helps!

edited Aug 31 '17 at 17:29

answered May 29 '12 at 19:51

Cacho Santa

6,846
6
41
73

score 15 · Answer 4 · answered Oct 21 '15 at 09:47

15

I done this in a way like:

  @Html.RadioButtonFor(model => model.Gender, "M", false)@Html.Label("Male")
  @Html.RadioButtonFor(model => model.Gender, "F", false)@Html.Label("Female")

answered Oct 21 '15 at 09:47

Anjan Kant

4,090
41
39

score 10 · Answer 5 · answered Mar 13 '18 at 18:08

10

MVC5 Razor Views

Below example will also associate labels with radio buttons (radio button will be selected upon clicking on the relevant label)

// replace "Yes", "No" --> with, true, false if needed
@Html.RadioButtonFor(m => m.Compatible, "Yes", new { id = "compatible" })
@Html.Label("compatible", "Compatible")

@Html.RadioButtonFor(m => m.Compatible, "No", new { id = "notcompatible" })
@Html.Label("notcompatible", "Not Compatible")

answered Mar 13 '18 at 18:08

Prasad De Silva

836
1
12
22

This is the better answer because it addresses the rendering of unique id attributes. – InbetweenWeekends Jun 01 '19 at 20:12

score 8 · Answer 6 · answered May 29 '12 at 20:17

8

<label>@Html.RadioButton("ABC", "YES")Yes</label>
<label>@Html.RadioButton("ABC", "NO")No</label>

answered May 29 '12 at 20:17

Nanu

3,010
10
38
52

score 6 · Answer 7 · edited Nov 18 '19 at 12:25

6

MVC Razor provides one elegant Html Helper called RadioButton with two parameters (this is general, But we can overload it uptil five parameters) i.e. one with the group name and other being the value

<div class="col-md-10">
    Male:   @Html.RadioButton("Gender", "Male")
    Female: @Html.RadioButton("Gender", "Female")
</div>

edited Nov 18 '19 at 12:25

Rohan Rao

2,505
3
19
39

answered Aug 25 '17 at 17:12

Debendra Dash

5,334
46
38

1

Explain your solution please. – Quality Catalyst Aug 25 '17 at 22:41

score 3 · Answer 8 · edited Apr 28 '17 at 03:29

3

<p>@Html.RadioButtonFor(x => x.type, "Item1")Item1</p>
<p>@Html.RadioButtonFor(x => x.type, "Item2")Item2</p>
<p>@Html.RadioButtonFor(x => x.type, "Item3")Item3</p>

edited Apr 28 '17 at 03:29

Nathan Tuggy

2,237
27
30
38

answered Apr 28 '17 at 03:06

Buhlebesizwe

31
1

jayson.centeno · Answer 9 · 2014-03-05T03:00:25.180

1

This works for me.

@{ var dic = new Dictionary<string, string>() { { "checked", "" } }; }
@Html.RadioButtonFor(_ => _.BoolProperty, true, (@Model.BoolProperty)? dic: null) Yes
@Html.RadioButtonFor(_ => _.BoolProperty, false, (!@Model.HomeAddress.PreferredMail)? dic: null) No

edited Mar 05 '14 at 03:00

answered Mar 05 '14 at 01:04

jayson.centeno

835
11
15

user5138047 · Answer 10 · 2018-09-20T23:34:52.583

I wanted to share one way to do the radio button (and entire HTML form) without using the @Html.RadioButtonFor helper, although I think @Html.RadioButtonFor is probably the better and newer way (for one thing, it's strongly typed, so is closely linked to theModelProperty). Nevertheless, here's an old-fashioned, different way you can do it:

    <form asp-action="myActionMethod" method="post">
        <h3>Do you like pizza?</h3>
        <div class="checkbox">
            <label>
                <input asp-for="likesPizza"/> Yes
            </label>
        </div>
    </form>

This code can go in a myView.cshtml file, and also uses classes to get the radio-button (checkbox) formatting.

MVC Razor Radio Button

10 Answers10

Linked