WebGrid form posting in ASP.NET Web Pages Razor v2

Question

OK, typical problem:

• I have a table with 7884 of records (for now—but there will be lots...)
• I want to offer admins a quick way to monitor this table through the web.
• I also need to provide viewers the ability to specify some filtering to further narrow the results, as well as be able to say how many records to pull from the DB.

I'm making my intro to ASP.NET web development and so I chose to use the (more straightforward) ASP.NET WebPages framework.

I'm using the System.Web.Helpers.WebGrid to display the records and I like the fact that it automatically implements paging.

I'm using a <form method="post"> to gather the filtering parameters, so that when the form posted back, I can adjust my querying based on these values. I also assign these values to the form fields so that the user can see the posted parameters in use.

However, I noticed that the page links generated by the WebGrid that are displayed in the page footer all the reference current page URL with a query fragment of the form ?page=n.

So, obviously, when the pages are navigated, I receive a request without my page form data...

What would be your recommended pattern to solved this simple issue and keeping the development of these pages short for the time being?

@{
    Layout = "~/_TablePageLayout.cshtml";
    Page.Title = "Wala-Wala";

    var headlinePattern = Request.Form["headlinePattern"];
    var _headlinePattern = headlinePattern;
    if (string.IsNullOrWhiteSpace(headlinePattern)) {
        _headlinePattern = "%";
        headlinePattern = string.Empty;
    }

    var maxCount = Request.Form["maxCount"];
    int? _maxCount = maxCount.TryConvert<int>();
    if (_maxCount == null || _maxCount < 0) {
        _maxCount = null;
        maxCount = string.Empty;
    }

    var database = Database.Open("Wala-Wala-DB");
    var query = _maxCount == null
        ? @"SELECT * FROM dbo.WalaWala WHERE Headline LIKE @1"
        : @"SELECT TOP(@0) * FROM dbo.WalaWala WHERE Headline LIKE @1";

    var dataSource = database.Query(query, _maxCount, _headlinePattern);

    var grid = new WebGrid(source: dataSource, rowsPerPage: 25, canPage: true);
    grid.SortColumn = "Id";
    grid.SortDirection = SortDirection.Descending;

    var rowStart = grid.PageIndex * @grid.RowsPerPage + 1;
    var rowEnd = grid.PageIndex * @grid.RowsPerPage + grid.Rows.Count;
}

<h1>@Page.Title</h1>

<form method="post">
<fieldset>
    <legend>Search</legend>
    <ol>
        <li>
            <label for="maxCount">Maximum:</label>
            <input type="text" id="maxCount" name="maxCount" value="@maxCount""/>
        </li>
        <li>
            <label for="headlinePattern">Headline Pattern:</label>
            <input type="text" id="headlinePattern" name="headlinePattern" value="@headlinePattern""/>
            <input type="submit" value="Search" />
        </li>
    </ol>
</fieldset>
</form>

<p>
    <b>@grid.TotalRowCount entries found. Showing results @rowStart to @rowEnd (page @(grid.PageIndex + 1)
        of @grid.PageCount).</b>
</p>

<div>
    @grid.GetHtml(
        tableStyle: "tableStyle",
        alternatingRowStyle: "alternatingRowStyle",
        mode: WebGridPagerModes.All,
        columns: new[] {
            grid.Column(columnName: "Id", style: "columnStyle"),
            grid.Column(columnName: "Headline", style: "columnStyle"),
            grid.Column(columnName: "DTS", style: "columnStyle"),
        }
    )
</div>

Answer 1

Use jQuery to force the form to be POSTed and prevent the click on the link from initiating a GET request. This article explains how to do that in more detail: http://www.mikesdotnetting.com/Article/180/Displaying-Search-Results-In-A-WebGrid