AjaxList

Renders a list and a load more button, in the controller on each request we set a property indicating whether there's is more items to be loaded.

AjaxList bound to textbox for search




    Shared/Demos/AjaxListBoundToParent.cshtml
    @Html.Awe().TextBox("txtSearchMealsAl").CssClass("searchtxt").Placeholder("search...")
    <br />
    <br />
    @(Html.Awe().AjaxList("MealsAl")
    .Url(Url.Action("Search","MealsAjaxList"))
    .Parent("txtSearchMealsAl"))
    Awesome/AjaxList/MealsAjaxListController.cs
    public class MealsAjaxListController : Controller
    {
    public IActionResult Search(string parent, int? pivot)
    {
    const int PageSize = 5;
    var query = (parent ?? "").ToLower();

    var list = Db.Meals.Where(o => o.Name.ToLower().Contains(query));

    var items = (pivot.HasValue ? list.Where(o => o.Id >= pivot.Value) : list)
    .Take(PageSize + 1)
    .ToList();

    var isMore = items.Count > PageSize;

    var result = new AjaxListResult
    {
    Items = items.Take(PageSize).Select(o => new KeyContent(o.Id, o.Name)),
    More = isMore
    };

    if (isMore)
    {
    result.Pivot = items.Last().Id;
    }

    return Json(result);
    }
    }



    Comments