Following is a simple asp.net mvc Extension/Helper method to create a checkbox list.
This method takes IEnumerable list, name for the list, number of columns per row, html attributes(if any) as parameters.
public static class CheckBoxExtension
{
public static MvcHtmlString CheckBoxList(this HtmlHelper helper, IEnumerable<SelectListItem> items,
string name, int columns, object htmlAttributes)
{
//Build a string builder
var output = new StringBuilder();
output.Append("<div>");
output.Append("<table><tr>");
int itemCount = 0;
//Loop through items and generate checkbox list.
foreach (var item in items)
{
itemCount++;
output.Append("<td style='white-space:normal;'>");
var checkboxList = new TagBuilder("input");
checkboxList.MergeAttribute("type", "checkbox");
checkboxList.MergeAttribute("name", name, true);
checkboxList.MergeAttribute("ID", name + "-" + item.Value, true);
checkboxList.MergeAttribute("value", item.Value);
if (!ReferenceEquals(htmlAttributes, null))
checkboxList.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
// Check to see if it's checked
if (item.Selected)
checkboxList.MergeAttribute("checked", "checked");
checkboxList.SetInnerText(item.Text);
output.Append(checkboxList.ToString(TagRenderMode.SelfClosing));
output.Append(" ");
output.Append(item.Text);
//List alignment as per number of columns specified
if ((itemCount % columns) == 0)
{
output.Append("</td>");
output.Append("</tr>");
output.Append("<tr>");
}
else
{
output.Append("</td>");
}
}
output.Append("</tr></table>");
output.Append("</div>");
return MvcHtmlString.Create(output.ToString());
}
}
add above class to your project.
You can call the above helper in the View as follows
@using "namespace where extesion method is defined"
@{
var dayList = new List<SelectListItem>
{
new SelectListItem
{
Text = "Sunday",
Value = "1",
Selected = true
},
new SelectListItem
{
Text = "Monday",
Value = "2",
Selected = false
},
new SelectListItem
{
Text = "Tuesday",
Value = "3",
Selected = true
},
};
}
//call to the helper
@Html.CheckBoxList(dayList, "Days", 3, null)
Output will be as follows :
That's it your extension mehod is ready.
Feel free to comment..
This method takes IEnumerable list, name for the list, number of columns per row, html attributes(if any) as parameters.
public static class CheckBoxExtension
{
public static MvcHtmlString CheckBoxList(this HtmlHelper helper, IEnumerable<SelectListItem> items,
string name, int columns, object htmlAttributes)
{
//Build a string builder
var output = new StringBuilder();
output.Append("<div>");
output.Append("<table><tr>");
int itemCount = 0;
//Loop through items and generate checkbox list.
foreach (var item in items)
{
itemCount++;
output.Append("<td style='white-space:normal;'>");
var checkboxList = new TagBuilder("input");
checkboxList.MergeAttribute("type", "checkbox");
checkboxList.MergeAttribute("name", name, true);
checkboxList.MergeAttribute("ID", name + "-" + item.Value, true);
checkboxList.MergeAttribute("value", item.Value);
if (!ReferenceEquals(htmlAttributes, null))
checkboxList.MergeAttributes(HtmlHelper.AnonymousObjectToHtmlAttributes(htmlAttributes));
// Check to see if it's checked
if (item.Selected)
checkboxList.MergeAttribute("checked", "checked");
checkboxList.SetInnerText(item.Text);
output.Append(checkboxList.ToString(TagRenderMode.SelfClosing));
output.Append(" ");
output.Append(item.Text);
//List alignment as per number of columns specified
if ((itemCount % columns) == 0)
{
output.Append("</td>");
output.Append("</tr>");
output.Append("<tr>");
}
else
{
output.Append("</td>");
}
}
output.Append("</tr></table>");
output.Append("</div>");
return MvcHtmlString.Create(output.ToString());
}
}
add above class to your project.
You can call the above helper in the View as follows
@using "namespace where extesion method is defined"
@{
var dayList = new List<SelectListItem>
{
new SelectListItem
{
Text = "Sunday",
Value = "1",
Selected = true
},
new SelectListItem
{
Text = "Monday",
Value = "2",
Selected = false
},
new SelectListItem
{
Text = "Tuesday",
Value = "3",
Selected = true
},
};
}
//call to the helper
@Html.CheckBoxList(dayList, "Days", 3, null)
Output will be as follows :
That's it your extension mehod is ready.
Feel free to comment..