如何将复选框绑定到List< int>视图模型的属性?

问题描述：

我一直在阅读有关视图模型和复选框的各种文章，但是我的大脑开始锁住，我需要朝正确的方向稍加推动.

I've been reading the various posts on view models and check boxes, but my brain is starting to lock up and I need a little push in the right direction.

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

Here's my simplified view model. I have checkboxes that need to populate the lists with their values. I don't think this can happen automagically. I'm not sure how to bridge the gap between an array of string values and a List correctly. Suggestions?

public int AlertId { get; set; }

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

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

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

答

让您的View Model代表CheckBox项

Have your View Model like this to represent the CheckBox item

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

现在您的主要ViewModel将是这样

Now your main ViewModel will be like this

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的值并将其发送到视图.

Now in your GET Action, you will fill the values of the ViewModel and sent it to the 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)相同名称的新视图

Now Let's create an EditorTemplate. Go to Views/YourControllerName and Crete a Folder called "EditorTemplates" and Create a new View there with the same name as of the Property Name(ChannelViewModel.cshtml)

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

Add this code ro your new editor template.

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

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

Now in your Main View, Call your Editor template using the EditorFor Html Helper method.

@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.

Now when You Post the Form, Your Model will have the UserChannelIds Collection where the Selected Checkboxes will be having a True value for the 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);
}

如何将复选框绑定到List< int>视图模型的属性?

相关推荐