How do I use Html.EditorFor to render radio buttons in MVC3?

Question

Here's my model:

[Required]
[Display(Name = "I'm a:")]
public bool Sex { get; set; }

And my editor template:

<div>
    @Html.LabelFor(model => model.RegisterModel.Sex)
    @Html.EditorFor(model => model.RegisterModel.Sex)
</div>

However this render to the following:

<div>
    <label for="RegisterModel_Sex">Soy:</label>
    <input class="check-box" data-val="true" data-val-required="The Soy: field is required." id="RegisterModel_Sex" name="RegisterModel.Sex" type="checkbox" value="true" /><input name="RegisterModel.Sex" type="hidden" value="false" />
</div>

How would I render some nice radio buttons for Male and Female? What datatype would my model have to have?

---

Edit:

Here's my new updated code:

//Model:
    [Required]
    [Display(Name = "Soy:")]
    public Gender Sex { get; set; }
}

public enum Gender
{
    Male = 1,
    Female = 2
}

//Viewmodel:

<fieldset>
    <legend>Informacion Personal</legend>
    <div>
        @Html.LabelFor(model => model.RegisterModel.Nombre)
        @Html.EditorFor(model => model.RegisterModel.Nombre)
    </div>

    <div>
        @Html.LabelFor(model => model.RegisterModel.Apellido)
        @Html.EditorFor(model => model.RegisterModel.Apellido)
    </div>

    <div>
        @Html.LabelFor(model => model.RegisterModel.Sex)
        @Html.EditorFor(model => model.RegisterModel.Sex)
    </div>

    <div>
        @Html.LabelFor(model => model.RegisterModel.Carnet)
        @Html.EditorFor(model => model.RegisterModel.Carnet)
    </div>    
</fieldset>


//EditorTemplate:

@model GoldRemate.WebUI.Models.Gender

@{
    ViewBag.Title = "Gender";
}

<input type="radio" name="Sex" value="@Model" />

When I run this, I get this error:

The model item passed into the dictionary is null, but this dictionary requires a non-null model item of type 'GoldRemate.WebUI.Models.Gender'.

What is causing this and how can I show the values of my enum in my form?

Wildman

Have you created an editor template following the naming format? AKA did you create a ~/Views/Shared/EditorTemplates/Sex.ascx file with how you want it rendered? – Meditation

No, I didn't. Should I? Should it be named EXACTLY the same as my property? – Wildman

Your model is effectively asking the question "Sex: Yes or no?" You're getting a checkbox because boolean fields are by default rendered as checkboxes. – Feral

Sorry, I misread your property name. The editor template should correspond to your data type; in this case bool. I would suggest changing that to an Enum, and then making an editor template for that enum. – Meditation

@Tejs: Would you mind showing me an example of how to setup a model containing an Enum with it's annotations? As an answer and I'll upvote it. – Wildman

Answer 1

Create an enum like so:

 public enum Gender
 {
     Male = 1,
     Female = 2
 }

I'd alter your model slightly like so:

 public Gender Sex { get; set; }

And then in your view you would do this:

 Html.EditorFor(x => x.RegisterModel.Sex);

Then you would have an EditorTemplate here:

 ~/Views/Shared/EditorTemplates/Gender.cshtml

Which would have content like so:

@model EditorTemplate.Models.Gender // switch to your namespace

@Html.LabelFor(x => x, "Male")
@if(Model == EditorTemplate.Models.Gender.Male)
{
    @Html.RadioButtonFor(x => x, (int)EditorTemplate.Models.Gender.Male, new { @checked = "checked" });
}
else
{
    @Html.RadioButtonFor(x => x, (int)EditorTemplate.Models.Gender.Male);
}

@Html.LabelFor(x => x, "Female")
@if(Model == EditorTemplate.Models.Gender.Female)
{
    @Html.RadioButtonFor(x => x, (int)EditorTemplate.Models.Gender.Female, new { @checked = "checked" });
}
else
{
    @Html.RadioButtonFor(x => x, (int)EditorTemplate.Models.Gender.Female);
}

So I modeled this in Visual Studio, and this works as expected. Try it out.

Meditation

Ok, so I've made you changes but I'm still getting stuck on the editor bit. In my editor template, what HTML would I need to write in in order to display each enum from the enum as a radio button? I've tried this but it doesn't work: <input type="radio" name="Sex" value="@Model" /> – Wildman

Please see my new edit for relevant things I've tried and how they didn't work. – Wildman

When I try this I get duplicate IDs which isn't valid HTML. – Deviled

I tried this approach but the VS scaffolding is generating @Html.EnumDropDownListFor... EDIT Just noticed this is 2015 – Hallette