Browse all products (ajax)

Product name Category
Product 1 Shoes
Product 2 Electronics
Product 3 Food
Product 4 Shoes
Product 5 Shoes
Product 6 Electronics
Product 7 Food
Product 8 Shoes
Product 9 Shoes
Product 10 Electronics

Razor code


<!-- IndexAjax.cshtml view -->

@using MvcPaging.Demo.Models
@model IPagedList<Product>
@{
	ViewBag.Title = "Browse all products (ajax)";
}
<h2>@ViewBag.Title</h2>
<div id="gridcontainer">
	@Html.Partial("_ProductGrid", Model)
</div>

<!-- Partial _ProductGrid.cshtml view -->

@model IPagedList<MvcPaging.Demo.Models.Product>
<table class="grid">
	<thead>
		<tr>
			<th>Product name</th>
			<th>Category</th>
		</tr>
	</thead>
	<tbody>
		@foreach (var product in Model) {
			<tr>
				<td>@product.Name</td>
				<td>@product.Category</td>
			</tr>
		}
	</tbody>
</table>
<div class="pager">
	@Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount, new AjaxOptions { UpdateTargetId = "gridcontainer"}).Options(o => o.Action("AjaxPage"))
</div>

Controller code

public ActionResult IndexAjax()
{
	int currentPageIndex = 0;
	var products = this.allProducts.ToPagedList(currentPageIndex, DefaultPageSize);
	return View(products);
}

public ActionResult AjaxPage(int? page)
{
	ViewBag.Title = "Browse all products";
	int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
	var products = this.allProducts.ToPagedList(currentPageIndex, DefaultPageSize);
	return PartialView("_ProductGrid", products);
}