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.

Shared/Demos/AjaxListBoundToParent.cshtml

@(Html.Awe().TextBox(
    new TextBoxOpt
    {
        Name = "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
{
    private readonly MyContext mcx = new MyContext();// mock EF Db context
    
    public MealsAjaxListController()
    {
        
    }

    public async Task<IActionResult> Search(string parent, int? pivot)
    {
        const int PageSize = 5;            

        var query = mcx.Meals.AsQueryable();

        query = query.Filter(parent, o => o.Name);            
                    
        var pageItems = await (pivot.HasValue ? query.Where(o => o.Id >= pivot.Value) : query)
            .Take(PageSize + 1)
            .ToArrayAsync();

        var isMore = pageItems.Count() > PageSize;

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

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

        return Json(result);
    }
}

Comments