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"))

Mods

Mods are custom js functions that you can create to modify the look and behaviour of the control.

ButtonGroup

Cascading Odropdowns

Odropdown with many items, automatically gets search

Color dropdown

Image dropdown

Combobox

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
<h4>ButtonGroup</h4>
@(Html.Awe().AjaxRadioList("CategoriesButtonGroup")
.ButtonGroup()
.Url(Url.Action("GetCategories", "Data")))

<div class="epanel lrgf">
<h4>Cascading Odropdowns</h4>
@(Html.Awe().AjaxRadioList("CatOdropdown")
.Odropdown() // using custom extension that sets .Mod
.Url(Url.Action("GetCategories", "Data")))

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

<h4>Odropdown with many items, automatically gets search</h4>
@(Html.Awe().Odropdown("AllMealsOdropdown")
.Url(Url.Action("GetAllMeals", "Data")))

<h4>Color dropdown</h4>
@(Html.Awe().AjaxRadioList("ColorPicker1")
.ColorDropdown(o => o.AutoSelectFirst()))

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

<h4>Combobox</h4>
@(Html.Awe().AjaxRadioList("AllMealsCombo")
.Value("hi there")
.Combobox()
.Url(Url.Action("GetAllMeals", "Data")))

<h4>TimePicker</h4>
@Html.Awe().AjaxRadioList("TimePicker1").TimePicker(o => o.Caption("time please").Step(15))
</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")))
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
});
}

Using predefined parameters

setting paremter parent = Fruits using .Parameter extension

Events and Api