MVC WebGrid Search code with example

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

Other blogs you may like

MVC multiple field search with webgrid - Step 5

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: 23,886

Search, sort, paging, insert, update and delete with ASP.Net MVC and bootstrap modal popup PART-1

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: 56,845

ActionResult VS ViewResult in MVC

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,537

Action filter basics in ASP.Net MVC

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,322

How to create a single thanks page for entire controller in MVC

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,306