Awesome ASP.net Core and MVC Controls
AjaxRadioList
AjaxRadioList needs an url, js func or controller to get data from, it will render a list of radiobuttons
Cascading Radio button list using binding to Parent
AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioListFor(o => o.ParentCategory)
.Url(Url.Action("GetCategories", "Data")))
@(Html.Awe().AjaxRadioListFor(o => o.ChildMeal)
.Url(Url.Action("GetMeals", "Data"))
.Parent(o => o.ParentCategory, "categories"))
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
AjaxRadioListDemo/Index.cshtml
@Html.Awe().AjaxCheckboxListFor(o => o.Categories).Url(Url.Action("GetCategories", "Data"))
@(Html.Awe().AjaxRadioListFor(o => o.Category2)
.Url(Url.Action("GetCategories", "Data")))
@(Html.Awe().AjaxRadioListFor(o => o.ChildOfManyMeal)
.Url(Url.Action("GetMeals", "Data"))
.Parent(o => o.Categories, "categories")
.Parent(o => o.Category2, "categories"))
Client data
Besides remote data using
.Url(str)
, it can also get data from the client using .DataFunc(jsFunc)
, the jsFunc can return the items or a Promise
AjaxRadioListDemo/Index.cshtml
<script>
var meals = @Html.Raw(DemoUtils.Encode(Db.Meals.Select(o => new KeyContent(o.Id, o.Name))));
var categories = @Html.Raw(DemoUtils.Encode(Db.Categories.Select(o => new KeyContent(o.Id, o.Name))));
function setCategs() {
return categories;
}
</script>
@Html.Awe().AjaxRadioList("CatClient1").DataFunc("setCategs")
@*instead of setCategs we can also use utils.getItems(categories)*@
Mods
Extending the behaviour of the AjaxRadioList using mods. The new components have the same features as the AjaxRadioList but render (look) differently
and have additional properties which can be specified inside the Extension Method (e.g. .Odropdown(o => o.Caption("please select")) )
Ochk
AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("CategoryOchk")
.Value(Db.Categories[0].Id)
.Ochk()
.DataFunc("utils.getItems(categories)")) @*can also use .Url(url)*@
ButtonGroup
AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("CategoriesButtonGroup")
.ButtonGroup()
.DataFunc("utils.getItems(categories)"))
Odropdown
automatically gets search when there are more than 10 items (configurable e.g.
.Odropdown(o => o.AutoSearch(5))
)AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("AllMealsOdropdown")
.Odropdown()
.DataFunc("utils.getItems(meals)"))
Cascading Odropdowns
AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("CatOdropdown")
.Odropdown()
.Url(Url.Action("GetCategories", "Data")))
@(Html.Awe().AjaxRadioList("MealsOdropdown")
.Odropdown(o => o.AutoSelectFirst())
.Url(Url.Action("GetMeals", "Data"))
.Parent("CatOdropdown", "categories"))
Odropdown with grouped items
AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("MealsGrouped")
.Odropdown()
.Url(Url.Action("GetAllMealsGrouped", "Data")))
Awesome/DataController.cs
public ActionResult GetAllMealsGrouped()
{
var res = new List<Oitem>();
var groups = Db.Meals.GroupBy(o => o.Category);
foreach (var g in groups)
{
res.Add(new Oitem
{
Content = g.Key.Name,
Class = "o-itm o-itmg",
NonVal = true,
Items = g.Select(meal => new Oitem(meal.Id, meal.Name))
});
}
return Json(res);
}
Odropdown, tree data, lazy nodes, remote search
AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("RmtLazyTree")
.Url(Url.Action("GetTreeNodesLazy", "Data"))
.Odropdown(o => o.CollapseNodes()
.PopupMinWidth(350)
.SearchFunc("utils.osearch", Url.Action("SearchTree", "Data"))))
Awesome/DataController.cs
public ActionResult GetTreeNodesLazy(int? key)
{
var nodes = key.HasValue ?
GetNodes(Db.TreeNodes.Where(o => o.Id == key)).Take(10) :
GetNodes(Db.TreeNodes.Where(o => o.Parent == null).Take(10), lazy: true);
return Json(nodes);
}
public ActionResult SearchTree(string term)
{
term = (term ?? string.Empty).ToLower();
var result = Db.TreeNodes.Where(o => o.Name.ToLower().Contains(term)).Take(3).ToList();
var loopres = result.ToList();
foreach (var treeNode in loopres)
{
AddParentsTo(result, treeNode);
}
var roots = result.Where(o => o.Parent == null).ToList();
var nodes = GetNodes(roots);
return Json(nodes);
}
private IEnumerable<Oitem> GetNodes(IEnumerable<TreeNode> nodes, int lvl = 0, bool lazy = false)
{
var list = new List<Oitem>();
foreach (var node in nodes)
{
var oitem = new Oitem { Key = node.Id.ToString(), Content = node.Name };
list.Add(oitem);
var children = Db.TreeNodes.Where(o => o.Parent == node);
if (children.Any())
{
if (lazy && lvl > 0)
{
oitem.Lazy = true;
}
else
{
oitem.Items = GetNodes(Db.TreeNodes.Where(o => o.Parent == node), lvl + 1, lazy);
}
}
}
return list;
}
private void AddParentsTo(ICollection<TreeNode> result, TreeNode node)
{
if (node.Parent != null)
{
if (!result.Contains(node.Parent))
{
result.Add(node.Parent);
AddParentsTo(result, node.Parent);
}
}
}
Combobox
AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("AllMealsCombo")
.Value("hi there")
.Combobox()
.DataFunc("utils.getItems(meals)"))
Color dropdown
AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("ColorPicker1")
.ColorDropdown(o => o.AutoSelectFirst()))
Odropdown with custom item and caption
Custom js functions are defined for rendering the items and caption of the odropdown.
AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("CustomItemOdd")
.Value(Db.Meals[1].Id)
.Odropdown(o => o.ItemFunc("imgItem").CaptionFunc("imgCaption"))
.Url(Url.Action("GetMealsImg", "Data")))
<script>
function imgItem(o) {
return '<div class="o-igit"><img src="' + o.url + '" />' + o.c + '</div>';
}
function imgCaption(o) {
return '<img class="cthumb" src="' + o.url + '" />' + o.c;
}
</script>
Awesome/DataController.cs
public ActionResult GetMealsImg()
{
var url = Url.Content(DemoUtils.MealsUrl);
var items = Db.Meals
.Select(o => new MealDisplay(o.Id, o.Name, url + o.Name + ".jpg"));
return Json(items);
}
Image dropdown
AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("ImgDropdown")
.Url(Url.Action("GetMealsImg", "Data"))
.ImgDropdown(o => o.AutoSelectFirst()))
Awesome/DataController.cs
public ActionResult GetMealsImg()
{
var url = Url.Content(DemoUtils.MealsUrl);
var items = Db.Meals
.Select(o => new MealDisplay(o.Id, o.Name, url + o.Name + ".jpg"));
return Json(items);
}
TimePicker
AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("TimePicker1")
.TimePicker(o => o.Caption("time please").Step(15)))
Odropdown with remote search
try 'o'
Only a few items + the selected one are loaded initially using the url specified in .Url, but when the user types something in the searchbox more items
are loaded by executing the specified .SearchFunc; the new loaded items will be stored/cached until a load will occur, e.g. when a parent changes it's value the component will load.
Components with the same cache key ("m1", "g") have a shared cache.
Components with the same cache key ("m1", "g") have a shared cache.
AjaxRadioListDemo/Index.cshtml
@(Html.Awe().AjaxRadioList("RemoteSearchOdropdown")
.Odropdown(o => o.SearchFunc("utils.osearch", Url.Action("SearchMeals", "Data"), "m1"))
.Value(197)
.Url(Url.Action("GetMealsInit", "Data")))
@(Html.Awe().AjaxRadioList("RemoteSearchCombobox")
.Combobox(o => o.SearchFunc("utils.osearch", Url.Action("SearchMeals", "Data"), "m1"))
.Value(197)
.Url(Url.Action("GetMealsInit", "Data"))) <span class="hint">try 'o'</span>
Awesome/DataController.cs
public ActionResult GetMealsInit(int? v)
{
var items = Db.Meals.Take(3).ToList();
var selected = Db.Meals.SingleOrDefault(o => o.Id == v);
if (selected != null && !items.Contains(selected))
{
items.Add(selected);
}
return Json(items.Select(o => new KeyContent(o.Id, o.Name)));
}
public ActionResult SearchMeals(string term = "")
{
var items = Db.Meals
.Where(o => o.Name.IndexOf(term, StringComparison.OrdinalIgnoreCase) >= 0)
.Take(10)
.Select(o => new KeyContent(o.Id, o.Name));
return Json(items);
}
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 fill the other 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 fill the other as well.
Shared/Demos/RmtSrcGit.cshtml
@(Html.Awe().AjaxRadioList("GitRepoOdropdown")
.Load(false)
.Odropdown(o =>
o.SearchFunc("gitRepoSearch", key: "g1")
.ItemFunc("gitItem")
.CaptionFunc("gitCaption")
.Caption("select a git repo")))
<span class="hint">try 'valueinjecter'</span>
<br/>
<br/>
@(Html.Awe().AjaxCheckboxList("GitRepoMultiselect")
.Load(false)
.Multiselect(o =>
o.SearchFunc("gitRepoSearch", key: "g1")
.ItemFunc("gitItem")
.CaptionFunc("gitCaption")
.Caption("select a git repo")))
@*gitRepoSearch, gitItem, gitCaption functions located in site.js*@
Set value from get items call
AjaxRadioListDemo/Index.cshtml
<h3>Set value from get items call</h3>
@(Html.Awe().AjaxRadioList("CategorySv")
.Odropdown(o => o.AutoSelectFirst())
.Url(Url.Action("GetCategories", "Data")))
@(Html.Awe().AjaxRadioList("MealsSv")
.Parent("CategorySv", "categories")
.Url(Url.Action("GetMealsSetValue2", "Data")))
<br />
<br />
@(Html.Awe().AjaxRadioList("OrgsSv")
.Odropdown()
.Url(Url.Action("GetOrgSetValue", "Data")))
Awesome/DataController.cs
public ActionResult GetMealsSetValue2(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 = items.Skip(1).First().Id;
}
return Json(new AweItems
{
Items = items.Select(o => new KeyContent(o.Id, o.Name)),
Value = value
});
}
public ActionResult GetOrgSetValue()
{
var items = Db.Organisations.ToList();
object value = null;
if (items.Any())
{
value = items.Skip(2).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 extensionsEvents and Api
Comments