Qwerty Qwerty - 2 days ago 5
HTML Question

How to use dropdown for page size in pagination with ASP.NET MVC index view?

I have used this for paging the list of records in my ASP.NET MVC 4 application:
http://demo.taiga.nl/MvcPaging/Paging/ViewByCategory

I would like to add a dropdown to change the value of the page size. On change of item selected in dropdown I would like the page size to change.
I don't want to use default page size.

After viewing comments,
this what I have done in Index.cshtml View after the

<table>
element:

<div class="pager">
@Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount)
Displaying @Model.ItemStart - @Model.ItemEnd of @Model.TotalItemCount items(s)

</div>

@using (Html.BeginForm()) {
<div id="pro_pag2">
@Html.DropDownList("PageSize", new SelectList(new Dictionary<string, int> { { "10", 10 }, { "20", 20 }, { "100", 100 } }, "Key", "Value"), new { @class = "pro_pag_tf1", id = "pagesizelist" })
</div>
}

@section scripts {
<script type="text/javascript">
$('#pagesizelist').on('change', function (event) {
var form = $(event.target).parents('form');

form.submit();
});
</script>
}


Index action of Index.cs controller:

public ActionResult Index(int? PageSize, int? page)
{
int? DefaultPageSize = 10;
int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
if (PageSize != null) {
DefaultPageSize = PageSize;
}
return View(contractsList.ToPagedList(currentPageIndex, (int)DefaultPageSize));
}


The changing page number works. But when I change the page size with dropdown and select a 2 as page number then it defaults to the page size...

I guess this is because the page selected button does not submit the page size selected from dropdown...how do I get selected value from dropdown in the Index action method?

How can I pass the selected value from dropdown everytime I select the page button? It seems to work with just selecting dropdown?

Maybe there is a better solution?

Answer

Based on your code above, the generated link of page 2 will be like this:

<a href="/Index?page=2">2</a>

while this should be the correct generated link if you change the page size to 20

<a href="/Index?PageSize=20&page=2">2</a>

What you need to do is adding the PageSize argument to all the page number links based on the selected page size. The example from http://demo.taiga.nl/MvcPaging/Paging/ViewByCategory uses ViewBag to add the categoryName argument to each page number link based on the selected category, so I'd suggest using a similar way.

First, change your controller method to this:

public ActionResult Index(int? PageSize, int? page)
{
    int? DefaultPageSize = 10;
    int currentPageIndex = page.HasValue ? page.Value - 1 : 0;
    if (PageSize != null) {
        DefaultPageSize = PageSize;
    }

    ViewBag.PageSize = DefaultPageSize;

    return View(contractsList.ToPagedList(currentPageIndex, (int)DefaultPageSize));
}

then change the content of <div class="pager"> in your View code to this

<div class="pager">
    @Html.Pager(Model.PageSize, Model.PageNumber, Model.TotalItemCount).Options(o => o.AddRouteValue("PageSize", ViewBag.PageSize))
    Displaying @Model.ItemStart - @Model.ItemEnd of @Model.TotalItemCount items(s)

</div>
Comments