DropdownList

Basic usage

DropdownList with search functionality in the dropdown popup. Can get data from an Url which must return a collection of KeyContent.

Cascade

DropdownList/Index.cshtml


@(Html.Awe().DropdownList(new DropdownListOpt { Name = "CatDd", Url = Url.Action("GetCategories", "Data") }))

@(Html.Awe().DropdownList(new DropdownListOpt 
{ 
    Name = "MealsDd", 
    AutoSelectFirst = true,
    Url = Url.Action("GetMeals", "Data")
}.Parent("CatDd", "categories")))

Awesome/DataController.cs

public IActionResult GetMeals(int[] categories)
{
    categories = categories ?? new int[] { };
    var items = mcx.Meals.Where(o => categories.Contains(o.Category.Id))
        .Select(o => new KeyContent(o.Id, o.Name));

    return Json(items);
}

DropdownList with grouped items

DropdownList/Index.cshtml


@(Html.Awe().DropdownList(new DropdownListOpt { Name = "MealsGrouped", Url = Url.Action("GetAllMealsGrouped", "Data") }))

Awesome/DataController.cs

public IActionResult GetAllMealsGrouped()
{
    var res = new List<Oitem>();
    var meals = mcx.Meals.Include(m => m.Category)
        .OrderBy(o => o.Id)
        .ToArray();

    var groups = meals.GroupBy(o => o.Category);

    foreach (var g in groups)
    {
        res.Add(new Oitem
        {
            Content = g.Key.Name,
            Class = "o-itm o-itmg",
            NonVal = true,
            Items = g.Select(meal => new Oitem(meal.Id, meal.Name)),
        });
    }

    return Json(res);
}

DropdownList with submenu

DropdownList/Index.cshtml

@(Html.Awe().DropdownList(new DropdownListOpt 
{ 
    Name = "MealsSbm", 
    Url = Url.Action("GetMealsTreeImg", "Data"),
    Submenu = true 
}.ImgItem()))

Awesome/DataController.cs

public IActionResult GetMealsTreeImg()
{
    var url = Url.Content(DemoUtils.MealsUrl);

    var res = new List<MealOitem>();
    var meals = mcx.Meals.Include(m => m.Category).ToArray();
    var groups = meals.GroupBy(o => o.Category);
    foreach (var g in groups)
    {
        res.Add(new MealOitem
        {
            Content = g.Key.Name,
            Class = "o-itm",
            NonVal = true,
            Items = g.Select(meal => new MealOitem { Key = meal.Id, Content = meal.Name, url = url + meal.Name + ".jpg" })
        });
    }

    return Json(res);
}

DropdownList with fav buttons

DropdownList/Index.cshtml

@(Html.Awe().DropdownList(new DropdownListOpt 
{
    Name = "AllMealsFav",
    Url = Url.Action("GetMealsImg", "Data"),
    CssClass = "bigFavs" 
}
.ImgItem()
.Favs()))
<br />
<br />
@(Html.Awe().DropdownList(new DropdownListOpt
{
    Name = "AllMealsFav2", 
    Url = Url.Action("GetMealsImg", "Data"), 
    CssClass = "bigFavs" }
.ImgItem()
.Favs(3, new object[] { DemoCache.Meals[3].Id, DemoCache.Meals[15].Id }, new object[] { DemoCache.Meals[5].Id })))

DropdownList, tree data, lazy nodes, remote search

DropdownList/Index.cshtml

@(Html.Awe().DropdownList(new DropdownListOpt
{
    Name = "RmtLazyTree",
    Url = Url.Action("GetTreeNodesLazy", "Data"), 
    ClearBtn = true,
    CollapseNodes = true,
    PopupMinWidth = 350,
}
.RemoteSearch(Url.Action("SearchTree", "Data"))))

Awesome/DataController.cs

public IActionResult GetTreeNodesLazy(int? key)
{
    // key has value, lazy request
    var nodes = key.HasValue ?
        buildItemTrees(mcx.TreeNodes.Where(o => o.Id == key)).Take(10) :

        // initial load, return roots (parent is null)
        buildItemTrees(mcx.TreeNodes.Where(o => o.Parent == null).Take(10), setLazyChild: true);

    return Json(nodes);
}

/// <summary>
/// builds oitem tree collection from treeNodes collection 
/// </summary>
private IEnumerable<Oitem> buildItemTrees(IEnumerable<TreeNode> nodes, int lvl = 0, bool setLazyChild = false)
{
    var list = new List<Oitem>();
    foreach (var node in nodes)
    {
        var oitem = new Oitem { Key = node.Id.ToString(), Content = node.Name };
        list.Add(oitem);
        var children = mcx.TreeNodes.Where(o => o.Parent == node);

        if (!children.Any()) continue;

        // set node as lazy after lvl 0
        if (setLazyChild && lvl > 0)
        {
            oitem.Lazy = true;
        }
        else
        {
            oitem.Items = buildItemTrees(children, lvl + 1, setLazyChild);
        }
    }

    return list;
}

public async Task<IActionResult> SearchTree(string term)
{
    term = (term ?? string.Empty);
    var result = await mcx.TreeNodes.Where(o => o.Name.Contains(term)).Take(1).ToListAsync();
    var roots = new List<TreeNode>();

    foreach (var treeNode in result)
    {
        roots.Add(getRoot(treeNode));
    }

    roots = roots.Distinct().ToList();

    var nodes = buildItemTrees(roots);
    return Json(nodes);
}

private TreeNode getRoot(TreeNode node)
{
    return node.Parent == null ? node : getRoot(node.Parent);
}

DropdownList with remote search

Only a few items + the selected one are loaded initially using the url specified in .Url, but when the user types something in the searchbox more items are loaded by executing the specified .SearchFunc; the new loaded items will be stored/cached until a load will occur, e.g. when a parent changes it's value the component will load.

DropdownList/Index.cshtml

 @(Html.Awe().DropdownList(new DropdownListOpt
 { 
     Name = "RemoteSearchDd", 
     Url = Url.Action("GetMealsInit", "Data"),
     ClearBtn = true,
     Value = DemoCache.Meals.First().Id
 }
.RemoteSearch(Url.Action("SearchMeals", "Data"))))

Awesome/DataController.cs

public IActionResult GetMealsInit(int? v)
{
    var items = mcx.Meals.Take(3).ToList();
    var selected = mcx.Meals.SingleOrDefault(o => o.Id == v);

    if (selected != null && !items.Contains(selected))
    {
        items.Add(selected);
    }

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

public async Task<IActionResult> SearchMeals(string term)
{
    var items = (await mcx.Meals
        .Filter(term, o => o.Name)                
        .Take(10)
        .ToArrayAsync())
        .Select(o => new KeyContent(o.Id, o.Name));

    return Json(items);
}

DropdownList with custom item and caption rendering

Custom js functions are defined for rendering the items and caption of the DropdownList.

DropdownList/Index.cshtml

@(Html.Awe().DropdownList(new DropdownListOpt 
{ 
    Name = "CustomItemOdd",
    Value = DemoCache.Meals[1].Id, 
    Url = Url.Action("GetMealsImg", "Data"),
    ItemFunc = "imgItem",
    CaptionFunc = "imgCaption"
}))
<script>
    function imgItem(o) {
        return '<div class="o-igit"><img src="' + o.url + '" />' + o.c + '</div>';
    }

    function imgCaption(o) {
        return '<img class="cthumb" src="' + o.url + '" />' + o.c;
    }
</script>

Awesome/DataController.cs

public IActionResult GetMealsImg()
{
    var url = Url.Content(DemoUtils.MealsUrl);            
    var items = mcx.Meals.Include(m => m.Category).OrderBy(m => m.Id).ToArray()
        .Select(o => new MealDisplay(o.Id, o.Name, url + o.Name + ".jpg", o.Category.Id));

    return Json(items);
}

Remote search, external api

Getting data from the git api on search using the SearchFunc. ItemFunc and CaptionFunc are used to specify custom rendering functions for the items and the caption.
Using the same cache key "g1", so searching in one control will populate the other one with data as well.

Shared/Demos/RmtSrcGit.cshtml

@(Html.Awe().DropdownList(new DropdownListOpt
{
    Name = "GitRepoOdropdown",
    Load = false,
    ItemFunc = "site.gitItem",
    CaptionFunc = "site.gitCaption",
    Caption = "select a git repo",
    SearchFunc = new SearchFuncOpt { Name = "site.gitRepoSearch", Key = "g1" }
}   
))
<br />
<br />
@(Html.Awe().Multiselect(new MultiselectOpt
{
    Name = "GitRepoMultiselect",
    Load = false,
    ItemFunc = "site.gitItem",
    CaptionFunc = "site.gitCaption",
    Caption = "select a git repo",
    SearchFunc = new SearchFuncOpt { Name = "site.gitRepoSearch", Key = "g1" }
}
))

Events and Api

Showing commonly used client side api methods.
To change the value you simply call jquery .val(newvalue).change().
aweload event is handled to flash the #log div whenever the dropdown loads.
The same api methods can be used for the AjaxDropdown, AjaxCheckboxList controls and their mods.

AjaxRadioListDemo/Index.cshtml

@model AweCoreDemo.ViewModels.Input.AjaxDropdownDemoInput
@using AweCoreDemo.Models
@{
    ViewData["Title"] = "AjaxRadioList";
    var mealsDir = Url.Content(DemoUtils.MealsUrl);
}
<script>
    var categories = @Html.Raw(DemoUtils.Encode(DemoCache.Categories.Select(o => new KeyContent(o.Id, o.Name))));
    var meals = @Html.Raw(DemoUtils.Encode(DemoCache.Meals.Select(o => new { k = o.Id, c = o.Name, cid = o.CategoryId, url = mealsDir + o.Name + ".jpg" })));

    function getMealsChild(params) {
        var pobj = utils.getParams(params);
        var result = [];

        awef.loop(meals, function(item) {
            if(item.cid == pobj.categories)
                result.push(item);
        });

        return result;
    }
</script>

<div class="example med">
    <h2 data-name="cascade">Cascading Radio button list using binding to Parent</h2>
    <div style="min-height: 125px">
        @*begin*@
        @(Html.Awe().AjaxRadioListFor(o => o.ParentCategory)
                 .Url(Url.Action("GetCategories", "Data")))
        @(Html.Awe().AjaxRadioListFor(o => o.ChildMeal)
                    .Url(Url.Action("GetMeals", "Data"))
        .Parent(o => o.ParentCategory, "categories"))
        @*end*@
    </div>
    <br />
    <br />
    @(Html.Awe().Tabs().Add("description",
        @<text>            AjaxRadioList needs an url, js func or controller to get data from, it will render a list of radiobuttons<br />
            As with most awesome controls, you can bind the AjaxRadioList to one or more parents,
            and when the parent changes value the child will load and get the parent values as parameters in its data function</text> ,"expl")
        .Add("view", Html.Source("AjaxRadioListDemo/Index.cshtml"))
        .Add("controller", Html.Csource("Awesome/DataController.cs")))
</div>

<div class="example">
    <h2>Client data</h2>
    <div style="min-height: 110px">
        @*begincd*@
        <script>
            function getClientData() {
                return [{ k: 1, c: 'Fruits' }, { k: 2, c: 'Vegetables' }, { k: 3, c: 'Nuts' }];
            }
        </script>
        @(Html.Awe().AjaxRadioList("CatClient1")
        .DataFunc("getClientData")
        .Value(2))
        @*endcd*@
    </div>    
    @(Html.Awe().Tabs().Add("description",
        @<text>Besides remote data using <code>.Url(str)</code>, it can also get data from the client using <code>.DataFunc(jsFunc)</code>, the jsFunc can return the items or a Promise</text> ,"expl")
        .Add("view", Html.Source("AjaxRadioListDemo/Index.cshtml", "cd")))
</div>

<div class="example">
    <h2>Color dropdown</h2>
    @*begincld*@
    @(Html.Awe().AjaxRadioList("ColorPicker1")
          .ColorDropdown(o => o.AutoSelectFirst()))
    @*endcld*@
    @Html.Source("AjaxRadioListDemo/Index.cshtml", "cld")
</div>

<div class="example">
    <h2>TimePicker</h2>
    @*begintm*@
    @(Html.Awe().AjaxRadioList("TimePicker1")
        .TimePicker(o => o.Caption("time please").Step(15).ClearBtn()))
    @*endtm*@
    @Html.Source("AjaxRadioListDemo/Index.cshtml", "tm")
</div>

<div class="example">
    @*beginsv*@
    <h2>Set value from get items call</h2>
    @(Html.Awe().DropdownList(new DropdownListOpt
        {
            Name = "CategorySv",
            AutoSelectFirst = true,
            Url = Url.Action("GetCategories", "Data")
        }))

    @(Html.Awe().AjaxRadioList("MealsSv")        
        .Parent("CategorySv", "categories")
        .Url(Url.Action("GetMealsSetValue2", "Data")))

    <div class="expl">
        Note how in the second editor the second item is selected on load.
    </div>
    @*endsv*@

    @(Html.Awe().Tabs()
        .CssClass("code")
        .Add("view", Html.Source("Odropdown/Index.cshtml", "sv"))
        .Add("controller", Html.Csource("Awesome/DataController.cs", "sv")))
</div>

<div class="example">
    <h2>Using predefined parameters</h2>
    @{
        var cat1 = DemoCache.Categories[0];
        var cat2 = DemoCache.Categories[1];
    }
    setting parameter parent = { @cat1.Name, @cat2.Name } using .Parameter and .ParameterFunc extensions<br />
    @(Html.Awe().AjaxRadioListFor(o => o.Meal1)          
          .Parameter("categories", cat1.Id)
          .ParameterFunc("giveParams")
          .Url(Url.Action("GetMeals", "Data")))
    <script>
        function giveParams() {
            return { categories: @(cat2.Id) };
        }
    </script>
</div>

Awesome/DataController.cs

public IActionResult ApiGetMeals(int? v, bool? cat1)
{
    var items = (cat1 == true) ?
        mcx.Meals.Where(o => o.Category == mcx.Categories.First()).ToArray() :
        mcx.Meals.ToArray();

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

Comments