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.aspx
<% ParentCategory.AjaxRadioList() .Url(Page.Url().Action("GetCategories", "Data")); %> <awe:Ocon runat="server" ID="ParentCategory" /> <% ChildMeal.AjaxRadioList() .Url(Page.Url().Action("GetMeals", "Data")) .Parent(ParentCategory.ClientID, "categories"); %> <awe:Ocon runat="server" ID="ChildMeal" />
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.aspx
<% Categories.AjaxCheckboxList().Url(Page.Url().Action("GetCategories", "Data")); %> <awe:Ocon runat="server" ID="Categories" /> <% Category2.AjaxRadioList() .Url(Page.Url().Action("GetCategories", "Data")); %> <awe:Ocon runat="server" ID="Category2" /> <% ChildOfManyMeal.AjaxRadioList() .Url(Page.Url().Action("GetMeals", "Data")) .Parent(Categories.ClientID, "categories") .Parent(Category2.ClientID, "categories"); %> <awe:Ocon runat="server" ID="ChildOfManyMeal" />
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.aspx
<script> var meals = <%=DemoUtils.Encode(Db.Meals.Select(o => new KeyContent(o.Id, o.Name))) %>; var categories = <%=DemoUtils.Encode(Db.Categories.Select(o => new KeyContent(o.Id, o.Name))) %>; function setCategs() { return categories; } </script> <% CatClient1.AjaxRadioList().DataFunc("setCategs"); %> <awe:Ocon runat="server" ID="CatClient1" /> <%--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.aspx
<% CategoryOchk.AjaxRadioList() .Value(Db.Categories[0].Id) .Ochk() .DataFunc("utils.getItems(categories)"); %> <awe:Ocon runat="server" ID="CategoryOchk" /> <%--can also use .Url(url)--%>
ButtonGroup
AjaxRadioListDemo.aspx
<% CategoriesButtonGroup.AjaxRadioList() .ButtonGroup() .DataFunc("utils.getItems(categories)"); %> <awe:Ocon runat="server" ID="CategoriesButtonGroup" />
Odropdown
automatically gets search when there are more than 10 items (configurable e.g. .Odropdown(o => o.AutoSearch(5))
)
AjaxRadioListDemo.aspx
<% AllMealsOdropdown.AjaxRadioList() .Odropdown() .DataFunc("utils.getItems(meals)"); %> <awe:Ocon runat="server" ID="AllMealsOdropdown" />
Cascading Odropdowns
AjaxRadioListDemo.aspx
<% CatOdropdown.AjaxRadioList() .Odropdown() .Url(Page.Url().Action("GetCategories", "Data")); %> <awe:Ocon runat="server" ID="CatOdropdown" /> <% MealsOdropdown.AjaxRadioList() .Odropdown(o => o.AutoSelectFirst()) .Url(Page.Url().Action("GetMeals", "Data")) .Parent(CatOdropdown.ClientID, "categories"); %> <awe:Ocon runat="server" ID="MealsOdropdown" />
Combobox
AjaxRadioListDemo.aspx
<% AllMealsCombo.AjaxRadioList() .Value("hi there") .Combobox() .DataFunc("utils.getItems(meals)"); %> <awe:Ocon runat="server" ID="AllMealsCombo" />
Color dropdown
AjaxRadioListDemo.aspx
<% ColorPicker1.AjaxRadioList() .ColorDropdown(o => o.AutoSelectFirst()); %> <awe:Ocon runat="server" ID="ColorPicker1" />
Odropdown with custom item and caption
Custom js functions are defined for rendering the items and caption of the odropdown.
AjaxRadioListDemo.aspx
<% CustomItemOdd.AjaxRadioList() .Value(Db.Meals[1].Id) .Odropdown(o => o.ItemFunc("imgItem").CaptionFunc("imgCaption")) .Url(Page.Url().Action("GetMealsImg", "Data")); %> <awe:Ocon runat="server" ID="CustomItemOdd" /> <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); }
TimePicker
AjaxRadioListDemo.aspx
<% TimePicker1.AjaxRadioList() .TimePicker(o => o.Caption("time please").Step(15)); %> <awe:Ocon runat="server" ID="TimePicker1" />
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.
AjaxRadioListDemo.aspx
<% RemoteSearchOdropdown.AjaxRadioList() .Odropdown(o => o.SearchFunc("utils.osearch", Page.Url().Action("SearchMeals", "Data"), "m1")) .Value(197) .Url(Page.Url().Action("GetMealsInit", "Data")); %> <awe:Ocon runat="server" ID="RemoteSearchOdropdown" /> <% RemoteSearchCombobox.AjaxRadioList() .Combobox(o => o.SearchFunc("utils.osearch", Page.Url().Action("SearchMeals", "Data"), "m1")) .Value(197) .Url(Page.Url().Action("GetMealsInit", "Data")); %> <awe:Ocon runat="server" ID="RemoteSearchCombobox" /> <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); }
Set value from get items call
view controller
AjaxRadioListDemo.aspx
<h3>Set value from get items call</h3> <% CategorySv.AjaxRadioList() .Odropdown(o => o.AutoSelectFirst()) .Url(Page.Url().Action("GetCategories", "Data")); %> <awe:Ocon runat="server" ID="CategorySv" /> <% MealsSv.AjaxRadioList() .Parent(CategorySv.ClientID, "categories") .Url(Page.Url().Action("GetMealsSetValue2", "Data")); %> <awe:Ocon runat="server" ID="MealsSv" /> <br /> <br /> <% OrgsSv.AjaxRadioList() .Odropdown() .Url(Page.Url().Action("GetOrgSetValue", "Data")); %> <awe:Ocon runat="server" ID="OrgsSv" /> 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
Comments