AjaxList

It can be declared using the AjaxList or AjaxListFor helper like this:

@Html.Awe().AjaxListFor(o => o.Meals) 
@Html.Awe().AjaxList("Dinners") 

It requires a controller to get it's data from, this controller must have an action Search, example:

public class MealsAjaxListController : Controller
{
    public ActionResult Search(int page, string parent)
    {
        const int PageSize = 5;
        parent = (parent ?? "").ToLower();

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

        return Json(new AjaxListResult
                        {
                            Items = list.Skip((page - 1) * PageSize).Take(PageSize).Select(o => new KeyContent(o.Id, o.Name)),
                            More = list.Count() > page * PageSize // bool - show More button or not
                        });
    }
}

Pagination

If the AjaxListResult has the More property set to true, a "More" button will be rendered, and when the user will click it the search action will be called with an incremented page parameter Custom Item Layout To do this in the AjaxListResult instead of setting the Items property, the Content property should be set with prerendered html of the items, example:

return Json(new AjaxListResult
                    {
                        Content = this.RenderView("ListItems/Dinner", list.Page(page, 10)),
                        More = list.Count() > page*10
                    });

RenderView is a controller extension from Awesome that renders a view with an optional model and returns the result as a string. The view that gets rendered must consist from li (or tr if using TableLayout) tags with class="awe-li" and data-val=key atrtibutes, so it should be something like this:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<AwesomeMvcDemo.Models.Meal>>" %>
<%foreach (var o in Model)
  {%>
<li class="awe-li" data-val="<%:o.Id %>">    
        <%:o.Name %>
</li>
<%} %>

Table Layout

This will make it use a table tag instead of the ul, to enable it call .TableLayout(true), example:

@Html.Awe().AjaxList("Dinners").TableLayout(true)

When using TableLayout you must use Custom Item Layout (in the AjaxListResult return Content, not Items), and the View used to generate Content should consist from tr tags with class="awe-li" and data-val=key, example:

@model IEnumerable<Chef>
@foreach (var o in Model)
{
    <tr data-val="@o.Id" class="awe-li">
        <td>@o.FirstName @o.LastName
        </td>
        <td>@o.Country.Name
        </td>
    </tr>               
}

When using TableLayout you can set the Thead property of the AjaxListResult and this string value will be set into the thead tag of the table. Also an an additional parameter will be sent "isTheadEmpty", this bool parameter tells whether the thead of the table has html in it, this way you can send the thead value only the first time (when its empty), example:

public ActionResult Search(string search, int page, bool isTheadEmpty)
{
    var list = repo.Where(o => (o.FirstName + " " + o.LastName).Contains(search), User.IsInRole("admin"));

    var result = new AjaxListResult
                        {
                            Content = this.RenderView("ListItems/Chef", list.Skip((page-1) * 10).Take(10).ToList()),
                            More = list.Count() > page * 10
                        };
    if (isTheadEmpty) result.Thead = this.RenderView("ListItems/ChefThead");

    return Json(result);
}