如何在 MVC 中将表单与复杂模型数据绑定

Question

我正在学习 mvc。这里我有一个模型。现在我想使用 html helper 构建表单。因此，当调用索引操作时，我想手动填充模型数据并将模型发送到查看。这是我的模型数据，但由于缺乏知识，我想要构建表单的方式是不可能的。所以如果可能的话帮助我

namespace MvcPractise.Models
{
    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 = "DOB require")] // datepicker will show
        [Display(Name = "DOB :")]
        [DataType(DataType.Date)]
        public DateTime Dob { get; set; }

        [Required(ErrorMessage = "State Required")] // drodown will show
        [Display(Name = "State :")]
        public List<State> State { get; set; }

        [Required(ErrorMessage = "City Required")] // drodown will show
        [Display(Name = "City :")]
        public List<City> City { get; set; }

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

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

        [Required(ErrorMessage = "Computer Course Required")] // listbox will show
        [Display(Name = "Computer Course Done :")]
        public List<ComputerCourse> ComputerCourse { get; set; }

    }

    public class State
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }

    public class City
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }

    public class Language
    {
        public string ID { get; set; }
        public string Name { get; set; }
    }

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

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

1) 对于我想显示文本框的名字和姓氏属性

2) 对于 DOB 属性，我想用日期选择器显示文本框

3) 对于 DOB 属性，我想用日期选择器显示文本框

4) 对于我想显示下拉列表或组合的州/城市属性

5) 对于 Language 属性，我想显示一组复选框

6) 对于 Sex 属性，我想为男性和女性显示 2 个单选按钮

7) 对于我要显示列表框的计算机课程属性

现在编写一个索引操作方法，该方法将使用虚拟数据填充模型并生成 UI。当点击保存按钮时，模型数据将返回到名为 save like 的操作方法

public ActionResult Save(学生) { 返回视图； }

或

公共 ActionResult 保存（StudentViewModel sv） { 返回视图（）； }

指导我如何进行。谢谢

更新

我可以这样手动填充我们的模型吗

var model =  new Student()

{

    FirstName = "John",

    LastName = "Doe",

    Dob = DateTime.Now,

    State = new list<State>()
        {
            new state({ID="1" , Name = "test1"});
            new state({ID="2" , Name = "test2"});
            new state({ID="3" , Name = "test3"});
        };

}

特别看这段代码....它是否可以工作，因为我现在不在我的电脑前。

 State = new list<State>()
            {
                new state({ID="1" , Name = "test1"});
                new state({ID="2" , Name = "test2"});
                new state({ID="3" , Name = "test3"});
            };

Answer 1

1) 对于我想显示文本框的名字和姓氏属性

@Html.EditorFor(x => x.FirstName)
@Html.EditorFor(x => x.LastName)

2) 对于 DOB 属性，我想用日期选择器显示文本框

@Html.TextBoxFor(x => x.Dob, new { @class = "datePicker" })

现在选择一个最喜欢的 javascript 日期选择器库并将其附加到所有具有日期类的元素。例如你可以使用jQuery UI datepicker:

$(function() {
    $('.datePicker').datepicker();
});

4) 对于我想显示下拉列表或组合的州/城市属性

@Html.DropDownListFor(x => x.SelectedState, new SelectList(Model.State, "ID", "Name"))

注意这里使用的SelectedState 属性。您需要将其作为字符串属性添加到模型中以保存该值。

5) 对于 Language 属性，我想显示一组复选框

首先向您的语言模型添加一个布尔属性，以了解它是否被检查：

public class Language
{
    public string ID { get; set; }
    public string Name { get; set; }
    public bool Selected { get; set; }
}

然后：

@for (var i = 0; i < Model.Language.Count;i++)
{
    @Html.HiddenFor(x => Model.Language[i].ID)
    @Html.HiddenFor(x => Model.Language[i].Name)
    @Html.LabelFor(x => Model.Language[i].Selected, Model.Language[i].Name)
    @Html.CheckBoxFor(x => Model.Language[i].Selected)
}

6) 对于 Sex 属性，我想为男性和女性显示 2 个单选按钮

然后将其声明为字符串，而不是某个列表：

public string Sex { get; set; }

然后在你看来：

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

7) 对于我要显示列表框的计算机课程属性

@Html.ListBoxFor(x => x.SelectedCourses, new SelectList(Model.ComputerCourse, "ID", "Type"))

现在编写一个索引操作方法，该方法将使用虚拟数据填充模型并生成 UI

public AcitonResult Index()
{
    Student student = ... go hit your backend to get a student
    return View(student);
}

在视图中你会有一个表单：

@model Student
@using (Html.BeginForm())
{
    ... generate the desired input fields

    <button type="submit">OK</button>
}

然后是提交表单时将调用的 POST 操作：

[HttpPost]
public AcitonResult Index(Student student)
{
    ...
}

此外，最佳做法是使用视图模型而不是将域模型传递给您的视图。