如何在ASP.Net MVC中将单选按钮与模型数据绑定? [英] How can I bind a radio button with model data in ASP.Net MVC?

问题描述

我想在表单中显示一个单选按钮，该单选按钮将从模型数据中填充.

I want to show a radio button in my form which will be populated from model data.

public class Student
    {
        [Required(ErrorMessage = "First Name Required")] // textboxes will show
        [Display(Name = "First Name :")]
        [StringLength(5, ErrorMessage = "First Name cannot be longer than 5 characters.")]
        public string FirstName { get; set; }

[Required(ErrorMessage = "Last Name Required")] // textboxes will show
        [Display(Name = "Last Name :")]
        [StringLength(5, ErrorMessage = "Last Name cannot be longer than 5 characters.")]
        public string LastName { get; set; }

[Required(ErrorMessage = "Sex Required")] // group of radio button will show
        [Display(Name = "Sex :")]
        public List<Sex> Sex { get; set; }

}

public class Sex
    {
        public string ID { get; set; }
        public string Type { get; set; }
    }

在这里，我试图通过类似的操作方法来手动填充学生模型

here I am trying to populate the student model manually from an action method like

public ActionResult Index()
{
var student=  new Student 
{
    FirstName = "Rion",
    LastName = "Gomes",

    Sex= new List<Sex>
        {
            new Sex{ID="1" , Type = "Male"}, 
            new Sex{ID="2" , Type = "Female"}
        }    
}    
    return View(student);
}

现在我该如何生成一个单选按钮，该单选按钮将display text in form Male & Female并且作为值将具有ID

now how could I generate a radio button which will display text in form Male & Female and as value will have the ID

我搜索了google，发现了许多示例，但我使用了一个示例，但不确定是否可行. 这是视图中的单选按钮代码.

I searched google and found many samples and I used one but not sure if it works. here is the radio button code in view.

@Html.RadioButtonFor(x => x.Sex, "Male")

我不想对男性或女性进行硬编码；我想通过模型展示它，并希望在for循环中生成单选按钮.

I do not want to hard code male or female rather; I want to show it through a model and want to generate the radio button in a for loop.

我也是MVC的新手，所以请指导我.

I am new too MVC, so please guide me.

推荐答案

如果我正确理解，则应该更改Student模型，以使属性"Sex"为整数，然后应具有另一个属性"SexList"您在其中填充列表的位置.通过此更改，您可以发布数据并检索用户选择的性别.

If I understood correctly you should change your Student model in order to have the property "Sex" as an integer and then you should have another property called "SexList" where you populate the list. This change will allow you to post your data and retrieve the sex selected by the user.

如果您使用的是Razor视图引擎，则应执行以下操作:

If you are using Razor view engine you should do something like this:

@{ 
    foreach (var sex in Model.SexList)
    {
        <div>
            @Html.RadioButtonFor(model => model.Sex, new { id = "sex" + sex.ID })
            @Html.Label("sex" + sex.ID, sex.Type)
        </div>
    }
}

您的模型应该是这样的:

Your model should be something like this:

public class Student
{
    [Required(ErrorMessage = "First Name Required")] // textboxes will show
    [Display(Name = "First Name :")]
    [StringLength(5, ErrorMessage = "First Name cannot be longer than 5 characters.")]
    public string FirstName { get; set; }

    [Required(ErrorMessage = "Last Name Required")] // textboxes will show
    [Display(Name = "Last Name :")]
    [StringLength(5, ErrorMessage = "Last Name cannot be longer than 5 characters.")]
    public string LastName { get; set; }

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

    public List<Sex> SexList { get; set; }

}

public class Sex
{
    public string ID {get;set;}
    public string Type {get;set;}
}

您在控制器中的操作:

[HttpGet]
public ActionResult Index()
{
    var student = new Student 
    {
        FirstName = "Rion",
        LastName = "Gomes",

        //I think the best way to populate this list is to call a service here.
        SexList = new List<Sex>
        {
            new Sex{ID="1" , Type = "Male"}, 
            new Sex{ID="2" , Type = "Female"}
        }    
    }    

    return View(student);
}

视图:

@Html.BeginForm()
{
    <div>
        @Html.LabelFor(model => model.FirstName)
        @Html.EditorFor(model => model.FirstName)
        @Html.ValidationMessageFor(model => model.FirstName)
    </div>
    <div>
        @Html.LabelFor(model => model.LastName)
        @Html.EditorFor(model => model.LastName)
        @Html.ValidationMessageFor(model => model.LastName)
    </div>
    @{ 
        foreach (var sex in Model.SexList)
        {
            <div>
                @Html.RadioButtonFor(model => model.Gender, new { id = "sex" + sex.ID })
                @Html.Label("sex" + sex.ID, sex.Type)
            </div>
        }
    }

    <input type="submit" value"Submit" />
}

，您应该以这种方式在控制器中执行一个操作.这是提交要发布数据的地方:

and you should have an action in your controller this way. This is the place where the submit is going to post the data:

[HttpPost]
public ActionResult Index(Student model)
{
    if (ModelState.IsValid)
    {
        //TODO: Save your model and redirect 
    }

    //Call the same service to initialize your model again (cause we didn't post the list of sexes)
    return View(model);
}

这篇关于如何在ASP.Net MVC中将单选按钮与模型数据绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！