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 IActionResult 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<AweCoreDemo.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