Create dynamic CheckBoxList in MVC ?
You can create checkboxlist in MVC by using the Editor templates
Steps for creating checkboxlist
- Add class to modal folder in your project (MultiCheckListBox)
- Add Folder (EditorTemplates) to Views -> Shared as shown
(MultiCheckListBox) class should Look like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ExportToExcel.Models
{
public class MultiCheckListBox
{
public string ID { get; set; }
public string DisplayLabel { get; set; }
public bool Checked { get; set; }
public string checkboxOnClick { get; set; } // for javascript Event
}
public class CheckListViewModal
{
public List<MultiCheckListBox> Cities { get; set; }
}
}
- Add Partial View to EditorTemplates folder.
- The view name should be same as a class name.
as shown in screen shot
The Partial view (MultiCheckListBox) should look Like this.
@model ExportToExcel.Models.MultiCheckListBox
<tr>
<td>
@Html.HiddenFor(x => x.ID)
@Html.LabelFor(x => x.DisplayLabel, htmlAttributes: new { @style = "display:none;" })
@Html.CheckBoxFor(x => x.Checked, htmlAttributes: new { onclick = Model.checkboxOnClick })
</td>
<td>
@Html.LabelFor(x => x.Checked, Model.DisplayLabel)
</td>
</tr>
Add controller(CheckBoxExample) to controllers folder
it should look like this
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ExportToExcel.Models;
namespace ExportToExcel.Controllers
{
public class CheckBoxExampleController : Controller
{
// GET: CheckBoxExample
public ActionResult CheckBoxExp()
{
var modal = new CheckListViewModal();
List<MultiCheckListBox> citylst = new List<MultiCheckListBox>();
for (int i = 1; i <= 20; i++ )
citylst.Add(new MultiCheckListBox() { ID = i.ToString(), Checked = false, DisplayLabel = "City "+i.ToString() });
modal.Cities = citylst;
return View(modal);
}
[HttpPost]
public ActionResult CheckBoxExp(CheckListViewModal modal)
{
var selected = modal.Cities.Where(x => x.Checked == true).ToList();
List<MultiCheckListBox> citylst = new List<MultiCheckListBox>();
for (int i = 1; i <= 20; i++)
citylst.Add(new MultiCheckListBox() { ID = i.ToString(),
Checked = selected.Where(x => x.ID == i.ToString()).ToList().Count > 0 ? true : false,
DisplayLabel = "City " + i.ToString() });
modal.Cities = citylst;
return View(modal);
}
}
}
Add view to Action method (CheckBoxExp)
The view (CheckBoxExp) should look like this
@model ExportToExcel.Models.CheckListViewModal
@{
ViewBag.Title = "CheckBoxExp";
Layout = "~/Views/Shared/_MyLayout.cshtml";
}
<h2>Check Box List</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<hr />
<div class="form-horizontal">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
<div class="col-md-offset-2 col-md-4">
<div class="panel panel-primary">
<div class="panel-heading">Select City</div>
<div class="panel-body" style="height:200px;overflow:scroll;">
<table class="table table-bordered table-condensed">
@Html.EditorFor(x => x.Cities)
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-danger" />
</div>
</div>
</div>
}
0 Comments