Asp.Net MVC4 显示复选框列表答案

【问题标题】：Asp.Net MVC4 Display CheckboxListAsp.Net MVC4 显示复选框列表
【发布时间】：2014-01-27 09:02:40
【问题描述】：

我搜索了很多，只花了 3 天时间来搜索和尝试不同的技术（在 stackoverflow 等上），但我没有找到在 asp.net mvc 中实现 checkboxlist 的解决方案。最后我将我的问题发布到stackoverflow；
所以，我的模型是这样的；

我的模型的多对多关系（一个类别可能包含多个项目，一个项目可能属于多个类别）
我的控制器；

 [HttpGet]
    [Authorize(Roles = "Admin")]
    public ActionResult ProjectAdd()
    {
        return View();
    }

我的看法；

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)

    <fieldset>
        <legend>Add New Project</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProjectHeading)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProjectHeading)
            @Html.ValidationMessageFor(model => model.ProjectHeading)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProjecctUrl)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProjecctUrl)
            @Html.ValidationMessageFor(model => model.ProjecctUrl)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProjectLongDescription)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProjectLongDescription)
            @Html.ValidationMessageFor(model => model.ProjectLongDescription)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.PromoFront)
        </div>
        @Html.EditorFor(model => model.PromoFront)
        @Html.ValidationMessageFor(model => model.PromoFront)

        <div class="editor-label">
            @Html.LabelFor(model => model.ProjectThubmnail)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProjectThubmnail)
            @Html.ValidationMessageFor(model => model.ProjectThubmnail)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ProjectImage)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ProjectImage)
            @Html.ValidationMessageFor(model => model.ProjectImage)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.CategoryId)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.CategoryId)
            @Html.ValidationMessageFor(model => model.CategoryId)
        </div>

        <p>
            <input type="submit" value="Create" class="submit" />
        </p>

所以，我的问题是如何在我的视图中显示类别的复选框列表？
如何从该复选框列表中获取选定的值？

【问题讨论】：

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

【解决方案1】：

您需要有一个包含所有类别列表的对象，例如，您可以这样做：

[HttpGet]
[Authorize(Roles = "Admin")]
public ActionResult ProjectAdd()
{
    // Get all categories and pass it into the View
    ViewBag.Categories = db.ListAllCategories();

    return View();
}

在您的视图顶部

@model Database.Project
@{
   // retrieve the list of Categories
   List<Database.Category> categories = ViewBag.Categories;
}

然后替换这个

    <div class="editor-label">
        @Html.LabelFor(model => model.CategoryId)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.CategoryId)
        @Html.ValidationMessageFor(model => model.CategoryId)
    </div>

为此

    <div class="editor-label">
        <label for="categories">Categories</label>
    </div>
    <div class="editor-field">
        @foreach(var c in categories) {

        <label class="checkbox">
            <input type="checkbox" name="categories" value="@c.CategoryId"> @c.CategoryName
        </label>

        }
    </div>

回到你的控制器

[HttpPost]
[Authorize(Roles = "Admin")]
public ActionResult ProjectAdd(Database.Project model, int[] categories)
{
    if(ModelState.IsValid) {

        // fill up categories
        db.InsertAndSaveProject(model, categories);

    }

    ...

    return redirectToView("ProjectAdd");
}

【讨论】：

你能告诉我一件事，我如何循环遍历每个类别
@DotNetDreamer 和 foreach(int cat in categories) db.InsertCategory(model.ProductId, cat);，你需要一个表来保存这两个值，一个只包含 ProductId 和 CategoryId 的 ProductCategories 表。请记住，对于 EDITING，您需要在新表 ProductCategories 中删除该产品的所有类别并重新添加。
是的，我已经完成了 I-e ProjectCategories 但我需要将其插入第三个表中？
对于 N 对 N，您需要 3 个表：TBL_Products、TBL_Categories 和 TBL_ProductCategories
有没有办法使用 ICollection 和 ICollection 而不是创建第三个模型？我认为 Entity Framework 的全部意义在于绕过构建所有桌面工作的想法？

【解决方案2】：

上面@balexandre 建议的答案效果很好。但是，我为 CheckBoxList 使用了以下 HTML 扩展。

1. CheckboxList in ASP.net MVC4
2. Source Code:HTML Extension Helper method (Github)

使用这种辅助方法的主要优点是代码简洁且可读性更好。例如

@Html.CheckBoxListFor(model => model.SelectedItems, Model.AllItems)

【讨论】：