生成动态复选框,并选择其中一些作为已选中

Question

所以我的问题是这样的,

我有两个清单

列表A包含.

1. 第1项
2. 第2项
3. 第3项
4. 第4项
5. 第5项

和列表B包含

1. 第1项
2. 第2项
3. 第3项
4. 第4项
5. .....
6. ....
7. 项目10

我想要做的就是在MVC Razor View中为B中的所有项动态生成复选框,在这些复选框中,检查(选择)A中所有项目的所有复选框.因为A将始终是B的子集.

然后,用户可以选中 - 取消选中任何框,这些值可以传递给控制器​​以进行保存.列表A将使用用户选择的新值进行更新.

任何帮助？

更新1: 我可以在视图中获取Model.CheckboxSelections中的所有项目.我不想使用局部视图.我正在尝试类似的事情,但仍然缺少某些东西.

         @for (int i = 0; i < Model.CheckboxSelections.Count; i++)
        {
@Html.CheckBox(Model.CheckboxSelections[i].Sku.ToString(), Model.CheckboxSelections[i].IsChecked.ToString())
     }

Answer 1

有一定的重复自己的风险,我会用以下句子开始我的回答:

与ASP.NET MVC应用程序一样,您应该使用视图模型.

所以:

public class MyViewModel
{
    public string Name { get; set; }
    public bool IsChecked { get; set; }
}

然后一个控制器:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        // Those are your domain models
        // they could come from a database or something
        var listA = new[] { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5" };
        var listB = new[] { "Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10" };

        // Now let's map our domain model to our view model
        var model = listB.Select(x => new MyViewModel
        {
            Name = x,
            IsChecked = listA.Contains(x)
        });

        return View(model);
    }

    [HttpPost]
    public ActionResult Index(IEnumerable<MyViewModel> model)
    {
        var selectedItems = model.Where(x => x.IsChecked);
        var format = string.Join(",", selectedItems.Select(x => x.Name));
        return Content("Thank you for selecting " + format);
    }
}

然后是相应的视图(~/Views/Home/Index.cshtml):

@model IEnumerable<MyViewModel>

@using (Html.BeginForm())
{
    @Html.EditorForModel()
    <button type="submit">OK</button>
}

最后是相应的编辑器模板,它将自动为模型集合(~/Views/Home/EditorTemplates/MyViewModel.cshtml)的每个元素呈现:

@model MyViewModel

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

并且渲染结果(我的Chrome浏览器可以看到)如下所示:

看看使用视图模型时有多容易？