CheckBox Helper in MVC

Consider the following code which has a CheckBox and a submit button:

@using (Html.BeginForm())
{
    <input type="checkbox" name="Select" />
    <input type="submit" value="Submit" />
}

Submit the form. The request body has the form data with name-value pairs. If the user checks the checkbox, the form data has Select=on. If the user clears the checkbox, the form data does not contain Select.

All of the form data is bound to a model. A typical action method has a Select parameter.

[HttpPost]
public ActionResult Index(string Select)
{
    ViewBag.Message = "The value of Select is " + Select ?? "";
    return View();
}

The checkbox may have a value attribute. This value is sent to the server as part of form data.

@using (Html.BeginForm())
{
    <input type="checkbox" name="Select" value="SomeValue"/>
    <input type="submit" value="Submit" />
}

HtmlHelper

As an alternative to plain HTML, MVC has HTML helpers.

@using (Html.BeginForm())
{
    @Html.CheckBox("Select")
    <input type="submit" value="Submit" />
}

The Checkbox HtmlHelper has a limitation. It sends only true or false in the form data. The markup produced by the helper is:

<input id="Select" name="Select" type="checkbox" value="true" />
<input name="Select" type="hidden" value="false" />

It has one advantage. Even when there is no selection, the form data has a value of false. 

Sometimes, we need a list of checkboxes with unique values assigned to each of them.

@using (Html.BeginForm())
{
    <input type="checkbox" name="Select" value="1" />
    <input type="checkbox" name="Select" value="2" />
    <input type="checkbox" name="Select" value="3" />
    <input type="checkbox" name="Select" value="4" />
    <input type="checkbox" name="Select" value="5" />
    <input type="submit" value="Submit" />
}

For such a collection, the form data has an array of values. The action method will have the following signature.

[HttpPost]
public ActionResult Index(string [] Select)
{
    string selection = "";
    if (Select != null && Select.Length > 0)
    {
        foreach (string s in Select)
        {
            selection += s + ", ";
        }
    }

    ViewBag.Message = "The value of Select is " + selection;
    return View();
}

The above logic is not possible with the CheckBox HtmlHelper that comes out as default in MVC.

ValuedCheckBox

We create our own HtmlHelper extension method.

public static class InputHelper
{
    public static IHtmlString ValuedCheckBox(this HtmlHelper helper, string name, string value)
    {
        string html = @"<input type=""checkbox"" name=""{0}"" value=""{1}""/>";
        return helper.Raw(String.Format(html, name, value));
    }
}

The ValuedCheckBox extension method produces a simple HTML markup. Use it as follows.

@using (Html.BeginForm())
{
    @Html.ValuedCheckBox("Select", "1")
    @Html.ValuedCheckBox("Select", "2")
    @Html.ValuedCheckBox("Select", "3")
    @Html.ValuedCheckBox("Select", "4")
    @Html.ValuedCheckBox("Select", "5")
    <input type="submit" value="Submit" />
}

ValuedCheckBox is useful to display checkboxes in a grid.