Asp.Net MVC4显示CheckboxList

时间:2012-09-29 06:15:03

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

我搜索了很多,只花了3天时间搜索和尝试不同的技术(在stackoverflow等),但我找不到在asp.net mvc中实现checkboxlist的解决方案。最后我将我的问题发布到stackoverflow;
所以,我的模型看起来像这样;

Many to Many relationship of my model(1 category may contain many project and a project may belongs to many categories) rel

我的模型的多对多关系(1个类别可能包含许多项目,而项目可能属于许多类别)
我的控制器;

 [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>

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

2 个答案:

答案 0 :(得分:17)

您需要一个具有所有类别列表的对象,例如,您可以这样做:

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

答案 1 :(得分:4)

@balexandre上面提出的答案很有效。但是,我在CheckBoxList中使用了以下HTML扩展。

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

使用此辅助方法的主要优点是代码清晰,可读性更高。 E.g。

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