Webmatrix webgrid not allowing to change rowsPerPage using Razor

Question

I have the following code, I have a page that looks like this:

I want to be able to choose the number of rows per page but I keep getting an error that says: "CS1502: The best overloaded method match for 'System.Web.Helpers.WebGrid.WebGrid(System.Collections.Generic.IEnumerable, System.Collections.Generic.IEnumerable, string, int, bool, bool, string, string, string, string, string, string, string)' has some invalid arguments"

Grid 1 is actually taking the razor syntax of @rpp when var rpp = data.Count() but when I use @rpp in Grid 2 and make var rpp = Request["rpp1'] it is not taking it and it gives me that error. Any way to avoid this?

@{
    if(Request["action"] == "Go")
    {
    var rpp = Request["rpp1"];

    <p>Showing @rpp rows per page.</p> 
    var columns2 = new[]{"ID", "SSO", "Category", "System", "Subject", "Created", "Assigned_To", "Case_Status"};
    var grid2 = new WebGrid(data, ajaxUpdateContainerId: "grid", defaultSort: "ID", columnNames: columns2, rowsPerPage: @rpp);
    if (Request.QueryString[grid.SortDirectionFieldName].IsEmpty()) {
    grid2.SortDirection = SortDirection.Descending;
    }
    @grid2.GetHtml(    
        tableStyle : "table",
        alternatingRowStyle : "alternate",
        headerStyle : "header",
        mode: WebGridPagerModes. All,
        previousText: "Previous",
        nextText: "Next",
        firstText: "First Page",
        lastText: "Last Page",
        columns: grid.Columns(
                     grid.Column("ID", "ID"),
                     grid.Column("SSO", "SSO"),
                     grid.Column("Category", "Category"),
                     grid.Column("System", "System"),
                     grid.Column("Subject", "Subject"),
                     grid.Column("Created", "Created"),
                     grid.Column("Assigned_To", "Assigned To"),
                     grid.Column("Case_Status", "Status")
    )
    )
   } else{

    if(Request["action"] == "Plain Table - Excel")
    {
    var rpp = data.Count();
    var columns1 = new[]{"ID", "SSO", "Category", "System", "Subject", "Created", "Assigned_To", "Case_Status"};
    var grid1 = new WebGrid(data, ajaxUpdateContainerId: "grid", defaultSort: "ID", columnNames: columns1, rowsPerPage: @rpp);
    if (Request.QueryString[grid1.SortDirectionFieldName].IsEmpty()) {
    grid1.SortDirection = SortDirection.Descending;
    }
    @grid1.GetHtml(    
        mode: WebGridPagerModes. All,
        columns: grid.Columns(
                     grid.Column("ID", "ID"),
                     grid.Column("SSO", "SSO"),
                     grid.Column("Category", "Category"),
                     grid.Column("System", "System"),
                     grid.Column("Subject", "Subject"),
                     grid.Column("Created", "Created"),
                     grid.Column("Assigned_To", "Assigned To"),
                     grid.Column("Case_Status", "Status")
    )
    )
} else .............

This is the form:

<h4>Rows Per Page</h4>
<form action="" method="get">
    <div class="right">
        <select id="rpp1" name="rpp1">
            <option selected="@(Request["rpp1"] == "15")" value="15">15</option>
            <option selected="@(Request["rpp1"] == "25")" value="25">25</option>
            <option selected="@(Request["rpp1"] == "50")" value="50">50</option>
            <option selected="@(Request["rpp1"] == "75")" value="75">75</option>
            <option selected="@(Request["rpp1"] == "100")" value="100">100</option>
        </select>
    </div>
    <input type="submit" name="action" value="Go"/>
  </form>

Answer 1

As the error message is telling you, the wrong data type is being passed in as an argument to the WebGrid constructor. Request items are strings, not ints. You can use the AsInt() extension method to change it:

var rpp = Request["rpp1"].AsInt();

Also, you do not need the @ sign when inside a code block:

var grid2 = new WebGrid(data, ajaxUpdateContainerId: "grid", defaultSort: "ID", columnNames: columns2, rowsPerPage: rpp);