Monday, July 7, 2014

MVC Ad-hoc DropDownList for PageSize

Example of Razor DropDown List for PageSize in an Index View using ViewBag.

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>