Wednesday, January 2, 2013

asp.net mvc check box list helper

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("&nbsp;");
                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..