Searching In jqGrid Using MVC

Introduction:

In this article you will find how can you perform searching in jqGrid using ASP.NET MVC. But before preceding further in this article please read my previous article because this article is completely based on my previous article.

Please follow the link: Performing CRUD Operation using jqGrid in ASP.NET MVC.

 

In my previous article I have explained how to perform CRUD operation in jqGrid using. Previous articles' output is given below.

Previous Article Output 

 

I am continuing that article with search operations step by step.

• Open script.js file which we have created in our previous article.
• Then enable search to true.

•  Also Set searchtext property if you want(Not Necessary).

 

• After doing this your output will be as following,

 

When you will click on that button then one popup window will show for searching which will look as follows,

 

Now you will see there are lots of operations. So how will we remove extra operation which we don't want?

• Now modify search dialog box by writing code just after delete operation in script.js.

 

You can provide more spot values like as following. 

sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw', 'bn', 'ew', 'en', 'cn', 'nc', 'nu', 'nn', 'in', 'ni']

Spot value description: Description of all spot value is given below.

 

After providing one value to the spot my output will be as follows:

 

Complete Code of script.js,

/// <reference path="jquery.jqGrid.js" />
$(function () {
    $("#jqGrid").jqGrid({
        url: "/Student/GetStudents",
        datatype: 'json',
        mtype: 'Get',
        colNames: ['ID', 'Student Name', 'Father Name', 'Gender', 'Class', 'Admission Date'],
        colModel: [
            { key: true, hidden: true, name: 'ID', index: 'ID', editable: true },
            { key: false, name: 'Name', index: 'Name', editable: true },
            { key: false, name: 'FatherName', index: 'FatherName', editable: true },
            { key: false, name: 'Gender', index: 'Gender', editable: true, edittype: 'select', editoptions: { value: { 'M': 'Male', 'F': 'Female', 'N': 'None' } } },
            { key: false, name: 'ClassName', index: 'ClassName', editable: true, edittype: 'select', editoptions: { value: { '1': '1st Class', '2': '2nd Class', '3': '3rd Class', '4': '4th Class', '5': '5th Class' } } },
            { key: false, name: 'DateOfAdmission', index: 'DateOfAdmission', editable: true, formatter: 'date', formatoptions: { newformat: 'd/m/Y' } }],
        pager: jQuery('#jqControls'),
        rowNum: 10,
        rowList: [10, 20, 30, 40, 50],
        height: '100%',
        viewrecords: true,
        caption: 'Students Records',
        emptyrecords: 'No Students Records are Available to Display',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            Id: "0"
        },
        autowidth: true,
        multiselect: false,
    }).navGrid('#jqControls', {
        edit: true, add: true, del: true, search: true,
                                searchtext: "Search Student", refresh: true
    },
        {
            zIndex: 100,
            url: '/Student/Edit',
            closeOnEscape: true,
            closeAfterEdit: true,
            recreateForm: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            zIndex: 100,
            url: "/Student/Create",
            closeOnEscape: true,
            closeAfterAdd: true,
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            zIndex: 100,
            url: "/Student/Delete",
            closeOnEscape: true,
            closeAfterDelete: true,
            recreateForm: true,
            msg: "Are you sure you want to delete Student... ? ",
            afterComplete: function (response) {
                if (response.responseText) {
                    alert(response.responseText);
                }
            }
        },
        {
            zIndex: 100,
            caption: "Search Students",
            sopt: ['cn']
        });
});

• Now add 4 more attributes to our GetStudents Action that attributes you can see in following diagram:
   

• Now write the following code for searching logic in GetStudent action method,
   

Complete GetStudent Action Code:

public JsonResult GetStudents(string sidx, string sort, int page, int rows, bool _search, string searchField, string searchOper, string searchString)
{
    ApplicationDbContext db = new ApplicationDbContext();
    sort = (sort == null) ? "" : sort;
    int pageIndex = Convert.ToInt32(page) - 1;
    int pageSize = rows;

    var StudentList = db.Students.Select(
            t => new
            {
                t.ID,
                t.Name,
                t.FatherName,
                t.Gender,
                t.ClassName,
                t.DateOfAdmission
            });
    if(_search)
    {
        switch(searchField)
        {
            case "Name":
                StudentList=StudentList.Where(t => t.Name.Contains(searchString));
                break;
            case "FatherName":
                StudentList = StudentList.Where(t => t.FatherName.Contains(searchString));
                break;
            case "Gender":
                StudentList = StudentList.Where(t => t.Gender.Contains(searchString));
                break;
            case "ClassName":
                StudentList = StudentList.Where(t => t.ClassName.Contains(searchString));
                break;
        }
    }
    int totalRecords = StudentList.Count();
    var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
    if (sort.ToUpper() == "DESC")
    {
        StudentList = StudentList.OrderByDescending(t => t.Name);
        StudentList = StudentList.Skip(pageIndex * pageSize).Take(pageSize);
    }
    else
    {
        StudentList = StudentList.OrderBy(t => t.Name);
        StudentList = StudentList.Skip(pageIndex * pageSize).Take(pageSize);
    }
    var jsonData = new
    {
        total = totalPages,
        page,
        records = totalRecords,
        rows = StudentList
    };
    return Json(jsonData, JsonRequestBehavior.AllowGet);
}

Output:

• Initially output:
  
  
• When Search Something:
  
  
  
  
• After Search:
  
  

• Download Complete Source Code
• Click here to see changes of the Project

Read more articles on ASP.NET:

• Simple Login Application using Sessions in ASP.NET MVC
• Paging And Sorting In ASP.NET MVC