How to change page size in Grid.mvc

Question

I have the following controller:

public ActionResult Grid()
        {
            schoolEntities db = new schoolEntities();
            List<Student> result = db.Students.ToList();
            // I can't use pagesizelist here, taken from the view
            ViewBag.pageSize = int.Parse(pagesizelist.SelectedValue);
            return View(result);
        }

and relating view:

...
@Html.DropDownList("Page", new SelectList(new Dictionary<string, int> { { "10", 10 }, { "20", 20 }, { "50", 50 } }, "Key", "Value"), new { id = "pagesizelist" })

<div class="code-cut">
    @Html.Grid(Model).Columns(Columns =>
{
    Columns.Add(c => c.StudentID).Titled("Id").Filterable(true);
    Columns.Add(c => c.LastName).Titled("Last name").Filterable(true);
    Columns.Add(c => c.FirstName).Titled("First name").Filterable(true);
    Columns.Add(c => c.EnrollmentDate).Titled("Enrollment date").Filterable(true);
    Columns.Add()
...
}).WithPaging(ViewBag.pageSize).Sortable(true)

I would like to somehow set the .WithPaging() parameter dynamically according to change in DropDownList.

See following : https://www.c-sharpcorner.com/blogs/drop-down-list-selected-index-changed-event-in-mvc — jdweng, Aug 30 '19 at 14:32

Mikhail · Accepted Answer · 2019-09-03T10:24:00.547

Wrap the "Page" ddl within a form,
Subscribe to its client-side "onchange". Submit the form there,
Handle the "change size" operation within a separate action method,
Specify a new page size value and reload the entire view:

View:

@model IEnumerable<Student>
@using GridMvc.Html

<script type="text/javascript">
    function onDdlPageChange(sender) {
        $("#formIdHere").submit();
    }
</script>

@using (Html.BeginForm("Grid", "Home", FormMethod.Post, new { id = "formIdHere" }))
{
    @Html.DropDownList("Page", new SelectList(new Dictionary<string, int> { { "10", 10 }, { "20", 20 }, { "50", 50 } }, "Key", "Value", ViewBag.pageSize), new { id = "pagesizelist", onchange = "onDdlPageChange(this);" })

    @Html.Grid(Model).Columns(Columns =>
    {
        Columns.Add(c => c.StudentID).Titled("Id").Filterable(true);
        Columns.Add(c => c.LastName).Titled("Last name").Filterable(true);
        Columns.Add(c => c.FirstName).Titled("First name").Filterable(true);
        Columns.Add(c => c.EnrollmentDate).Titled("Enrollment date").Filterable(true);
        //Columns.Add();
    }).WithPaging(ViewBag.pageSize).Sortable(true)
}

Controller:

public class HomeController : Controller
{
    public static readonly string viewNameWithGrid = "Grid";
    public static readonly int defaultPageSize = 10;

    private static readonly string SavedPageSizeSessionKey = "PageSizeKey";
    public int SavedPageSize
    {
        get
        {
            if (Session[SavedPageSizeSessionKey] == null)
                Session[SavedPageSizeSessionKey] = defaultPageSize;
            return (int)Session[SavedPageSizeSessionKey];
        }
        set { Session[SavedPageSizeSessionKey] = value; }
    }

    //The same as the Action name
    //return View(result);

    //Initial Load
    [HttpGet]
    public ActionResult Grid()
    {
        return GetViewWithGrid(SavedPageSize);
    }

    //Change Page Size
    [HttpPost]
    public ActionResult Grid(int? Page)
    {
        if (Page.HasValue)
            SavedPageSize = Page.Value;
        //Page = DropDownList.id
        return GetViewWithGrid(SavedPageSize);
    }

    ActionResult GetViewWithGrid(int pageSize)
    {
        schoolEntities db = new schoolEntities();
        List<Student> result = db.Students.ToList();

        //ViewBag.pageSize = int.Parse(pagesizelist.SelectedValue);
        ViewBag.pageSize = pageSize;
        return View(viewNameWithGrid, result);
    }
}

The once changed page size should be always applied on next requests. I have updated my answer. — Mikhail, Sep 03 '19 at 09:13

How to change page size in Grid.mvc

1 Answers1