I have searched a lot and spend 3 days only for searching and trying different technique (on stackoverflow etc) but I find no solution for implementing checkboxlist in asp.net mvc. And at last I am posting my problem to stackoverflow;
So, my model looks like this;
Many to Many relationship of my model(1 category may contain many projects and a project may belongs to many categories)
My controller;
[HttpGet]
[Authorize(Roles = "Admin")]
public ActionResult ProjectAdd()
{
return View();
}
My 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>
So, my question is How do I display checkboxlist for categories in my view?
How do I get selected values from that checkboxlist?
You need to have an object that will have a list of all categories , for example, you could do this:
[HttpGet]
[Authorize(Roles = "Admin")]
public ActionResult ProjectAdd()
{
// Get all categories and pass it into the View
ViewBag.Categories = db.ListAllCategories();
return View();
}
in the top of your View
@model Database.Project
@{
// retrieve the list of Categories
List<Database.Category> categories = ViewBag.Categories;
}
and then replace this
<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>
for this
<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>
back in your Controller
[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");
}
Answer suggested by @balexandre above works great. However, I used following HTML Extension for CheckBoxList.
1. CheckboxList in ASP.net MVC4
2. Source Code:HTML Extension Helper method (Github)
The Major advantage of using this helper method is clean code and better readability. Eg
@Html.CheckBoxListFor(model => model.SelectedItems, Model.AllItems)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.