asp.net-mvc – 如何将复选框绑定到视图模型的List属性？

我一直在阅读视图模型和复选框上的各种帖子,但我的大脑开始锁定,我需要向正确的方向推进一点.

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

public int AlertId { get; set; }

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

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

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

解决方法

让您的View模型像这样表示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的值并将其发送到视图.

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和Crete一个名为“EditorTemplates”的文件夹,并在那里创建一个与属性名称相同的新视图(ChannelViewModel.cshtml)

在新的编辑器模板中添加此代码.

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

现在,在主视图中,使用EditorFor Html Helper方法调用编辑器模板.

@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集合,其中选定的复选框将具有IsSelected属性的True值.

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