Razor Page
This article demonstrates how to configure the Telerik UI CheckBoxGroup component for ASP.NET Core in a RazorPage scenario.
For the full project with RazorPages examples, visit our GitHub repository.
@page
@model Telerik.Examples.RazorPages.Pages.CheckBoxGroup.CheckBoxGroupIndexModel
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
<label>Select color:</label>
@(Html.Kendo().CheckBoxGroup()
.Name("checkboxgroup")
.BindTo(Model.CheckBoxGroupModel.Items)
.Value(Model.CheckBoxGroupModel.CheckBoxGroupValue)
)
<kendo-checkboxgroup name="checkboxgroup"
value="@Model.CheckBoxGroupModel.CheckBoxGroupValue"
bind-to="@Model.CheckBoxGroupModel.Items">
</kendo-checkboxgroup>
public List<IInputGroupItem> itemsList { get; set; }
[BindProperty]
public CheckBoxGroupViewModel CheckBoxGroupModel { get; set; }
public void OnGet()
{
if (CheckBoxGroupModel == null)
{
itemsList = new List<IInputGroupItem>()
{
new InputGroupItemModel()
{
Label = "Red",
Value = "one"
},
new InputGroupItemModel()
{
Label = "Green",
Value = "two"
},
new InputGroupItemModel()
{
Label = "Blue",
Value = "three"
}
};
CheckBoxGroupModel = new CheckBoxGroupViewModel() { Items = itemsList, CheckBoxGroupValue = new string[] { "two" } };
}
}
public class InputGroupItemModel: IInputGroupItem
{
public IDictionary<string, object> HtmlAttributes { get; set; }
public string CssClass { get; set; }
public bool? Enabled { get; set; }
public bool? Encoded { get; set; }
public string Label { get; set; }
public string Value { get; set; }
}
public class CheckBoxGroupViewModel
{
public List<IInputGroupItem> Items { get; set; }
public string[] CheckBoxGroupValue { get; set; }
}