Question

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

这是我的简化视图模型。我有复选框需要用它们的值填充列表。我不认为这可以自动发生。我不确定如何正确地弥合字符串值数组和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模型像这样表示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集合，其中所选复选框的True属性值为IsSelected。

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

Answer 2

我的视图模型的一部分：

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

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

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

public MyViewModel()
{
    UserChannelIds = new List<int>();
    SharedChannelIds = new List<int>();
    Weekdays = new List<int>();
}

我使用部分视图来显示我的可重复使用的复选框（此时我还不知道编辑器模板）：

@using AlertsProcessor
@using WngAlertingPortal.Code
@model List<int>
@{
    var sChannels = new List<uv_SharedChannels>();
    Utility.LoadSharedChannels(sChannels);
}

<p><strong>Shared Channels:</strong></p>
<ul class="channel-list">
@{
    foreach (var c in sChannels)
    {
        string chk = (Model.Contains(c.SharedChannelId)) ? "checked=\"checked\"" : "";

        <li><input type="checkbox" name="SharedChannelIds" value="@c.SharedChannelId" @chk /> @c.Description (@c.Channel)</li>
    }
}

所有三个复选框部分视图彼此相似。复选框的值是整数，因此通过使用复选框名称排列我的视图模型列表名称，绑定可以正常工作。

因为我在使用int值，所以我觉得我不需要额外的类来表示复选框。只检查已选中的复选框，因此我无需验证它们是否已被选中;我只想要发送的值。通过在构造函数中初始化List，我应该避免空异常。

这是更好，更差还是与其他解决方案一样好？另一种解决方案（涉及额外的课程）是最佳实践吗？

以下文章对我有帮助：

http://forums.asp.net/t/1779915.aspx/1?Checkbox+in+MVC3

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

Answer 3

带有视图模型的绑定列表

这个网站非常好地处理它

https://www.exceptionnotfound.net/simple-checkboxlist-in-asp-net-mvc/

public class AddMovieVM  
{
  [DisplayName("Title: ")]
  public string Title { get; set; }

public List<CheckBoxListItem> Genres { get; set; }

public AddMovieVM()
{
    Genres = new List<CheckBoxListItem>();
}
}

Answer 4

 public class MembershipViewData
 {
   public MembershipViewData()
   {
      GroupedRoles = new List<GroupedRoles>();
      RolesToPurchase = new List<uint>();
   }

   public IList<GroupedRoles> GroupedRoles { get; set; }
   public IList<uint> RolesToPurchase { get; set; }
 }
 
//view
 
 @model VCNRS.Web.MVC.Models.MembershipViewData
 @{
    ViewBag.Title = "MembershipViewData";
    Layout = "~/Views/Shared/_Layout.cshtml";
    int i = 0;
  }
  
@using (Html.BeginForm("Membership", "Account", FormMethod.Post, new { id = "membershipForm" }))
{
   <div class="dyndata" style="clear: left;">
      <table width="100%" cellpadding="0" cellspacing="0" class="table-view list-view">

        foreach (var kvp2 in Model.GroupedRoles)
        {
          string checkBoxId = "RolesToPurchase" + kvp2.RoleType;
          <tr>
            <td width="240px">
              <label class="checkbox-label" for="@checkBoxId">
                 <input type="checkbox" class="checkbox" name="RolesToPurchase[@i]" 
                   id="@checkBoxId" value="@kvp2.RoleType" />
                   @kvp2.Key
              </label>
            </td>
          </tr>
          
          i++;
}
                                 
   <tr style="background-color: #ededed; height: 15px;">
      <td colspan="5" style="text-align: right; vertical-align: bottom;">                                  
         @Html.SubmitButton(Resources.MyStrings.Views_Account_Next)
      </td>
   </tr>
 </table>
</div>
}

//Post Action

[HttpPost]
public ActionResult Membership(MembershipViewData viewData)
{
 ..........................
}
}

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

4 个答案: