Awesome ASP.net Core and MVC Controls

Multiple level cascading demo

Demonstrating how awesome controls cascade using binding to parent.
One control can be bound to multiple parents and parent controls can also be bound to other parent controls and so on.

Cascading ajax dropdowns

available items = [3, 7, 10] + parent value (or sum in case multiple parents)



Cascading Ajax RadioList and CheckboxList



Multiple dropdowns in a long cascade chain

Available items = parent value + [ "The", "brown", "cow", "is eating", "green", "grass"]
Try to get in the last dropdown "The brown cow is eating green grass" as the selected value.



MultipleLevelCascadingDemo/Index.cshtml
<h1>Multiple level cascading demo</h1>
<p class="expl">
Demonstrating how awesome controls cascade using binding to parent. <br />
One control can be bound to multiple parents and parent controls can also be bound to other parent controls and so on.
</p>

<h2>Cascading ajax dropdowns</h2>
available items = [3, 7, 10] + parent value (or sum in case multiple parents)
<br />
<br />

@Html.Awe().AjaxDropdown("a").Url(Url.Action("GetNumbers", "Data")).Value(3)
@Html.Awe().AjaxDropdown("b").Url(Url.Action("GetNumbers", "Data")).Parent("a").Value(10)
@Html.Awe().AjaxDropdown("c").Url(Url.Action("GetNumbers", "Data")).Parent("b").Value(17)

<br />
<br />
<h2>Cascading Ajax RadioList and CheckboxList </h2>
@Html.Awe().AjaxRadioList("a1").Url(Url.Action("GetNumbers", "Data"))
@Html.Awe().AjaxCheckboxList("b1").Url(Url.Action("GetNumbers", "Data")).Parent("a1")
@Html.Awe().AjaxRadioList("c1").Url(Url.Action("GetNumbers", "Data")).Parent("b1")
@Html.Awe().AjaxRadioList("d1").Url(Url.Action("GetNumbers", "Data")).Parent("b1").Parent("c1").Parent("a1")

<br />
<br />

<h2>Multiple dropdowns in a long cascade chain</h2>
<p class="expl">
Available items = parent value + [ "The", "brown", "cow", "is eating", "green", "grass"] <br />
Try to get in the last dropdown "The brown cow is eating green grass" as the selected value.
</p>
@Html.Awe().AjaxDropdown("a3").Url(Url.Action("GetWords", "Data"))
@Html.Awe().AjaxDropdown("b3").Url(Url.Action("GetWords", "Data")).Parent("a3")
@Html.Awe().AjaxDropdown("c3").Url(Url.Action("GetWords", "Data")).Parent("b3")
@Html.Awe().AjaxDropdown("d3").Url(Url.Action("GetWords", "Data")).Parent("c3")
@Html.Awe().AjaxDropdown("e3").Url(Url.Action("GetWords", "Data")).Parent("d3")
@Html.Awe().AjaxDropdown("f3").Url(Url.Action("GetWords", "Data")).Parent("e3")
Awesome/DataController.cs
public ActionResult GetNumbers(int[] parent)
{
parent = parent ?? new int[] { };

var items = new[] { 3, 7, 10 };

return Json(items.Select(o => o + parent.Sum()).Select(o => new KeyContent(o, o.ToString(CultureInfo.InvariantCulture))));
}

public ActionResult GetWords(string parent)
{
var items = new[] { "The", "brown", "cow", "is eating", "green", "grass" };

return Json(items.Select(o => parent + " " + o).Select(o => new KeyContent(o, o)));
}



Comments

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.