如何在ASP.Net MVC中将单选按钮与模型数据绑定?

时间:2013-09-17 14:37:13

标签: asp.net-mvc-3

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

这是我的模特

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

这里我试图从像

这样的动作方法手动填充学生模型
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

我搜索谷歌并发现了很多样本​​,我使用了一个,但不确定它是否有效。 这是视图中的单选按钮代码。

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

我不想硬编码男性或女性;我想通过模型显示它,并希望在for循环中生成单选按钮。

我也是新MVC,所以请指导我。

2 个答案:

答案 0 :(得分:32)

如果我理解正确你应该更改你的学生模型,以便将属性“性别”作为一个整数,然后你应该有另一个名为“SexList”的属性来填充列表。此更改将允许您发布数据并检索用户选择的性别。

如果您使用Razor视图引擎,您应该执行以下操作:

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

编辑:

你的模型应该是这样的:

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

你应该以这种方式控制你的控制器。这是提交将发布数据的地方:

[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);
}

答案 1 :(得分:1)

首先,创建枚举

public enum QuestionDetails
    {

        Description = 1,            
        Attachment = 2,           
        DescriptionandAttachment = 3        
    }

第二模型部分

    public class QuestionModel
      {
        public QuestionDetails answerFiledType { get; set; }

        public string answerFiledTypeValue
        {
            get { return answerFiledType.ToString(); }
            set { answerFiledType = ((QuestionDetails)Enum.Parse(typeof(QuestionDetails), value.ToUpper().ToString())); }
        }
}

剃刀:

 <label class="custom-control custom-radio">
                @Html.RadioButtonFor(m => m.answerFiledType, WM_GlobalLib.EnumHelper.QuestionDetails.Description, new { @name = "radio", @type = "radio",@id = "Description" })
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Description</span>
            </label>
            <label class="custom-control custom-radio">
                @Html.RadioButtonFor(m => m.answerFiledType, WM_GlobalLib.EnumHelper.QuestionDetails.Attachment, new { @name = "radio", @type = "radio", @id = "Attachment" })
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Attachment</span>
            </label>
            <label class="custom-control custom-radio">
                @Html.RadioButtonFor(m => m.answerFiledType, WM_GlobalLib.EnumHelper.QuestionDetails.DescriptionandAttachment, new { @name = "radio", @type = "radio",@id = "DescriptionandAttachment" })
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">DescriptionandAttachment</span>
            </label>

控制器部分:

现在您可以通过Model Propery获取所选值的值,并可以保存在数据库中,也可以进行编辑。