Lookup control demo

 

Lookup needs a controller or urls to be specified, by default convention the lookup will look for a controller with the same name as it + "LookupController"

  • action GetItem - used to show the value in the readonly field, it will receive a v parameter which is going to be the key of the selected item
  • action Search - gets data for the search result in it's popup, it should return a Json(AjaxListResult), so it has same features as the AjaxList (table layout, custom item template)
LookupDemo/Index.cshtml
@(Html.Awe().LookupFor(o => o.Meal)
    .Controller<MealLookupController>()
    .ClearButton()
    .HighlightChange())
Awesome/Lookup/MealLookupController.cs
using AweCoreDemo.Data;
using AweCoreDemo.Models;
using AweCoreDemo.Utils;
using AweCoreDemo.Utils.Awesome;
using Microsoft.AspNetCore.Mvc;
using Omu.AwesomeMvc;

namespace AweCoreDemo.Controllers.Awesome.Lookup
{
    public class MealLookupController : Controller
    {
        public IActionResult GetItem(int? v)
        {
            Check.NotNull(v, "v");
            var o = Db.Find<Meal>(v) ?? new Meal();

            return Json(new KeyContent(o.Id, o.Name));
        }

        public IActionResult Search(int page, string search = "")
        {
            var query = Db.Meals
                .AsQueryable()
                .Filter(search, o => o.Name);

            var res = AweUtil.BuildList(query, page, keyContentFunc: o => new KeyContent(o.Id, o.Name));

            return Json(res);
        }
    }
}

Lookup with custom search

 
Custom search is achieved by setting .CustomSearch(true) and adding a SearchForm action in the Lookup controller which will render the custom SearchForm view
LookupDemo/Index.cshtml
@Html.Awe().Lookup("MealCustomSearch").CustomSearch()
Awesome/Lookup/MealCustomSearchLookupController.cs
public class MealCustomSearchLookupController : Controller
{
    public IActionResult SearchForm()
    {
        return PartialView();
    }

    public IActionResult GetItem(int? v)
    {
        Check.NotNull(v, "v");
        var o = Db.Find<Meal>(v) ?? new Meal();

        return Json(new KeyContent(o.Id, o.Name));
    }

    public IActionResult Search(int[] categories, int page, string search = "")
    {
        categories = categories ?? new int[] { };

        var query = Db.Meals.AsQueryable().Filter(search, f => f.Name);
        if (categories.Any())
        {
            query = query.Where(f => categories.Contains(f.Category.Id));
        }

        var res = AweUtil.BuildList(query, page, keyContentFunc: o => new KeyContent(o.Id, o.Name));

        return Json(res);
    }
}
MealCustomSearchLookup/SearchForm.cshtml
@using AweCoreDemo.Models
@{ Layout = null; }
<div class="srcfitem">
    @Html.Awe().TextBox("Search").CssClass("awe-searchtxt").Placeholder("search")
</div>
<div class="srcfitem">
    @(Html.Awe().DropdownList(new DropdownListOpt 
    { 
        Name = "Categories", 
        Url = Url.Action("GetCategories", "Data"), 
        Value = Db.Categories.First().Id, 
        Prefix = "MealLookup" 
    }))
</div>

Lookup Grid

 
 

Lookup with grid inside the popup, done using the lookupgrid mod that also uses PopupUrl extension.

Lookup with Custom Items template

 

The Search action of the LookupController returns json of AjaxListResult, we need to set the string AjaxListResult.Content instead of Items in order to achieve Custom Item Template, exactly the same as for the AjaxList helper.

Lookup bound to parents

Parent Categories:
  •  
Parent Category:
Child Meal:
 

Binding to parents and setting predefined parameters is done the same as for the AjaxDropdown using .Parent() and .Parameter(), values are passed to both GetItem and Search actions.
Unlike other controls the Lookup won't change its value when the value of the parent is changed.

Predefinded parameters

Meal1 (categories = {Fruits, Legumes}):
 

Besides getting value from parent controls we can also set parameters with predefined values.
A js function can also be set to set parameters for the lookup on each load.

LookupDemo/Index.cshtml
@{
    var cat0 = Db.Categories[0];
    var cat1 = Db.Categories[1];
}
<div class="efield">
    <div class="elabel">
        Meal1 (categories = {@cat0.Name, @cat1.Name}):
    </div>
    <div class="einput">
        @(Html.Awe().Lookup(new LookupOpt { 
            Name = "Meal2",
            Dropdown = false,
            Modal = true,
            Width = 500,
            ParameterFunc = "giveParams",
            Controller = "MealCustomSearchLookup"
        }
        .Parameter("categories", new[] { cat0.Id })
        ))
    </div>
</div>
<script>
    function giveParams() {
        return { categories: @(cat1.Id) };
    }
</script>



Comments