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

ButtonGroup

Cascading Odropdowns

Odropdown with many items, automatically gets search

Combobox

Color dropdown

Image dropdown

TimePicker



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")) )
AjaxRadioListDemo/Index.cshtml
<div class="example">
<h3>ButtonGroup</h3>
@(Html.Awe().AjaxRadioList("CategoriesButtonGroup")
.ButtonGroup()
.DataFunc("utils.getItems(categories)"))
</div>

<div class="example">
<h3>Cascading Odropdowns</h3>
@(Html.Awe().AjaxRadioList("CatOdropdown")
.Odropdown()
.DataFunc("utils.getItems(categories)"))

@(Html.Awe().AjaxRadioList("MealsOdropdown")
.Odropdown()
.Url(Url.Action("GetMeals", "Data"))
.Parent("CatOdropdown", "categories"))
</div>

<div class="example">
<h3>Odropdown with many items, automatically gets search</h3>
@(Html.Awe().Odropdown("AllMealsOdropdown")
.DataFunc("utils.getItems(meals)"))
</div>

<div class="example">
<h3>Combobox</h3>
@(Html.Awe().AjaxRadioList("AllMealsCombo")
.Value("hi there")
.Combobox()
.DataFunc("utils.getItems(meals)"))
</div>

<div class="example">
<h3>Color dropdown</h3>
@(Html.Awe().AjaxRadioList("ColorPicker1")
.ColorDropdown(o => o.AutoSelectFirst()))
</div>

<div class="example">
<h3>Image dropdown</h3>
@(Html.Awe().AjaxRadioList("ImgDropdown")
.Url(Url.Action("GetFruits", "Data"))
.ImgDropdown(o => o.AutoSelectFirst()))
</div>

<div class="example">
<h3>TimePicker</h3>
@(Html.Awe().AjaxRadioList("TimePicker1")
.TimePicker(o => o.Caption("time please").Step(15)))

<br/>
<br/>
<div class="tabs">
<div data-caption="description" class="expl">
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")) )
</div>
<div data-caption="view">@Html.Source("AjaxRadioListDemo/Index.cshtml", 2)</div>
</div>
</div>

Odropdown with remote search

try 'o'

try 'valueinjecter'



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.
AjaxRadioListDemo/Index.cshtml
<div class="epanel lrgf">
@(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>

<br />
<br />

@(Html.Awe().AjaxRadioList("GitRepoOdropdown")
.Odropdown(o => o.SearchFunc("gitRepoSearch", key: "g").Caption("select a git repo").ItemFunc("gitItem").CaptionFunc("gitCaption"))
.Load(false)) <span class="hint">try 'valueinjecter'</span>
<br />
<br />
</div>
@(Html.Awe().AjaxCheckboxList("GitRepoMultiselect")
.Multiselect(o => o.SearchFunc("gitRepoSearch", key: "g").Caption("select a git repo").ItemFunc("gitItem").CaptionFunc("gitCaption"))
.Load(false))

@*gitRepoSearch, gitItem, gitCaption functions in Site.js*@
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);
}

Bootstrap dropdown mod

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 extensions

Events and Api