Step 1:

We will first Add a list Model. We will call it DinnerListModel. The definition of which is given below.

<pre>using System.Collections.Generic;
namespace NerdDinner.Models
{
public class DinnerListModel
{
public IEnumerable<Dinner> Dinners { get; set; }
public int TotalRowsCount { get; set; }
}
}

Step 2:

We will Add a partial view to show the paged data. The contents of the partial view is listed below.

<pre><%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<DinnerListModel>" %>
<%@ Import Namespace="NerdDinner.Models" %>
<ul>
<% foreach (var dinner in Model.Dinners)
{
%>
<li>
<%= Html.ActionLink(dinner.Title,"Details", new{id=dinner.DinnerId})%>
on
<%=Html.Encode(dinner.EventDate.ToShortDateString())%>
@
<%=Html.Encode(dinner.EventDate.ToShortTimeString())%>
</li>
<%
}%>
</ul>

Note that the partial class is now inheriting from DinnerListModel instead of IEnumerable<Dinner>. Also the foreach loop now selects from Models.Dinner instead of Model.

Step 3:

The contents of content placeholder "MainContents" will look as follows.

<pre><pre>	<script type="text/javascript">
	    function pageselectCallback(page_index, jq) {
		    $.get("/Dinners/", { page: page_index, pageSize: 10 },
				   function (data) {
				       $('#ListResults').html(data);
				   });
		}

		jQuery(function ($) {
			$('#Pagination').pagination('<%= Model.TotalRowsCount %>', {
				callback: pageselectCallback
			});
		});
	</script>
	<h2>Upcoming Dinners</h2>
<div id="ListResults">
<%
Html.RenderPartial("~/Views/Dinners/DinnerResults.ascx", Model); %>
</div>
<div id="Pagination"></div><br />
	<p>
		<%: Html.ActionLink("Create New", "Create") %>
	</p>

The changes we have made is replacing the foreach loop to show data by a div tag called "ListResults" which will load the partial view. Also added is a div tag for pagination. The JQuery code will fetch the records based on page selected and number of record per page. Here as well the Page tag will change to

<pre><%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<DinnerListModel>" %>

Step 4:

Don't forget to add the Jquery files to script folder and Pagination.css to Content folder. These will be referenced in the site.master file by the following lines.

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.pagination.js" type="text/javascript"></script>

You can download the JQuery library from here. The pagination css can be downloaded from here.

Step 5:

After this I will a a new Method Called GetDinnerResults on DinnersControls.

<pre>        private DinnerListModel GetDinnerResults(int? page, int? pageSize)
{
IEnumerable<Dinner> upCommingDinners = _repository.FindUpCommingDinners().ToList();
IEnumerable<Dinner> selectedDinners = upCommingDinners.Skip((page ?? 0) * (pageSize ?? 10)).Take(10);

return    new DinnerListModel
{
Dinners = selectedDinners,
TotalRowsCount = upCommingDinners.Count()
};
}

Step 6:

The Index method will change to

<pre>        public ActionResult Index(int? page, int? pageSize)
{
DinnerListModel dinners = GetDinnerResults(page, pageSize);

if (Request.IsAjaxRequest())
{
return PartialView("DinnerResults", dinners);
}
else
{
return PartialView(dinners);
}
}

The above code indicates that we should load the partial onto the index page when the code is executed for the first time. For all other subsequent pages it will not the load he whole page but only load the partial view DinnersResults.