New to Telerik UI for ASP.NET Core? Download free 30-day trial

Getting the Selected CheckBoxes on the Server

Environment

Product Checkbox for Progress® Telerik® UI for ASP.NET Core

Problem

I have a group of ASP.NET Core @Html.Kendo().CheckBox() components. How can I get in my action method which Kendo UI checkboxes are checked?

Description

In a common case for multiple items of the same collection, you can use the value attribute of the CheckBox to carry its identifier to the server, assuming that all CheckBoxes in the list have the same name attribute set. However, in a Telerik UI CheckBox helper, you do not have control over the value attribute because it is designed for being used with a Boolean field to show or edit a single value.

Solution

To resolve the multiple item selection, use any of the following approaches: here are several options for resolving :

The following example demonstrates how to implement the suggested approach in ASP.NET MVC5. For later ASP.NET Core versions, the only difference is the way to return HTML from the controller for the sake of the presentation.

@{
    List<CheckboxListModel> items = new List<CheckboxListModel>()
{
        new CheckboxListModel { Id= "cb1", Name = "first", Description = "checkbox 1"  },
        new CheckboxListModel { Id= "cb2", Name = "second", Description = "checkbox 2"  },
        new CheckboxListModel { Id= "cb3", Name = "third", Description = "checkbox 3"  },
    };
    // In the common case, this comes from the controller rendering the view. Used here for brevity.
}

<form action="/PostCheckBoxList/GetSelectedCheckboxList" method="post">

    @foreach (var item in items)
    {
        <div>
            <input class="k-checkbox" name="TheModelFieldName" value="@item.Name" type="checkbox" id="@item.Id" />
            <label class="k-checkbox-label" for="@item.Id">@item.Description</label>
        </div>
    }

    <input type="submit" value="POST the selected items" />
</form>
[HttpPost]
public ActionResult GetSelectedCheckboxList(List<string> TheModelFieldName)
// This can be bound to an actual model depending on the <form> contents. Used here as a list of checkboxes.
{
    string result = string.Empty;
    for (int i = 0; i < TheModelFieldName.Count; i++)
    {
        result += $"{TheModelFieldName[i]} is checked<br />";
    }

    return Content(result);
}
public class CheckboxListModel
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}

Example for ASP.NET Core

@{
    List<CheckboxListModel> items = new List<CheckboxListModel>()
{
        new CheckboxListModel { Id= "cb1", Name = "first", Description = "checkbox 1"  },
        new CheckboxListModel { Id= "cb2", Name = "second", Description = "checkbox 2"  },
        new CheckboxListModel { Id= "cb3", Name = "third", Description = "checkbox 3"  },
    };
    // In the common case, this comes from the controller rendering the view. Used here for brevity.
}

<form action="/PostCheckBoxList/GetSelectedCheckboxList" method="post">

    @foreach (var item in items)
    {
        <div>
            <input class="k-checkbox" name="TheModelFieldName" value="@item.Name" type="checkbox" id="@item.Id" />
            <label class="k-checkbox-label" for="@item.Id">@item.Description</label>
        </div>
    }

    <input type="submit" value="POST the selected items" />
</form>
[HttpPost]
public ActionResult GetSelectedCheckboxList(List<string> TheModelFieldName)
// This can be bound to an actual model depending on the <form> contents. Used as a list of checkboxes.
{
    string result = string.Empty;
    for (int i = 0; i < TheModelFieldName.Count; i++)
    {
        result += $"{TheModelFieldName[i]} is checked<br />";
    }

    return Content(result, Microsoft.Net.Http.Headers.MediaTypeHeaderValue.Parse("text/html"));
}
public class CheckboxListModel
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}

More ASP.NET Core CheckBox Resources

See Also

In this article