Dynamic checkbox List in Mvc

 Create  dynamic CheckBoxList in MVC ?

You can create checkboxlist in MVC by using the Editor templates

checbox list

Steps for creating checkboxlist

  • Add class to modal folder in your project (MultiCheckListBox)
  • Add Folder (EditorTemplates) to Views -> Shared as shownchecbox

(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


window


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

Now debug your project and see your select checkboxes you can see here in screen shot.

code

Post a Comment

0 Comments