Awesome ASP.net Core and MVC Controls

AjaxList using table layout


Setting .TableLayout(true) will make the AjaxList use a table tag instead of ul, so now you can use 'tr' tags in your custom layout.
isTheadEmpty tells if the table header is empty or not, this way we set it only the first time (not on each subsequent search).
AjaxListDemo/TableLayout.cshtml
@(Html.Awe().AjaxList("MealsTableLayout")
.TableLayout(true))
Awesome/AjaxList/MealsTableLayoutAjaxListController.cs
public class MealsTableLayoutAjaxListController : Controller
{
public ActionResult Search(int page, bool isTheadEmpty)
{
const int PageSize = 5;
var result = new AjaxListResult
{
Content = this.RenderView("CustomItems", Db.Meals.Skip((page - 1) * PageSize).Take(PageSize)),
More = Db.Meals.Count > page * PageSize
};

if (isTheadEmpty) result.Thead = this.RenderView("TableHeader");

return Json(result);
}
}
MealsTableLayoutAjaxList/CustomItems.cshtml
@model IEnumerable<AwesomeMvcDemo.Models.Meal>
@{
Layout = null;
}
@foreach (var o in Model)
{
<tr class="awe-li" data-val="@o.Id">
<td>@o.Name</td>
<td>@o.Category.Name </td>
<td>@o.Description </td>
</tr>
}
MealsTableLayoutAjaxList/TableHeader.cshtml
@{
Layout = null;
}
<tr>
<th style="width: 100px;">Name</th>
<th style="width: 100px;">Category</th>
<th style="width: 300px;">Description</th>
</tr>



Comments

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.