AjaxCheckboxList

It renders a list of checkboxes, needs an url, js func or controller to get data from.

Cascading CheckboxList using binding to parent

AjaxCheckboxListDemo/Index.cshtml
<h3>Cascading CheckboxList using binding to parent</h3>
@(Html.Awe().AjaxCheckboxListFor(o => o.ParentCategory)
.Url(Url.Action("GetCategories", "Data")))

@(Html.Awe().AjaxCheckboxListFor(o => o.ChildMeals)
.Parent(o => o.ParentCategory, "categories")
.Url(Url.Action("GetMeals", "Data")))
Awesome/DataController.cs
public ActionResult GetCategories()
{
return Json(Db.Categories.Select(o => new KeyContent(o.Id, o.Name)));
}

public ActionResult GetMeals(int[] categories)
{
categories = categories ?? new int[] { };

var items = Db.Meals.Where(o => categories.Contains(o.Category.Id))
.Select(o => new KeyContent(o.Id, o.Name));

return Json(items);
}

Bound to many parents

  •  

Mods

ButtonGroup

Multiselect

Parent and Child with NoSelectClose(), values can reordered by dragging them

Multiselect Combo

can add values not present in the select list
awem.multiselb, used in grid columns selector mod

Multiselect, with custom css

AjaxCheckboxListDemo/Index.cshtml

<div class="example">
<h3>ButtonGroup</h3>

@(Html.Awe().AjaxCheckboxList("CategoriesButtonGroup")
.ButtonGroup()
.Url(Url.Action("GetCategories", "Data")))
</div>

<div class="example">
<h3>Multiselect</h3>
<div class="expl">Parent and Child with <code>NoSelectClose()</code>, values can reordered by dragging them</div>
@(Html.Awe().AjaxCheckboxList("CategoriesMulti")
.Multiselect()
.Url(Url.Action("GetCategories", "Data")))

@(Html.Awe().AjaxCheckboxList("AllMealsMulti")
.Multiselect(o => o.NoSelectClose())
.Parent("CategoriesMulti", "categories")
.Url(Url.Action("GetMeals", "Data")))
</div>

<div class="example">
<h3>Multiselect Combo</h3>
<div class="expl">can add values not present in the select list</div>
@(Html.Awe().AjaxCheckboxList("AllMealsMultiCombo")
.Multiselect(o => o.NoSelectClose().Combo())
.Url(Url.Action("GetAllMeals", "Data")))
</div>

<div class="example">
<div class="expl"><code>awem.multiselb</code>, used in grid columns selector mod</div>
@(Html.Awe().AjaxCheckboxList("CategoriesMulti2")
.Mod("awem.multiselb")
.Tag(new { NoSelClose = 1, InLabel = "categories" })
.Url(Url.Action("GetCategories", "Data")))
</div>

<div class="example">
<h3>Multiselect, with custom css</h3>
@(Html.Awe().AjaxCheckboxList("MealsAll")
.Multiselect(o => o.NoSelectClose())
.CssClass("llist")
.Value(Db.Meals.Take(5).Select(o => o.Id))
.Url(Url.Action("GetAllMeals", "Data")))

<style>
.llist {
width: 250px;
}

.llist .o-mlti {
width: 100%;
}
</style>
</div>

Set value from get items call



setting selected items in the controller by returning AweItems instead of KeyContent[]
AjaxCheckboxListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("CategorySv")
.Odropdown(o => o.AutoSelectFirst())
.Url(Url.Action("GetCategories", "Data")))

@(Html.Awe().AjaxCheckboxList("MealsSv")
.Parent("CategorySv", "categories")
.Url(Url.Action("GetMealsSetValue", "Data")))
Awesome/DataController.cs
public ActionResult GetMealsSetValue(int[] categories)
{
categories = categories ?? new int[] { };

var items = Db.Meals.Where(o => categories.Contains(o.Category.Id)).ToList();

object value = null;
if (items.Any())
{
value = new[] { items.Skip(1).First().Id };
}

return Json(new AweItems
{
Items = items.Select(o => new KeyContent(o.Id, o.Name)),
Value = value
});
}

Using predefined parameters

setting parameter parent = { Fruits, Legumes } using .Parameter and .ParameterFunc extensions

Events and Api