MVC - Searching, Sorting And Paging In Web Grid

In this blog, you will learn about searching, sorting and paging in Web Grid.

Introduction

I was working on a project where I had to implement a Grid with searching, sorting, and paging as per customer requirement.

I used MVC Web Grid for sorting and paging. I implemented searching features using a text box and AJAX post call. I presume that you have basic knowledge of MVC, jQuery and Partial View.

WebGrid: It is GridView. We can show data in tabular format with sorting and paging as inbuilt features.
Searching: Search feature is not available in WebGrid. So, I implemented it using textbox control and jQuery AJAX.

Index.cshtml

Index.cshtml is Main View. It renders PartialView (_GridPartialView.cshtml). Index View has one PartialView and on Search box.

Search action method is getting called using AJAX. I have mention comment for AJAX call for each line.

var searchVal = $(“#txtSearch”).val();

The above code will get value of search textbox and assign this value to searchString parameter of Search action method.

@model List < MVC.WebGrid.Filter.Pagination.Searching.Models.User > @ {
    ViewBag.Title = "User";
} < table > < tr > < td > < input type = "text"
id = "txtSearch"
placeholder = "Search..."
onkeyup = "Search()" / > < /tr> < tr > < td > < div id = "divPartialView" > @Html.Partial("~/Views/Shared/_GridPartialView.cshtml", Model) < /div> < /td> < /tr> < /table> < script type = "text/javascript" > function Search() {
    var searchVal = $("#txtSearch").val();
    $.ajax({
        type: "POST", // POST call
        url: '/Home/Search', // call search action method of Home controller
        data: {
            searchString: searchVal
        }, // pass the parameter to action method. Here searchString is parameter of Action method from controller.
        dataType: 'html', // return html to render
        success: function(data) {
            $('#divPartialView').html(data); // Render filter result to div where partial view is there. We can render div and partial view should be inside div.
        }
    });
} < /script>

_GridUserPartialView.cshtml: This is PartialView rendered in index View. PartialView contains WebGrid to display data.

Why PartialView?: It is reusable and can refresh page partially. Only the WebGrid will be refreshed, when you type the search term in textbox.

@model List<MVC.WebGrid.Filter.Pagination.Searching.Models.User>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
.webGrid {
margin: 4px;
border-collapse: collapse;
width: 500px;
background-color: #FCFCFC;
}

.header {
background-color: #C1D4E6;
font-weight: bold;
color: #FFF;
}

.webGrid th, .webGrid td {
border: 1px solid #C0C0C0;
padding: 5px;
}

.alt {
background-color: #E4E9F5;
color: #000;
}

.gridHead a:hover {
text-decoration: underline;
}

.description {
width: auto;
}

.select {
background-color: #389DF5;
}
</style>

@{
var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5, selectionFieldName: "selectedRow", ajaxUpdateContainerId: "grid");
grid.Pager(WebGridPagerModes.NextPrevious);
}
<div id="grid">
@grid.GetHtml(

tableStyle: "webGrid", mode: WebGridPagerModes.All,

firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
headerStyle: "header",
alternatingRowStyle: "alt",
selectedRowStyle: "select",
columns: grid.Columns(

grid.Column("UserName", "User Name", style: "description"),
grid.Column("FirstName", "First Name"),
grid.Column("LastName", "Last Name")

))
  </div>

UserController.cs: This is Search action method inside Usercontroller. It is HTTPPOST call.

[HttpPost]
public PartialViewResult Search(string searchString)
{
    List < User > userListCollection = new List < User > ();
    userListCollection = GetUSer();
    if (Request.IsAjaxRequest())
    {
        if (!string.IsNullOrEmpty(searchString) && userListCollection != null && userListCollection.Count > 0)
        {
            var searchedlist = (from list in userListCollection where list.FirstName.IndexOf(searchString, StringComparison.OrdinalIgnoreCase) >= 0 || list.UserName.IndexOf(searchString, StringComparison.OrdinalIgnoreCase) >= 0 || list.LastName.IndexOf(searchString, StringComparison.OrdinalIgnoreCase) >= 0 select list).ToList();
            return PartialView("_GridPartialView", searchedlist);
        } else {
            return PartialView("_GridPartialView", userListCollection);
        }
    } else {
        return PartialView("_GridPartialView", userListCollection);
    }
}

public PartialViewResult Search(string searchString) : Search is action method and it will get parameter value from AJAX call and searchString parameter is assigned in the AJAX call.

You have to search this string in your collection and return the result to PartialView. You need to pass the filter model to PartialView.

I have completed WebGrid with search, sort, and paging. I have attached source code for your reference.