Here is a controller
public class ProductController : Controller { public ActionResult Index( int? page, int? pagesize ) { ... int pageSize = pagesize ?? 5; List<SelectListItem> items = new List<SelectListItem>{ new SelectListItem{ Text="5", Value="5" }, new SelectListItem{ Text="10", Value="10" } } // items = List<SelectListItem> // "Value" = ValueText // "Text" = DisplayText // pagesize = SelectedListItem's Value from querystring ViewBag.PageSizeList = new SelectList( items, "Value", "Text", pagesize ); ViewBag.CurrentPageSize = pageSize } }Here is the view
@using PagedList @using PagedList.Mvc @model IEnumerable<form id="form1" action=@Url.Action("Index", "Product") method="get"> ... @Html.DropDownList( "pagesize", (SelectList)ViewBag.PageSizeList ) // We keep DropDown list's name separate from ViewBag element's name @foreach ( var item in Model ) { } <table><tbody> <tr><td>...</td></tr> </tbody></table> @Html.PagedListPager( (IPagedList)Model, page => Url.Action( "Index", new { page, pagesize = @ViewBag.CurrentPageSize }) </form> <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"> </script> <script type="text/javascript"> $(function(){ // When onchange event occurs on <select id="pagesize">, // simply submit the form, which will submit the new pagesize value as querystring. $('#pagesize').on('change', function(){ $('#form1').submit(); }); }); </script>