Awesome ASP.net Core and MVC Controls

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.
Shared/Demos/Cascade.cshtml
<div class="efield einlf">
<div class="elabel">Parent Category:</div>
@(Html.Awe().AjaxDropdown("ParentCategory")
.Url(Url.Action("GetCategories", "Data")))
</div>
<div class="efield einlf">
<div class="elabel">Child Meal:</div>
@(Html.Awe().AjaxDropdown("ChildMeal")
.Parent("ParentCategory", "categories")
.Url(Url.Action("GetMeals", "Data")))
</div>
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
});
}

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/Index.cshtml
@(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

setting parameter parent = { Fruits, Legumes } using .Parameter and .ParameterFunc extensions
AjaxDropdownDemo/Index.cshtml
@(Html.Awe().AjaxDropdownFor(o => o.Meal1)
.Parameter("categories", cat1.Id)
.ParameterFunc("giveParams")
.Url(Url.Action("GetMeals", "Data")))
<script>
function giveParams() {
return { categories: @(cat2.Id) };
}
</script>

Events and Api






Using client side api to change the dropdown value, disable and enable it and load with additional parameters that are sent to the server.
aweload event is handled to flash the #log div whenever the dropdown loads.
The same api methods can be used for the AjaxRadioList, AjaxCheckboxList controls and their mods.
AjaxDropdownDemo/Index.cshtml
@{
var meal1 = Db.Meals[1];
var meal2 = Db.Meals[2];
}

@(Html.Awe().AjaxDropdown("ddApi")
.Url(Url.Action("ApiGetMeals", "Data")))

<br />
<br />
@Html.Awe().Button().Text("Change value to " + meal1.Name).OnClick("changeval(" + meal1.Id + ")")
@Html.Awe().Button().Text("Change value to " + meal2.Name).OnClick("changeval(" + meal2.Id + ")")

@Html.Awe().Button().Text("Load only first category").OnClick("loadFirstCat()")
@Html.Awe().Button().Text("Reload").OnClick("reload()")
@Html.Awe().Button().Text("Toggle Enable").OnClick("toggleEnable()")

<br />
<br />

<div id="log">
</div>

<script>
var dd = $('#ddApi');

function changeval(newVal) {
dd.val(newVal).change();
}

function reload() {
dd.data('api').load();
}

function loadFirstCat() {
dd.data('api').load({ oparams: { cat1: true }});
// oparams sets cat1 just for this call
// params sets persistent parameters
}

function toggleEnable() {
var o = dd.data('o');
o.api.enable(!o.enb);
}

$(function() {
dd.on('aweload', function(e, data) {
awe.flash($('#log').html('loaded ' + data.length + ' items'));
});
});
</script>
Awesome/DataController.cs
public ActionResult ApiGetMeals(int? v, bool? cat1)
{
var items = Db.Meals;

if (cat1.HasValue && cat1.Value)
{
items = items.Where(o => o.Category == Db.Categories[0]).ToList();
}

return Json(items.Select(o => new KeyContent(o.Id, o.Name)));
}



Comments