Grid page size change based on user input

See more:

MVC3

How to send the selected drop down value to web grid page size.Please help
@model IEnumerable<hrms_dl.zbs_hr_route>
@{
Layout = null;
}


@{



var grid = new WebGrid(Model, rowsPerPage:10, ajaxUpdateContainerId: "myGrid", canSort: true);
@grid.GetHtml(columns: grid.Columns(
//grid.Column("RT_ID", header: string.Format("ROUTE ID", grid.SortColumn == "RT_ID" ? grid.SortDirection == SortDirection.Ascending ? "▼" : "▲" : "▼")),
grid.Column("RT_ID", "ROUTE ID"),
grid.Column("RT_NAME", "ROUTE NAME"),
grid.Column(format: (item) => Html.ActionLink("Edit", "Edit", new { id = item.RT_ID, area = "EIM" }, null)),
grid.Column(format: (item) => Html.ActionLink("Details", "Details", new { id = item.RT_ID, area = "EIM" }, null))
));


}

------------------------------------------------------------------------------------------------------

control
------------------------------------------------------------------------------------------------------

//define values for drop down

public static SelectList PageSizeSelectList()
{
    var pageSizes = new List<string> { "1", "2", "5", "10", "100" };
    return new SelectList(pageSizes, "Value");
}

-------------------------------------------------------------------------------------------------------
view
-------------------------------------------------------------------------------------------------------

//take the selected value

<script>

    $(function () {
        $('#pageSizes').change(function () {
            var selectedValue = $(this).val();
            $('#pageSizes').val(selectedValue);
            //alert(selectedValue);
        });
    });


</script>

//drop down