Awesome ASP.net Core and MVC Controls
AjaxCheckboxList
Cascading CheckboxList using binding to parent
The AjaxCheckboxList renders a list of checkboxes,
needs an url, js func or controller defined to get data from.
It can be bound to parent controls.
It can be bound to parent controls.
AjaxCheckboxListDemo/Index.cshtml
<h2>Cascading CheckboxList using binding to parent</h2>
@(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 IActionResult GetCategories()
{
return Json(Db.Categories.Select(o => new KeyContent(o.Id, o.Name)));
}
public IActionResult 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);
}
Ochk
AjaxCheckboxListDemo/Index.cshtml
@(Html.Awe().AjaxCheckboxList("CategoriesOchk")
.Value(new [] { Db.Categories[0].Id, Db.Categories[1].Id })
.Ochk()
.DataFunc(Url.Action("GetCategories", "Data").CacheGetFunc()))
ButtonGroup
AjaxCheckboxListDemo/Index.cshtml
@(Html.Awe().AjaxCheckboxList("CategoriesButtonGroup")
.ButtonGroup()
.DataFunc(Url.Action("GetCategories", "Data").CacheGetFunc()))
Multiselect
Parent and Child multiselect,
NoSelectClose()
set on the child,
selected values can be reordered by dragging themAjaxCheckboxListDemo/Index.cshtml
@(Html.Awe().AjaxCheckboxList("CategoriesMulti")
.Multiselect()
.Value(new []{ Db.Categories[0].Id })
.DataFunc(Url.Action("GetCategories", "Data").CacheGetFunc()))
@(Html.Awe().AjaxCheckboxList("AllMealsMulti")
.Multiselect(o => o.NoSelectClose())
.Parent("CategoriesMulti", "categories")
.Url(Url.Action("GetMeals", "Data")))
Multiselect with custom item
Defining custom rendering functions for the dropdown list item and selected caption
AjaxCheckboxListDemo/Index.cshtml
@(Html.Awe().AjaxCheckboxList("MealsMultiImg")
.Value(new [] { Db.Meals[0].Id, Db.Meals[2].Id, Db.Meals[14].Id})
.CssClass("bigMulti")
.Multiselect(o => o.ItemFunc("awem.imgItem").CaptionFunc("utils.imgCaption").NoSelectClose())
.DataFunc(Url.Action("GetMealsImg", "Data").CacheGetFunc()))
Awesome/DataController.cs
public IActionResult GetMealsImg()
{
var url = Url.Content(DemoUtils.MealsUrl);
var items = Db.Meals
.Select(o => new MealDisplay(o.Id, o.Name, url + o.Name + ".jpg", o.Category.Id));
return Json(items);
}
Multichk
AjaxCheckboxListDemo/Index.cshtml
@(Html.Awe().AjaxCheckboxList("MealsMultiChk")
.Value(new [] { Db.Meals[0].Id, Db.Meals[2].Id, Db.Meals[14].Id})
.DataFunc(Url.Action("GetMealsImg", "Data").CacheGetFunc())
.Multichk(o => o.ItemFunc("awem.imgItem")
.NoSelectClose()
.ClearBtn()))
Awesome/DataController.cs
public IActionResult GetMealsImg()
{
var url = Url.Content(DemoUtils.MealsUrl);
var items = Db.Meals
.Select(o => new MealDisplay(o.Id, o.Name, url + o.Name + ".jpg", o.Category.Id));
return Json(items);
}
Multiselect Combo
can add values not present in the select list
AjaxCheckboxListDemo/Index.cshtml
@(Html.Awe().AjaxCheckboxList("AllMealsMultiCombo")
.Multiselect(o => o.NoSelectClose().Combo())
.DataFunc(Url.Action("GetMealsImg", "Data").CacheGetFunc()))
Multiselect, with custom css
Remote search, external api
try 'valueinjecter'
Getting data from the git api on search using the
Using the same cache key "g1", so searching in one control will populate the other one with data as well.
SearchFunc
.
ItemFunc
and CaptionFunc
are used to specify custom rendering functions for the items and the caption.Using the same cache key "g1", so searching in one control will populate the other one with data as well.
Shared/Demos/RmtSrcGit.cshtml
@(Html.Awe().AjaxRadioList("GitRepoOdropdown")
.Load(false)
.Odropdown(o =>
o.SearchFunc("site.gitRepoSearch", key: "g1")
.ItemFunc("site.gitItem")
.CaptionFunc("site.gitCaption")
.Caption("select a git repo")))
<span class="hint">try 'valueinjecter'</span>
<br/>
<br/>
@(Html.Awe().AjaxCheckboxList("GitRepoMultiselect")
.Load(false)
.Multiselect(o =>
o.SearchFunc("site.gitRepoSearch", key: "g1")
.ItemFunc("site.gitItem")
.CaptionFunc("site.gitCaption")
.Caption("select a git repo")))
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())
.DataFunc(Url.Action("GetCategories", "Data").CacheGetFunc()))
@(Html.Awe().AjaxCheckboxList("MealsSv")
.Parent("CategorySv", "categories")
.Url(Url.Action("GetMealsSetValue", "Data"))
.Ochk())
Awesome/DataController.cs
public IActionResult 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
Showing commonly used client side api methods.
To change the value you simply call jquery
The same api methods can be used for the AjaxDropdown, AjaxRadioList controls and their mods.
To change the value you simply call jquery
.val(newvalue).change()
.aweload
event is handled to flash the #log div whenever the dropdown loads.The same api methods can be used for the AjaxDropdown, AjaxRadioList controls and their mods.
AjaxDropdownDemo/Index.cshtml
@{
var meal1 = Db.Meals[1];
var meal2 = Db.Meals[2];
}
@(Html.Awe().AjaxDropdown("ddApi")
.Url(Url.Action("ApiGetMeals", "Data")))
<br />
<br />
@Html.Awe().Button().Text("Change value to " + meal1.Name).OnClick("changeval(" + meal1.Id + ")")
@Html.Awe().Button().Text("Change value to " + meal2.Name).OnClick("changeval(" + meal2.Id + ")")
@Html.Awe().Button().Text("Load only first category").OnClick("loadFirstCat()")
@Html.Awe().Button().Text("Reload").OnClick("reload()")
@Html.Awe().Button().Text("Toggle Enable").OnClick("toggleEnable()")
<br />
<br />
<div id="log">
</div>
<script>
var dd = $('#ddApi');
function changeval(newVal) {
dd.val(newVal).change();
}
function reload() {
dd.data('api').load();
}
function loadFirstCat() {
dd.data('api').load({ oparams: { cat1: true }});
// oparams sets cat1 just for this call
// params sets persistent parameters
}
function toggleEnable() {
var o = dd.data('o');
o.api.enable(!o.enb);
}
$(function() {
dd.on('aweload', function(e, data) {
awe.flash($('#log').html('loaded ' + data.length + ' items'));
});
});
</script>
Awesome/DataController.cs
public IActionResult ApiGetMeals(int? v, bool? cat1)
{
var items = Db.Meals;
if (cat1.HasValue && cat1.Value)
{
items = items.Where(o => o.Category == Db.Categories[0]).ToList();
}
return Json(items.Select(o => new KeyContent(o.Id, o.Name)));
}
Toggle select all
AjaxCheckboxListDemo/Index.cshtml
<div class="ib">
<button type="button" class="awe-btn" onclick="toggleChkl('chklCatAll')">toggle select all</button>
<br />
<br />
@(Html.Awe().AjaxCheckboxList("chklCatAll").DataFunc(Url.Action("GetCategories", "Data").CacheGetFunc()))
</div>
<div class="ib">
<button type="button" class="awe-btn" onclick="toggleChkl('chklCatAll2')">toggle select all</button>
<br />
<br />
@(Html.Awe().AjaxCheckboxList("chklCatAll2").DataFunc(Url.Action("GetCategories", "Data").CacheGetFunc()).Ochk())
</div>
<script>
function toggleChkl(id) {
var f = $('#' + id).parent();
f.find(':checkbox').prop('checked', !f.find(':checkbox').first().prop('checked')).change();
}
</script>
Comments