Active Panel Control

Active panel control

Content loaded from url

Active panel getting content from an url.
ActivePanel/Index.cshtml
@(Html.Awe().ActivePanel(new ActivePanelOpt 
{
Name = "Panel1",
Url = Url.Action("Content1")
}))

@(Html.Awe().Button(new ButtonOpt{
Text = "reload using api",
OnClick = "reloadPanel1()"
}))
<script>
function reloadPanel1() {
var panel1 = $('#Panel1');
$.when(panel1.data('api').load()).done(function () {
awe.flash(panel1);
});
}
</script>
ActivePanel/Content1.cshtml
<div>
content loaded from server at @DateTime.UtcNow
</div>

Content loaded from js func

Active panel getting content from a js function instead of url.
ActivePanel/Index.cshtml
@(Html.Awe().ActivePanel(new ActivePanelOpt
{
Name = "PanelFunc",
DataFunc = "getContent2"
}))

<script>
function getContent2() {
return "content returned by js function";
}
</script>

ActivePanel bound to Parent Control, Cascade


Binding the active panel to a RadioButtonList to get a cascade effect.
Also adding a parameter to send a custom value to the controller.
ActivePanel/Index.cshtml
@(Html.Awe().RadioButtonList(new RadioButtonListOpt { 
Name = "Categories",
Url = Url.Action("GetCategories", "Data")}
))

<div style="min-height: 3em;">
@(Html.Awe().ActivePanel(new ActivePanelOpt
{
Name = "ChildPanel1",
Url = Url.Action("CategoryContent")
}
.Parameter("param1", "value1")
.Parent("Categories", "category")
))
</div>
Demos/Helpers/ActivePanelController.cs
public IActionResult CategoryContent(int[] category, string param1)
{
category = category ?? new int[] { };
var meals = Db.Meals.Where(o => category.Contains(o.Category.Id)).ToList();

ViewData["param1"] = param1;

return PartialView(meals);
}
ActivePanel/CategoryContent.cshtml
@using AweCoreDemo.Models
@model IEnumerable<Meal>

@if (!Model.Any())
{
<text>Please select a category</text>
}
else
{
<div>
Meals in the selected category: @string.Join(", ", Model.Select(o => o.Name))
</div>
}

@if (ViewData["param1"] != null)
{
<div>
param1: @ViewData["param1"]
</div>
}



Comments