1. Original Entry + Comments2. Write a Comment3. Preview Comment

June 06, 2012  |  Paging and posting with the Razor WebGrid Helper  |  16590 hit(s)

The ASP.NET Web Pages/Razor WebGrid helper lets you enable paging just by setting the rowsPerPage property:
var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

Sometimes you want to be able to both to page and to filter the items that are displayed by the WebGrid helper. Here’s an example from the tutorial I posted on the http://asp.net/web-pages site a couple of weeks ago:

The typical (?) approach here is to create a <form> element and set its method attribute to post:

<form method="post">
<label for="searchGenre">Genre to look for:</label>
<input type="text" name="searchGenre" value="" />
<input type="Submit" value="Search Genre" /><br/>
(Leave blank to list all movies.)<br/>

In the page’s code, you create an is(IsPost) block in which you set up a parameterized SQL query and run that:
var db = Database.Open("WebPagesMovies") ;
var selectCommand = "SELECT * FROM Movies";
var searchTerm = "";

if(IsPost && !Request.QueryString["searchGenre"].IsEmpty() ) {
selectCommand = "SELECT * FROM Movies WHERE Genre = @0";
searchTerm = Request.QueryString["searchGenre"];

var selectedData = db.Query(selectCommand, searchTerm);
var grid = new WebGrid(source: selectedData, rowsPerPage:3);

This works great—for the first page. But if you use the page navigation to go to the second page, the grid forgets all about your filter.

The problem is that paging in the grid is implemented as a query string. Note that if you go to page 2, the URL changes to something like this:


This means that the URL of the page has changed, which means that the browser is doing a GET. Doing a GET means that your posted form data is ignored.

The fix (a fix) is relatively simple: instead of using the POST method for the form, use a GET method:

<form method="get">
<!-- etc -->

This change causes the form to post the form values in the URL:


Then in your page logic, you forget about the IsPost test and just do this:

if(!Request.QueryString["searchGenre"].IsEmpty() ) { // etc }

With this change, your filter form and the WebGrid helper’s paging logic work together quite nicely.

bartvn   17 Aug 14 - 1:16 PM

Hello Mike,

Thank you for the great blog you have!
I'm currently implementing the search option you explained on your blog and this seems to work on 1 of my pages, but I'm trying to implement it on another page, where I'm using the following code below. When using 2 DB connections, it seems that the search function doesn't work anymore.
What did I wrong to make the search option working?

Thank you for your support !

<!-- Open customer DB -->

var db = Database.Open("EmptySite");
var sql = "SELECT tblIFast.iFastID, tbliFast.Date, tblIFast.BevasysNumber, tblIFast.iFastNumber, tblCustomers.CompanyName FROM tblCustomers Inner Join tbliFast ON tblCustomers.CustomerId = tbliFast.iFastID ORDER BY tblCustomers.CompanyName";
var Customer = db.Query(sql);
var grid = new WebGrid(source: Customer, defaultSort: "CompanyName", rowsPerPage:10);

<!-- Connect to DB for Searching Bevasys n° -->
var dbsearch = Database.Open("EmptySite");
var selectCommand = "SELECT * FROM tblIFast";
var searchTerm = "";
if(!Request.QueryString["searchGenre"].IsEmpty() ) {
selectCommand = "SELECT * FROM tblIFast WHERE BevasysNumber = @0";
searchTerm = Request.QueryString["searchGenre"];
if(!Request.QueryString["searchReference"].IsEmpty() ) {
selectCommand = "SELECT * FROM tblIFast WHERE iFastNumber LIKE @0";
searchTerm = "%" + Request["searchReference"] + "%";

var selectedData = dbsearch.Query(selectCommand, searchTerm);
var Bevasys = new WebGrid(source: selectedData, defaultSort: "BevasysNumber");

mike   18 Aug 14 - 11:54 PM

Hello, bartvn. Thanks for visiting the blog.

I'm sorry to say that I probably can't help you with this problem. It's been over 2 years since I worked with WebMatrix and ASP.NET Web Pages. (I'm not at Microsoft any more.) I think you'd probably have success by posting your question on the ASP.NET forums, perhaps here:


Good luck!