MVC3 下拉或列表框与动态复选框答案

【问题标题】：MVC3 Drop Down or ListBox with dynamic check boxesMVC3 下拉或列表框与动态复选框
【发布时间】：2012-03-21 02:12:46
【问题描述】：

我有一个 MVC3 C#.Net 网络应用程序。我需要根据我们数据库中的表动态显示复选框列表（在下拉列表或列表框中）。该表可以包含 1:500 个条目。然后我需要将选中的复选框传递给控制器，以便对每个选择执行操作。关于实现的任何想法？

【问题讨论】：

标签： asp.net-mvc-3 dynamic drop-down-menu checkbox

【解决方案1】：

有很多方法可以解决这个问题，但这里是一个通用演示。

您可以在Model（如本例那样）、ViewData[""] 字典或ViewBag (MVC3+) 上传递复选框值和描述的列表。

然后在您的视图中循环浏览它们并将它们添加到您的表单中，使用 name="chxBxGroupName" 对它们进行分组。

现在创建一个控制器操作以发布到该操作，该操作采用值类型的 List（在本示例中为 int），参数命名与 name="chxBxGroupName" 匹配。 p>

它将发布一个检查值列表。

帖子页面只会打印出来：

123
456

// This is your landing page. It gathers the data to display to the user as checkboxes.
public ViewResult MyPageWithTheCheckboxes()
{
    // For example: Assume a Dictionary with the checkbox value and description
    // Replace with DB call, etc.
    return View(new Dictionary<int, string> { { 123, "Foo" }, { 456, "Bar" } });
}

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<Dictionary<int,string>>" %>

<!-- Rest of HTML page... -->

<form id="frm1" action="<%=Url.Action("MyPost")%>" method="post">
<%  foreach (var item in Model) { %>
        <input type="checkbox" id="chxBx<%=item.Key%>" name="chxBxGroupName" value="<%=item.Key%>"/>
        <label for="chxBx<%=item.Key%>"><%=item.Value%></label>
        <br/><br/>
<%  } %>    
    <input type="submit" value="Go!"/>
</form>

<!-- Rest of HTML page... -->

public ContentResult MyPost(List<int> chxBxGroupName)
{
    return Content(string.Join(Environment.NewLine, chxBxGroupName ?? new List<int>()), "text/plain");
}

【讨论】：

@Jay...谢谢。看起来可行。你知道是否可以在下拉列表中插入复选框？
@MikeTWebb Sorta，我不知道内置什么。有可用的 jQuery 插件，例如：code.google.com/p/dropdown-check-list 或者您可以推出自己的解决方案。

【解决方案2】：

Jay 提供的答案正是您所需要的。如果你想把项目放在一个列表中，你可以通过在下面用 div 控件包围标记来做到这一点

<div style="height:40px;overflow:auto;">
    <%  foreach (var item in Model) { %> 
            <input type="checkbox" id="chxBx<%=item.Key%>" name="chxBxGroupName" value="<%=item.Key% >"/> 
            <label for="chxBx<%=item.Key%>"><%=item.Value%></label> 
            <br/><br/> 
    <%  } %>   
</div>

不幸的是，<select /> 中不能有复选框，但如果你真的希望它看起来像一个选择列表，你可以添加一些 JQuery 来处理文本框的点击并显示 div。这显然需要一些 jQuery 并且可能不值得

【讨论】：