从列表选择＆LT项目; T＆GT;在MVC 4使用模型绑定

问题描述

给定一个类

public class Person
{
    // Some general properties

    public List<Hobby> Hobbies { get; set; }
}

public class Hobby
{
    // Some properties e.g. Name, etc.
}

static List<Hobby> AllHobbies { get; }

是否有可能创建一个视图，允许用户使用模型绑定来选择自己的爱好？

Is it possible to create a view that allows the user to select his hobbies using model binding?

这肯定会是可能的视图来遍历 AllHobbies 和渲染＆LT;输入类型=复选框/＆GT; 每个，然后用手在回传控制线了选择的值。看来，这应该是可行的与模型约束力，但我看不出如何。

It would certainly be possible in the view to loop through AllHobbies and render an <input type="checkbox" /> for each, then wire up the selected values by hand in the postback controller. It seems that this should be doable with model binding, but I don't see how.

推荐答案

当然，我会使用编辑器模板推荐你。

Sure, I would recommend you using editor templates.

让我们假设一个爱好有一个名字和一个布尔字段，指示是否由用户选择：

Let's suppose that a hobby has a name and a boolean field indicating whether it was selected by the user:

public class Hobby
{
    public string Name { get; set; }
    public bool Selected { get; set; }
}

然后控制器模型送入查看和处理表单提交：

then a controller to feed the model into the view and process the form submission:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var person = new Person
        {
            Hobbies = new[]
            {
                new Hobby { Name = "hobby 1" },
                new Hobby { Name = "hobby 2", Selected = true },
                new Hobby { Name = "hobby 3" },
            }.ToList()
        };
        return View(person);
    }

    [HttpPost]
    public ActionResult Index(Person person)
    {
        var selectedHobbies = person
            .Hobbies
            .Where(x => x.Selected).Select(x => x.Name);
        string message = string.Join(",", selectedHobbies);
        return Content("Thank you for selecting: " + message);
    }
}

则包含表单，允许用户选择爱好的视图：

then a view containing the form allowing the user to select hobbies:

@model Person

@using (Html.BeginForm()) 
{
    <h2>Hobbies</h2>
    @Html.EditorFor(x => x.Hobbies)
    <button type="submit">OK</button>
}

和它会自动被渲染为爱好集合（〜/查看/主页/ EditorTemplates /业余爱好的每个元素对应的编辑模板。 CSHTML - >注意，模板的名称和位置很重要）：

and a corresponding editor template which will automatically be rendered for each element of the Hobbies collection (~/Views/Home/EditorTemplates/Hobby.cshtml -> notice that the name and location of the template is important):

@model Hobby

<div>
    @Html.LabelFor(x => x.Selected, Model.Name)
    @Html.HiddenFor(x => x.Name)
    @Html.CheckBoxFor(x => x.Selected)
</div>

有关更高级的编辑场景，我会建议你经历的史蒂芬·桑德森的blog帖子这个话题。

For more advanced editing scenarios I would recommend you going through the Steven Sanderson's blog post on this topic.

这篇关于从列表选择＆LT项目; T＆GT;在MVC 4使用模型绑定的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！