AjaxDropdown
AjaxDropdown needs an url, js func or controller to get data from, by default convention it
will look for a controller with the same name as it + "AjaxDropdown"
Cascade using binding to parent
Parent Category:
Child Meal:
Binding controls using Parent
extension,
one control can be bound to multiple others, works for all editor helpers.
AjaxDropdownDemo.aspx
<div class="elabel">Parent Category:</div> <% ParentCategory.AjaxDropdown() .Url(Page.Url().Action("GetCategories", "Data")); %> <awe:Ocon runat="server" ID="ParentCategory" /> <div class="elabel">Child Meal:</div> <% ChildMeal.AjaxDropdown() .Parent(ParentCategory.ClientID, "categories") .Url(Page.Url().Action("GetMeals", "Data")); %> <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
+
+
=
=
AjaxDropdownDemo.aspx
<% Category1.AjaxRadioList().Url(Page.Url().Action("GetCategories", "Data")); %> <awe:Ocon runat="server" ID="Category1" /> + <% Categories.AjaxCheckboxList().Url(Page.Url().Action("GetCategories", "Data")); %> <awe:Ocon runat="server" ID="Categories" />+ <% TxtMealName.TextBox().Placeholder("where name contains").CssClass("searchtxt"); %> <awe:Ocon runat="server" ID="TxtMealName" /> = <% ChildOfManyMeal.AjaxDropdown() .Controller<MealBoundToManyController>() .Parent(Category1.ClientID) .Parent(Categories.ClientID) .Parent(TxtMealName.ClientID, "mealName"); %> <awe:Ocon runat="server" ID="ChildOfManyMeal" /> = <% ChildOfManyMealRadioList.AjaxRadioList() .Controller<MealBoundToManyController>() .Parent(Category1.ClientID) .Parent(Categories.ClientID) .Parent(TxtMealName.ClientID, "mealName"); %> <awe:Ocon runat="server" ID="ChildOfManyMealRadioList" />
parent Category1 and "Categories" are being merged together and received by the controller as int[] parent
Awesome/AjaxDropdown/MealBoundToManyController.cs
public class MealBoundToManyController : Controller { public ActionResult GetItems(int[] parent, string mealName) { mealName = mealName ?? string.Empty; parent = parent ?? new int[] { }; var meals = Db.Meals.Where(o => (parent.Contains(o.Category.Id)) && o.Name.ToLower().Contains(mealName.ToLower())); return Json(meals.Select(o => new KeyContent(o.Id, o.Name))); } }
Set value from get items call
AjaxDropdownDemo.aspx
<% CategorySv.AjaxDropdown() .Url(Page.Url().Action("GetCategories", "Data")); %> <awe:Ocon runat="server" ID="CategorySv" /> <% MealsSv.AjaxDropdown() .Parent(CategorySv.ClientID, "categories") .Url(Page.Url().Action("GetMealsSetValue2", "Data")); %> <awe:Ocon runat="server" ID="MealsSv" />
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 enum for dropdown items
AjaxDropdownDemo.aspx
<% EnumAdd.AjaxDropdown().Url(Page.Url().Action("GetWeatherEnumItems", "Data")); %> <awe:Ocon runat="server" ID="EnumAdd" />
Awesome/DataController.cs
public ActionResult GetWeatherEnumItems() { var type = typeof(WeatherType); var items = Enum.GetValues(type).Cast<int>().Select(o => new KeyContent(o, SplitByCapLetter(Enum.GetName(type, o)))).ToList(); // remove if not needed or if used with odropdown/ajaxradiolist items.Insert(0, new KeyContent(string.Empty, "please select")); return Json(items); } /// <summary> /// from HiThere to Hi There /// </summary> private string SplitByCapLetter(string s) { var r = new Regex(@" (?<=[A-Z])(?=[A-Z][a-z]) | (?<=[^A-Z])(?=[A-Z]) | (?<=[A-Za-z])(?=[^A-Za-z])", RegexOptions.IgnorePatternWhitespace); return r.Replace(s, " "); }
Using predefined parameters
setting parameter parent = { Fruits, Legumes } using .Parameter and .ParameterFunc extensions
AjaxDropdownDemo.aspx
<% Meal1.AjaxDropdown() .Parameter("categories", cat1.Id) .ParameterFunc("giveParams") .Url(Page.Url().Action("GetMeals", "Data")); %> <awe:Ocon runat="server" ID="Meal1" /> <script> function giveParams() { return { categories: <%=cat2.Id %> }; } </script>
Events and Api
call $('#id').data('api').load() to trigger load;
Execute
Comments