asp.net-mvc - 如何将复选框绑定(bind)到 View 模型的 List 属性？

Question

我一直在阅读有关 View 模型和复选框的各种帖子，但我的大脑开始锁定，我需要朝着正确的方向努力。

这是我的简化 View 模型。我有需要用它们的值填充列表的复选框。我认为这不会自动发生。我不确定如何正确弥合字符串值数组和 List 之间的差距。建议？

public int AlertId { get; set; }

public List<int> UserChannelIds { get; set; }

public List<int> SharedChannelIds { get; set; }

public List<int> SelectedDays { get; set; }

Answer 1

让您的 View Model 像这样来表示 CheckBox 项

public class ChannelViewModel 
{
  public string Name { set;get;}
  public int Id { set;get;}
  public bool IsSelected { set;get;}
}

现在你的主 ViewModel 将是这样的

public class AlertViewModel
{
  public int AlertId { get; set; }
  public List<ChannelViewModel> UserChannelIds { get; set; }      
  //Other Properties also her

  public AlertViewModel()
  {
    UserChannelIds=new List<ChannelViewModel>();       
  }

}

现在在您的 GET操作，您将填充 ViewModel 的值并将其发送到 View 。

public ActionResult AddAlert()
{
    var vm = new ChannelViewModel();

    //The below code is hardcoded for demo. you mat replace with DB data.
    vm.UserChannelIds.Add(new ChannelViewModel{ Name = "Test1" , Id=1});
    vm.UserChannelIds.Add(new ChannelViewModel{ Name = "Test2", Id=2 });

    return View(vm);
}

现在让我们创建一个 EditorTemplate。转至 Views/YourControllerName并创建一个名为“ EditorTemplates ”的文件夹，并在此处创建一个与属性名称( ChannelViewModel.cshtml)同名的新 View

将此代码添加到您的新编辑器模板中。

@model ChannelViewModel
<p>
  <b>@Model.Name</b>   :
  @Html.CheckBoxFor(x => x.IsSelected) <br />
  @Html.HiddenFor(x=>x.Id)
</p>

现在在您的主视图中，使用 EditorFor 调用您的编辑器模板Html 助手方法。

@model AlertViewModel
<h2>AddTag</h2>
@using (Html.BeginForm())
{
    <div>
        @Html.LabelFor(m => m.AlertId)
        @Html.TextBoxFor(m => m.AlertId)
    </div>    
    <div>  
      @Html.EditorFor(m=>m.UserChannelIds)         
    </div>    
    <input type="submit" value="Submit" />
}

现在，当您发布表单时，您的模型将具有 UserChannelIds所选复选框将具有 True 的集合 IsSelected 的值属性(property)。

[HttpPost]
public ActionResult AddAlert(AlertViewModel model)
{
   if(ModelState.IsValid)
   {
      //Check for model.UserChannelIds collection and Each items
      //  IsSelected property value.
      //Save and Redirect(PRG pattern)
   }
   return View(model);
}