aweui.js ui components library

You can use the awesome controls without the use of server side html helpers by using the aweui.js library.

Grid remote data


In this demo on the server side we query, order the data and select the items for the current page, while on the client we build the grid model. The count (total items count) is sent from the server so the grid would know how many pages there are in total.
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.
Awesome/DataController.cs
public IActionResult LunchesUi(GridParams g, string search)
{
    search = (search ?? "");

    var query = mcx.Lunches
        .Include(o => o.Food)
        .Include(o => o.Chef)
        .Include(o => o.Country)
        .Where(o => o.Food.Name.Contains(search) ||
                    o.Person.Contains(search) ||
                    o.Chef.FirstName.Contains(search) ||
                    o.Chef.LastName.Contains(search) ||
                    o.Location.Contains(search) ||
                    o.Country.Name.Contains(search))
        .AsQueryable();

    var dict = new Dictionary<string, string>
    {
        {"CountryName", "Country.Name"},
        {"FoodName", "Food.Name"},
        {"ChefName", "Chef.FirstName,Chef.LastName"}
    };

    // map back the column.bind values, or gmb will throw (Lunch has no CountryName prop)
    unmap(g, dict);

    var gmb = new GridModelBuilder<Lunch>(g)
    {
        KeyProp = o => o.Id
    };

    Func<Lunch, object> map = o => new
    {
        o.Id,
        o.Person,
        FoodName = o.Food.Name,
        FoodPic = o.Food.Pic,
        o.Location,
        o.Price,
        Date = o.Date.ToShortDateString(),
        CountryName = o.Country.Name,
        ChefName = o.Chef.FullName
    };

    query = gmb.OrderBy(query);

    var count = query.Count();
    var items = gmb.GetPage(query).Select(map); // mapping to send only the needed data

    return Json(new { count, items });
}

Grid filter row with server side filtering

Grid with filter row and server side filtering.
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

Grid with filter row

  you can search multiple columns at the same time (try 'pizza tavern')


Using a filter row with a dropdown for each column, each dropdown contains the collection of distinct column values.
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

Grid with filter row multiple editors


We can add more than one editor in one filter cell, and in this demo we added additional operator dropdowns and clear all values in cell buttons. Custom css is used to make the Op dropdowns (operator equals/less than etc.) take less space in the cell. o-op class on the dropdowns tells filter row to ignore its value for adding o-hv class to the cell, so if you only select a value in an op dropdown (less than/equals etc.), but not in another editor in the cell (without o-op) you won't get the little box-shadow under the cell.
o-clrAll class tells the filter row that clicking on the button with this class should clear all input values in this cell.
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.
Awesome/DataController.cs
public IActionResult GetLunches()
{
    return Json(mcx.Lunches.Take(200).Select(o => new
    {
        o.Id,
        o.Person,
        FoodName = o.Food.Name,
        FoodPic = o.Food.Pic,
        o.Location,
        o.Price,
        CountryName = o.Country.Name,
        ChefName = o.Chef.FullName,
        o.Date,
        o.Date.Year,
        DateStr = o.Date.ToShortDateString(),
        Meals = o.Meals.Select(m => new { m.Id, m.Name }),
        MealsStr = string.Join(", ", o.Meals.Select(m => m.Name))
    }));
}

DropdownList



DropdownList with fav buttons



Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

RadioList, CheckboxList, Multiselect

Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.
Awesome/DataController.cs
public IActionResult GetCategories()
{
    return Json(mcx.Categories.Select(o => new KeyContent(o.Id, o.Name)));
}

Checkbox

Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

Numeric Textbox

Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

DatePicker

Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

DateTimePicker

Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

Lookups



Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.

Popups

Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.
Aweui/Index.cshtml
Could not find a part of the path '/app/Views/Aweui/Index.cshtml'.



Comments