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>