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

Cascading dropdownlist using binding to parent

Parent Category:
Child Meal:
AjaxDropdownDemo/Index.cshtml
Parent Category:
@(Html.Awe().AjaxDropdownFor(o => o.ParentCategory)
.Url(Url.Action("GetCategories","Data")))

Child Meal:
@(Html.Awe().AjaxDropdownFor(o => o.ChildMeal)
.Parent(o => o.ParentCategory, "categories")
.Url(Url.Action("GetMeals","Data")))
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/Index.cshtml
@Html.Awe().AjaxRadioListFor(o => o.Category1).Url(Url.Action("GetCategories", "Data"))
+
@Html.Awe().AjaxCheckboxList("Categories").Url(Url.Action("GetCategories", "Data"))+
@Html.Awe().TextBox("txtMealName").Placeholder("where name contains").CssClass("searchtxt")
=
@(Html.Awe().AjaxDropdownFor(o => o.ChildOfManyMeal)
.Controller<MealBoundToManyController>()
.Parent(o => o.Category1)
.Parent("Categories")
.Parent("txtMealName","mealName"))
=
@(Html.Awe().AjaxRadioList("ChildOfManyMealRadioList")
.Controller<MealBoundToManyController>()
.Parent(o => o.Category1)
.Parent("Categories")
.Parent("txtMealName","mealName"))
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/Index.cshtml
@(Html.Awe().AjaxDropdown("CategorySv")
.Url(Url.Action("GetCategories", "Data")))

@(Html.Awe().AjaxDropdown("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 enum for dropdown items

AjaxDropdownDemo/Index.cshtml
<h2>Using enum for dropdown items</h2>
@(Html.Awe().AjaxDropdown("EnumAdd").Url(Url.Action("GetWeatherEnumItems", "Data")))
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

using .Parameter(name, value) additional parameters are sent to the controller
AjaxDropdownDemo/Index.cshtml
@{
var category1 = Db.Categories[0];
}

@(Html.Awe().AjaxDropdownFor(o => o.Meal1)
.Url(Url.Action("GetMeals","Data"))
.Parameter("categories", category1.Id))

Events and Api

call $('#id').data('api').load() to trigger load;