MVC webgrid searh page with pagination: There are many benefits of using WebGrid in place of table like paging, sorting and alternate row style etc., in our previous article we see MVC search page example with code but there we used table to create the structure of gridview which is missing sorting and alternate row functionality. In this article we will use WebGrid and check how easy it is with same model and controller.
Let's see the result which we will create in this article, you can notice the sorting functionality with header column in this image.
Here is our model
using PagedList;
using System.ComponentModel.DataAnnotations;
namespace MvcSearch.Models
{
public class ProductSearchModel
{
public int? Page { get; set; }
[Display(Name="Product")]
public string ProductName { get; set; }
public decimal? Price { get; set; }
public IPagedList<Product> SearchResults { get; set; }
public string SearchButton { get; set; }
}
}
And controller
public class ProductController : Controller
{
const int RecordsPerPage = 5;
//I am not using httpGet or httpPost because it will be used for both
public ActionResult Index(ProductSearchModel model)
{
if (!string.IsNullOrEmpty(model.SearchButton) || model.Page.HasValue)
{
var entities = new NorthwindEntities();
var results = entities.Products
.Where(p=> (p.ProductName.StartsWith(model.ProductName)
|| model.ProductName == null)
&& (p.Price > model.Price || model.Price == null))
.OrderBy(p => p.ProductName);
var pageIndex = model.Page ?? 1;
model.SearchResults = results.ToPagedList(pageIndex, RecordsPerPage);
}
return View(model);
}
}
You can change Records Per Page value, I used 5 so I can see the paging at the bottom.
And finally here is the code for our view with WebGrid
@model MvcSearchWithWebGrid.Models.ProductSearchModel
@using PagedList.Mvc
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm("Index", "Product", FormMethod.Get))
{
@Html.ValidationSummary(false)
<div style="border-bottom:1px solid #bbb"><h1>Search Product</h1></div>
<table style="border:0px; width:500px;">
<tr>
<td>
<div class="editor-label">
@Html.LabelFor(model => model.ProductName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ProductName)
@Html.ValidationMessageFor(model => model.ProductName)
</div>
</td>
<td>
<div class="editor-label">
@Html.LabelFor(model => model.Price)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Price)
@Html.ValidationMessageFor(model => model.Price)
</div>
</td>
<td style="vertical-align:bottom;">
<input name="SearchButton" type="submit" value="Search" />
</td>
</tr>
</table>
if (Model.SearchResults != null && Model.SearchResults.Count > 0)
{
var grid = new WebGrid(Model.SearchResults, defaultSort: "ProductName");
@grid.GetHtml(
tableStyle: "grid",
headerStyle: "gvHeading",
rowStyle:"gridrow",
alternatingRowStyle: "gridalt",
columns: grid.Columns(
grid.Column("ProductID", "ID"),
grid.Column("ProductName", "Product"),
grid.Column("Qunatity"),
grid.Column("Price"),
grid.Column("ReorderLevel", "Re-order Level")
)
)
<div class="pagination">
@Html.PagedListPager(Model.SearchResults
, page => Url.Action("Index", new RouteValueDictionary()
{
{ "Page", page },
{ "ProductName", Model.ProductName },
{ "Price", Model.Price }
}),
PagedListRenderOptions.PageNumbersOnly)
</div>
}
}
If you want to search on multiple field even with drop down and proper paging and sorting to keep even after searching then see MVC multiple field search with webgrid - Step 5
![]() |
Having 13+ years of experience in Microsoft Technologies (C#, ASP.Net, MVC and SQL Server). Worked with Metaoption LLC, for more than 9 years and still with the same company. Always ready to learn new technologies and tricks.
|
By Ali Adravi On 25 Aug, 13 Viewed: 19,184 |
First of all we will try for multiple field search with paging and sorting for products by using WebGrid. We will create relationship between products and category table so we can show the category name in grid. To search we need a separate model for search having all the paging, sorting, total... By Ali Adravi On 22 Mar 2015 Viewed: 25,546
Search, sort, paging, insert, update and delete with ASP.Net MVC and bootstrap modal popup and WebGrid to show records with search, sort and paging feature and in next article we will complete our article by adding insert, update and delete feature with bootstrap modal popup. We are going to use... By Ali Adravi On 28 Dec 2014 Viewed: 59,402
In MVC controls there are different type of action result we use as a return type from a controller action method in which ViewResult, ActionResult and JsonResult are commonly used. In this article we will learn what are the available action results and which one we need to use in which... By Ali Adravi On 19 Jul 2013 Viewed: 3,679
Action filter in MVC is from very first version. Sometimes we want to perform logic before or after calling the action method, to support this MVC provides action filters. Action filters are used as attributes. Filter can be applied on action method or directly to the controller. Suppose we want... By Hamden On 13 Jul 2013 Viewed: 1,375
Sometimes we need a thanks page say we have user registration, change password, activate account functionality in our application then we need a thanks page after registering with our site, to say thanks for registering with us or showing confirmation that your password is successfully changed or... By Hamden On 30 Jun 2013 Viewed: 3,550