Search is an important part for many C# .NET web applications, comprising of both the display of search results and a navigational control for scrolling through the pages of results. While traditional WebForms in C# ASP .NET included a variety of paging controls, such as the default paging included with the DataGrid or GridView controls, MVC .NET is limited with regard to built-in solutions. For MVC .NET web applications, we’ll need to create our own paging control.
In this tutorial, we’ll create “Smart Page”, an MVC helper method for displaying smart paging results. Our pager will display a specific number of page indexes adjacent to the active page, along with a set number of page indexes in the middle and end. The MVC search results pager will adjust the number of adjacent page indexes displayed, according to which search results page the user is currently browsing. The Smart Page search results pager is completely customizable and robust for displaying slick and smart, search results paging.
A first try at creating an MVC .NET paging control might appear as follows:
The above pager displays all available pages of search results (assuming there are 10 pages worth of results to display). While this is a functional solution to search result paging, it can become cumbersome when many search results are required, thus expanding the list of pages across the screen. A better solution, would be an adaptable search results pager, which limits the number of pages displayed to those the user may be interested in.
An implementation of smart paging, who’s algorithm originally comes from the traditional Digg-style search results paging interface, can appear as follows:
Notice in the above, the active search result page would be page #5. The smart pager has adjusted the view to display the first two pages, the last two pages, and one adjacent page next to the active page. This can be a much more powerful solution for many C# ASP .NET MVC web applications. Since Smart Page is fully customizable, we can adjust the settings for the number of adjacent pages in all 3 sections by passing in a variety of parameters.
We’ll implement Smart Page with an MVC Html helper method. This will allow us to simply pass in the required parameters from our search results paging model, to automatically display the pager. The following algorithm is adapted from a variety of “Digg-style” paging solutions in several languages, and custom coded to work with MVC C# .NET and allow passing in the specific parameters to customize the pager. The code is as follows:
The above code has 3 scenarios: a left-most scenario when the user is active on the first few pages, a right-most scenario when the user is active on the last few pages, and a middle scenario when the user is active somewhere in the middle of the search results. This allows us to determine the placement and draw the MVC search results pager control with the desired settings.
Since Smart Page is an MVC Html helper method, we can create an MVC partial view to host the search results and pager, as follows:
Notice in the above view, we have two main sections. The top section draws our pager partial view and the bottom section draws our search results. Our model is SearchModel, which contains both the pager settings (so we know what to pass Smart Page, to draw the pager) and our actual search results for rendering in the web page.
Our pager view will call the actual Smart Page Html helper method, as follows:
Notice the above code takes a different model than the search results view. It actually takes a subset of the fields from SearchModel, specifically those required for displaying the smart pager control. We pass the required parameters to our MVC helper method to draw the MVC C# .NET search results paging. Notice we use the parameter [PAGE] to automatically insert the specific page number into our resulting hyperlink for the page link. Smart Page allows using this variable in the href parameter, as well as the onclick parameter (since either event may be used when clicking a paging link. In addition to passing in the current page, total results, page size, and other properties, Smart Page also includes a delegate method for passing an optional function to change the value of [PAGE], if you require. Normally, Smart Page will simply insert the page index into the link, which you would use in your engine to run the search. However, depending on your backing search engine, you may require a different value, such as the actual hit index (rather than the page index). You can use the delegate method to alter the [PAGE] property in this manner.
We can tie the two partial views together to create our search page, as follows:
In the above code, we simply take the page value from our hidden form field and pass this to our search engine to process and return results. We also include a check for ajax vs a regular page load to know which type of view to return.
In the example project, we’ve implemented a simulation of a search engine. We simply create a static list of Treasure and provide a Search() method that returns results from this list, according to the page selected by the user from the Smart Page control, and the configured page size.
Here is a screenshot of the example application.
You can download the project source code on GitHub by visiting the project home page.
This article was written by Kory Becker, Microsoft certified software developer and architect, providing C# ASP .NET web application development, database design, and mobile software development across a variety of domains for clients in both the business and consumer sectors.