65.9K
CodeProject 正在变化。 阅读更多。
Home

CheckBoxList(For) - 缺失的 MVC 扩展（ 不再支持）

Mikhail-T
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.82/5 (41投票s)

2011年11月29日

CPOL

6分钟阅读

viewsIcon

828555

downloadIcon

14978

扩展了 MVC HtmlHelper 类，因此您可以创建可 POST 的复选框列表。

This extension is no longer supported, meaning no new versions are being developed or planned to be released, if you still like to use it or modify it, source code is available on GitHub.

查看官方网站以获取实时示例和文档

MvcCheckBoxList

最新版本 (适用于 .NET 4.0 或 4.5 和 MVC4)

通过 NuGet 程序包管理器控制台 安装

Install-Package MvcCheckBoxList

下载包含扩展稳定源代码的示例 MVC 项目 

目录

引言

自 Microsoft **MVC** Web 开发框架问世以来，其丰富的 **Html** 辅助方法库一直是其一大亮点。它提供了辅助方法来创建最常见的 HTML 控件，如文本框、下拉列表、文本区域等。这可以通过在 **MVC** 视图页面中简单地键入 **Html.<smth>** 来实现。

一切都很好且易于自定义，直到开发人员最终会遇到一个空白点……那个空白点就是创建复选框列表。当时没有，现在也没有任何控件可以处理该功能。

要创建复选框列表，开发人员必须结合使用 FOR 或 FOREACH 循环以及一些 HTML <input>。

虽然这并非难事，但可能会非常耗时。尤其是在项目越来越大、代码重复性越来越高时。而且还要考虑添加一些高级功能和布局。例如，当我们想禁用某些复选框，同时又能将它们 POST 回控制器，并在之上将其放入 <table> 中，这将比以前大得多。

但如果我们想将其放入几个列中怎么办？这需要更多的定制。并且会变得更大。这个小扩展旨在简化此任务，同时使其更符合一般的 **MVC** 工作流程。

此插件只是 **MVC** 类 'HtmlHelper' 的扩展，该类用于 **MVC** 视图中的所有 HTML 辅助方法。由于 **MVC** 中没有内置支持的 **CheckBoxList** 扩展，因此此插件添加了它。 

使用代码 

以下所有示例均使用 **MVC** + **Razor** 视图引擎。示例将演示使用此扩展的推荐实际场景。

鉴于我们有...

基类 City

public class City {
  public int Id { get; set; }           // Integer value of a checkbox
  public string Name { get; set; }      // String name of a checkbox
  public object Tags { get; set; }      // Object of html tags to be applied to checkbox, e.g.: 'new { tagName = "tagValue" }'
  public bool IsSelected { get; set; }  // Boolean value to select a checkbox on the list
}

我们并在视图中使用 CitiesViewModel 视图模型

public class CitiesViewModel {
  public IList<City> AvailableCities { get; set; }
  public IList<City> SelectedCities { get; set; }
  public PostedCities PostedCities { get; set; }
}

// Helper class to make posting back selected values easier
public class PostedCities {
  public string[] CityIDs { get; set; }
}

我们的控制器接受类 PostedCities

public ActionResult Examples(PostedCities postedCities) {
  return View(/* Create View Model */);
}

来源：文档 > 鉴于我们有...

基本重载

现在我们可以在视图中创建一个控件，首先，请记住基本复选框列表的调用结构

@Html.CheckBoxList("LIST_NAME", 
                   model => model.LIST_DATA, 
                   entity => entity.VALUE, 
                   entity => entity.NAME, 
                   model => model.SELECTED_VALUES) // or entity => entity.IS_CHECKED

或使用强类型名称

@Html.CheckBoxListFor(model => model.LIST_NAME, 
                      model => model.LIST_DATA, 
                      entity => entity.VALUE, 
                      entity => entity.NAME, 
                      model => model.SELECTED_VALUES) // or entity => entity.IS_CHECKED

所以，在我们的例子中，它看起来会是这样

@Html.CheckBoxListFor(model => model.PostedCities.CityIDs, 
                      model => model.AvailableCities, 
                      entity => entity.Id, 
                      entity => entity.Name, 
                      model => model.SelectedCities)

或者，如果使用布尔选择器： 

@Html.CheckBoxListFor(model => model.PostedCities.CityIDs, 
                      model => model.AvailableCities, 
                      entity => entity.Id, 
                      entity => entity.Name, 
                      entity => entity.IsSelected)  

其中 entity.IsSelected 是数据库中的 **布尔** 值， 

另一种使用 **布尔** 选择器的方法： 

@Html.CheckBoxListFor(model => model.PostedCities.CityIDs, 
                      model => model.AvailableCities, 
                      entity => entity.Id, 
                      entity => entity.Name, 
                      entity => selectedIds.Contains(x.Id)) 

其中 selectedIds.Contains(x.Id) 返回一个 **bool** 值，表示项 ID 是否与列表匹配。 

来源：文档 > 基本重载。

基本设置

由于五个基本属性（请参阅上一节）没有改变，因此仅显示额外的属性，所以占位符...表示使用了五个基本属性。您可能需要先将此引用添加到您的视图中（Position **enum** 和其他命名空间）

@using MvcCheckBoxList.Model

1. 设置列表的位置（方向）

@Html.CheckBoxListFor( ... , Position.Horizontal)

Position 可以是 Position.Horizontal, Position.Vertical, Position.Horizontal_RightToLeft，或 Position.Vertical_RightToLeft，其中最后两个是为从右到左的语言反转复选框和标签 2. 为复选框和标签设置 HTML 属性

@Html.CheckBoxListFor( ... , x => new { @class="class_name" }) // Tags will be applied to all checkbox/label combos

或从数据库获取 Tags 对象

@Html.CheckBoxListFor( ... , x => x.Tags) // x.Tags will be applied only to particular checkbox/label combo

3. 设置 HTML 属性和位置

@Html.CheckBoxListFor( ... , Position.Horizontal, x => new { @class="class_name" })

4. 设置所有 HTML 属性、禁用值、位置以及单个 HTML 属性（所有属性将合并在一起）

@Html.CheckBoxListFor( ... , x => new { @class="class_name" }, new[] {"3", "5", "7"}, Position.Horizontal, x => x.Tags)

来源：文档 > 基本设置。

高级设置

您可能需要先将此引用添加到您的视图中（HtmlListInfo 类和其他命名空间）： 

@using MvcCheckBoxList.Model 

1. 使用 HtmlListInfo 类设置自定义布局： 

var htmlListInfo = new HtmlListInfo(HtmlTag.table, 2, new { @class="class_name" }, TextLayout.Default, TemplateIsUsed.Yes);

@Html.CheckBoxListFor( ... , htmlListInfo)  

在 HtmlListInfo 类中，HtmlTag 可以是 HtmlTag.table 或 HtmlTag.vertical_columns；2 是列数；TextLayout 可以是 TextLayout.Default 或 TextLayout.RightToLeft（用于从右到左的语言） 

2. 使用 HtmlListInfo 类设置布局并设置 **html** 属性： 

@Html.CheckBoxListFor( ... , htmlListInfo, x => new { tagName = "tagValue" })  // Tags will be applied to all checkbox/label combos 

或从数据库获取 Tags 对象： 

@Html.CheckBoxListFor( ... , htmlListInfo, x => x.Tags })  // x.Tags will be applied only to particular checkbox/label combo  

3. 设置所有 HTML 属性、使用 HtmlListInfo 设置布局、设置禁用值以及单独的 HTML 属性（所有属性将合并在一起）： 

@Html.CheckBoxListFor( ... , new { @class="class_name" }, htmlListInfo, new[] {"3", "5", "7"}, x => x.Tags)  

其中，x.Tags 的类型为 **object**，并且应该等于类似 new { tag1 = "value1", tag2="value2" } 的值，并表示一个或多个自定义 **html** 属性，将应用于复选框和 **label**。 

另请注意，x.Tags 是每个可用重载的可选参数。只需将其作为最后一个参数添加到 @Html.CheckBoxListFor( ... , x => x.Tags) 复选框列表调用中。  

来源：文档 > 高级设置。 

实时示例 

官方网站（来自源代码）有一个专门的实时示例部分，用于演示此扩展在各种实际场景中的工作方式。  

请在此处查看此扩展的实际效果： 示例。 

历史 

  • v.1.4.4.4
    • 添加了对 .NET 4.0 和 4.5 的支持
  • v.1.4.3.0
    • 增加了对从右到左语言的支持（通过翻转复选框和标签的顺序）
    • 删除了与模型无关的功能
  • v.1.4.2.3
    • 修复了需要 MVC4 依赖项 (System.Web.WebPages 2.0.0.0)，并且在 MVC3 项目中不起作用的 bug...
  • v.1.4.2.2
    • 添加了 NuGet 包！
    • 为 'CheckBoxList' 和 'CheckBoxListFor' 添加了附加参数 - 'htmlAttributesExpr' 允许从数据库传递自定义 HTML 标签，以应用于每个单独的复选框（请参阅 MVC3 项目中的优秀示例）
    • 改进了名称生成
    • 无数其他小修复...
  • v.1.3c
    • 进行了一些小的 bug 修复
    • 创建了一个 **MVC3 .NET 4.0** 站点示例，该示例随此控件一起提供，因此您可以先进行测试！
  • v.1.3b
    • 添加了函数注释，进行了一些代码清理
  • v.1.3a
    • 它现在会创建一个链接到复选框的标签，而不是纯粹的复选框名称，因此您也可以点击标签来选择该复选框！非常感谢 william0565 的想法！
  • v.1.3
    • 'CheckBoxListFor' 现在可以从 lambda 表达式生成完整名称：例如：@Html.CheckBoxListFor(model => model.SomeClass.SubClass .... ) 会创建一个复选框列表，其 'name="SomeClass.SubClass"'，而旧版本只会创建 'name="SubClass"'
  • v.1.2
    • 您现在可以从视图模型创建强类型复选框列表了！
    • 添加了新方法 'CheckBoxListFor' 以与强类型方法一起使用
  • v.1.1
    • 添加了新选项 'HtmlTag.vertical_columns'，允许将复选框排列在 4 个垂直排序的浮动区域内
    • 重载函数清理
    • 整体代码清理
  • v.1.0
    • 初始发布！

贡献者

© . All rights reserved.