如何在 ASP.Net MVC 中制作复选框列表答案

【问题标题】：How to make Check Box List in ASP.Net MVC如何在 ASP.Net MVC 中制作复选框列表
【发布时间】：2016-06-12 19:53:52
【问题描述】：

我有一个带有复选框列表的表单。用户可以选择所有值、无值或介于两者之间的任何值。示例：

我想将结果以逗号分隔列表的形式写入数据库。在上面的例子中，“苹果，香蕉”。我有点困惑如何为此创建模型以及如何将 View 到 Controller 的结果放入逗号分隔的列表中？

【问题讨论】：

你应该发布到目前为止你尝试过的东西..

标签： c# asp.net asp.net-mvc

【解决方案1】：

这是一个如何做到这一点的示例。

HomeModel.cs

public class HomeModel
{
    public IList<string> SelectedFruits { get; set; }
    public IList<SelectListItem> AvailableFruits { get; set; }

    public HomeModel()
    {
        SelectedFruits = new List<string>();
        AvailableFruits = new List<SelectListItem>();
    }
}

HomeController.cs

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new HomeModel
        {
            AvailableFruits = GetFruits()
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(HomeModel model)
    {
        if (ModelState.IsValid)
        {
            var fruits = string.Join(",", model.SelectedFruits);

            // Save data to database, and redirect to Success page.

            return RedirectToAction("Success");
        }
        model.AvailableFruits = GetFruits();
        return View(model);
    }

    public ActionResult Success()
    {
        return View();
    }

    private IList<SelectListItem> GetFruits()
    {
        return new List<SelectListItem>
        {
            new SelectListItem {Text = "Apple", Value = "Apple"},
            new SelectListItem {Text = "Pear", Value = "Pear"},
            new SelectListItem {Text = "Banana", Value = "Banana"},
            new SelectListItem {Text = "Orange", Value = "Orange"},
        };
    }
}

Index.cshtml

@model DemoMvc.Models.HomeModel
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        @using (Html.BeginForm("Index", "Home"))
        {
            foreach (var item in Model.AvailableFruits)
            {
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="SelectedFruits"
                               value="@item.Value"
                               @if(Model.SelectedFruits.Contains(item.Value))
                               {
                                   <text> checked </text> 
                               } 
                               /> @item.Text
                        </label>
                    </div>
            }
            <div class="form-group text-center">
                <input type="submit" class="btn btn-primary" value="Submit" />
            </div>
        }
    </div>
</body>
</html>

这应该在 Post Action 中产生以下结果：

【讨论】：

非常好的答案，只是缺少“选择/检查”处理
此外，每当ModelState.IsValid 为false 时，在重新填充索引视图时，SelectedFruits / 复选框将不会恢复。
@Guillaume 您可以使用此代码进行检查处理<div class="checkbox"> <label> <input type="checkbox" name="SelectedFruits" value="@item.Value" @if(Model.SelectedFruits.Contains(item.Value)){ <text>checked</text> } /> @item.Text </label> </div>
我在这里聚会很晚了，但这不是作弊吗？在将用户发送到视图之前，您正在预填充选定的水果。我必须在这里回应@Guillaume 的评论......你错过了选择处理 - 顺便说一句，这是我绊倒的地方。
@AlexandreRibeiro 我们可以使用var selectedFruits = Request.Form.GetValues("SelectedFruits"); 获取这些复选框

【解决方案2】：

您也可以使用jquery。无需更改任何控制器或操作。它只需将选中的复选框值添加到数据库表的列中，以逗号分隔。只需在查看页面中添加代码即可。

 <div class="editor-field">

        @Html.HiddenFor(model => model.hobbies, new { htmlAttributes = new { id = "hobbies" } })
        Hobbies :
        <input type="checkbox" id="r" onchange="getSelected()" value="Reading" />
        Reading
        <input id="w" type="checkbox" value="Writing" onchange="getSelected()" />
        Writing

        <script>
            function getSelected() {
                var sList = "";
                $('input[type=checkbox]').each(function () {
                    if (this.checked) {
                        sList += this.value + ",";

                    }
                });
                $("#hobbies").val(sList);
            }
        </script>
        @Html.ValidationMessageFor(model => model.hobbies)
    </div>

【讨论】：

这对我有用。只是有一个错误 - 它应该是：@Html.HiddenFor(model => model.hobbies, new { id = "hobbies" } ) 或者我宁愿最初使用@Html.Hidden("hobbies", string.Join(",", Model.hobbies), new { id = "hobbies" })，否则你会得到String[]的值