This post was revised and updated on 10/24/2020.
Below is a sample of an Index View utilizing the Generic paging partial views and another partial view that displays my data in a grid.
If you’re falling onto this page from a search link, then you may want to start at the beginning: Ultimate Guide to MVC Paging.
It contains a search box and an “Active Only” check box, if you have a requirement to knock out inactive records. Make special note of the required “jquery.unobtrusive-ajax”.
Since this view is specifically written for the LUCategory, there is no need to reference the model as an interface. You can specify the exact model implementation you’re expecting on the page.
The next important note is that you must store any values from the search model that you’re not displaying on the page in Hidden fields, or else they won’t be passed back on a click, say if the user clicks “Clear”.
@using YTG.MVC.Lookups.Models
@using YTG.Models
@model SearchModel<LuCategory>
@{
ViewData["Title"] = "Index";
}
<h1>Lookups Category Index</h1>
<section id="main-content" class="animated fadeInUp">
<div class="row">
<div class="w-100">
@using (Html.BeginForm("Index", "Lookups", FormMethod.Get, new { id = "frmCategorySearch" }))
{
@Html.HiddenFor(m => m.SortColumn, new { id = "SortColumn" })
@Html.HiddenFor(m => m.SortDescending, new { id = "SortDescending" })
@Html.HiddenFor(m => m.PageSize, new { id = "PageSize" })
@Html.HiddenFor(m => m.CurrentPage, new { id = "CurrentPage" })
<table class="table-responsive" cellspacing="0" width="100%" style="border-color: red !important;">
<tr>
<td>
@Html.TextBoxFor(m => m.SearchTerm, new
{
id = "searchTerm",
placeholder = "Category Name",
CurrentPage = Model.CurrentPage,
PageSize = Model.PageSize,
SortExpression = Model.SortColumn,
SortOrder = Model.SortDescending
})
<input type="submit" value="Search" class="btn btn-sm btn-primary" name="submitButton" />
<input type="submit" value="Clear" class="btn btn-sm btn-primary" name="submitButton" />
<a asp-action="Edit" asp-controller="Lookups" asp-route-id="-1" class="btn btn-sm btn-primary">Add New Category</a>
<div>
@Html.CheckBoxFor(m => m.ActiveOnly, new { id = "ActiveOnly", name = "ActiveOnly" })
@Html.LabelFor(m => m.ActiveOnly)
</div>
</td>
</tr>
</table>
<div id="gridPartial" style=" border-color: blue !important;">
@{ await Html.RenderPartialAsync("_CatsDisplay", Model); }
</div>
}
</div>
</div>
</section>
This view implements searching, filtering by active, paging, and length of page selection, yet it’s only 51 lines of code!
Before we can finish up, I want to explain the Paging and PageCount partial views.