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