如何使用 Html.EditorFor 在 MVC3 中呈现单选按钮? [英] How do I use Html.EditorFor to render radio buttons in MVC3?

问题描述

这是我的模型:

[必填][显示(名称=我是:")]公共布尔性{得到;放;}

还有我的编辑器模板:

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

然而，这呈现为以下内容:

<label for="RegisterModel_Sex">Soy:</label><input class="check-box";数据值=真"data-val-required=大豆:字段是必需的."id="RegisterModel_Sex"name="RegisterModel.Sex";类型=复选框"值=真"/><input name="RegisterModel.Sex";类型=隐藏"值=假"/>

我如何为男性和女性呈现一些漂亮的单选按钮?我的模型必须具有什么数据类型?

---

这是我更新的新代码:

//型号:[必需的][显示(名称=大豆:")]公共性别{得到;放;}}公共枚举性别{男 = 1,女性 = 2}//视图模型:<字段集><legend>个人信息</legend><div>@Html.LabelFor(model => model.RegisterModel.Nombre)@Html.EditorFor(model => model.RegisterModel.Nombre)

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

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

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

</fieldset>//编辑器模板:@model GoldRemate.WebUI.Models.Gender@{ViewBag.Title = "性别";}<输入类型=收音机"名称=性别"值=@模型"/>

当我运行这个时，我得到这个错误:

<块引用>

传入字典的模型项为空，但是这个字典需要类型为非空的模型项'GoldRemate.WebUI.Models.Gender'.

这是什么原因造成的，如何在表单中显示枚举的值?

解决方案

像这样创建一个枚举:

 公共枚举性别{男 = 1,女性 = 2}

我会像这样稍微改变你的模型:

 public Gender Sex { get;放;}

然后在你看来你会这样做:

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

然后你会有一个 EditorTemplate 在这里:

 ~/Views/Shared/EditorTemplates/Gender.cshtml

会有这样的内容:

@model EditorTemplate.Models.Gender//切换到你的命名空间@Html.LabelFor(x => x, "男")@if(Model == EditorTemplate.Models.Gender.Male){@Html.RadioButtonFor(x => x, (int)EditorTemplate.Models.Gender.Male, new { @checked = "checked" });}别的{@Html.RadioButtonFor(x => x, (int)EditorTemplate.Models.Gender.Male);}@Html.LabelFor(x => x, "女性")@if(Model == EditorTemplate.Models.Gender.Female){@Html.RadioButtonFor(x => x, (int)EditorTemplate.Models.Gender.Female, new { @checked = "checked" });}别的{@Html.RadioButtonFor(x => x, (int)EditorTemplate.Models.Gender.Female);}

所以我在 Visual Studio 中对此进行了建模，并且按预期工作.试试看.

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?

解决方案

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.

这篇关于如何使用 Html.EditorFor 在 MVC3 中呈现单选按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！