paging searching and sorting

Keywords | paging searching and sorting, paging searching and sorting in asp.net mvc 5

Paging Searching and Sorting in ASP.NET MVC

Paging searching and sorting are a very important thing when you are working with huge records.  In the previous article, I explained how to implement ajax paging with bootstrap in mvc 5.

In this blog post, I will demonstrate how to perform paging searching and sorting in asp.net mvc web application.

Paging Searching and Sorting in ASP.NET MVC 5

In that context, we’ll perform custom grid with each column filter, paging, and sorting. In the following article, you will see how sorting works by clicking the headings. The headings are the links to show the sorted data. Find the source code below:

@using EmployeeManagement.Logic
@using EmployeeManagement.Helpers
@model EmployeeModel

@Html.Partial("_FilterMenu")
<div class="row header-title">
    <div class="title">Custom Grid with Each Column Filter, Paging and Sorting | DotNettec.com </div>
    <hr class="hr-tp-0" />
</div>

<div class="row" id="Sample3List">
    @Html.Partial("Sample3List", Model)
</div>

@section scripts{
    <link href="~/Content/jquery.datetimepicker.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.datetimepicker.full.js"></script>
    <script src="~/Scripts/Common.js"></script>
    <script type="text/javascript">
        rootUrl = "@Url.Content("~/")";
        var ControllerName = "Home"; var ActionName = "Sample3FilterSearch"; var tableList = "Sample3List"; var tableName = "tblSample3";//For Grid

        function InitCheckboxAndDoubleClick() {
            CheckboxCheck(tableName);//Checkbox Select - Common.js
        }
        function DropDownChange($this) {//grid header filter dropdown change
            Search(ControllerName, ActionName, tableList, tableName);
        }
    </script>
    @*start Grid paging/Sorting*@
    <script>
        bindGridEvent(tableName);
        FilterCondition("condition", ControllerName, ActionName, tableList, tableName);
    </script>
}

@using EmployeeManagement.Logic
@model EmployeeModel
@using PagedList.Mvc
@using EmployeeManagement.Helpers
@using EmployeeManagement.Model

@{
    int i = 0;
    int count = Model.Filters.Count() + 1;
    int id = Model.Table == null ? 0 : Model.Table.Id;
}

<div class="table-responsive">
    <table id="tblSample3" class="table table-striped table-bordered table-hover">
        <thead>            
            <tr class="header-title">
                <th class="text-center" width="4%">
                    <label class="mt-checkbox  mt-checkbox-outline">
                        <input type="checkbox" id="chkAll" class="group-checkable" />
                        <span></span>
                    </label>
                    @Html.Hidden("hdnParamNames", "Home|Sample3FilterSearch|Sample3List|tblSample3")@*Ex:  ControllerName|ActionName|tableList|tableName*@
                </th>
                @foreach (var filter in Model.Filters)
                {
                    if (filter.ColumnName.ToLower() != "id")
                    {

                        <th @(filter.ColumnName == "CityID" ? "style=display:none" : "")>
                            @if (filter.ColumnName == "CityName")
                            {
                                @Html.Sorter(filter.ColumnName, filter.ColumnName, Model.dynamicListMetaData.TotalItemCount, "Sample3FilterSearch", "Home", 
                               new AjaxOptions() { UpdateTargetId = "Sample3List", OnSuccess = "bindGridEvent('tblSample3')", OnBegin = "beforePage" }, new { page = Model.dynamicListMetaData.PageNumber, sortOrder = filter.ColumnName == Model.fieldName ? Model.sortOrder : ""})
                                <div class="input-group">
                                    @Html.DropDownList("ddlCity", new SelectList(Model.CityList, "Text", "Text", filter.Value), "[None]", new { data_Column = filter.ColumnName, data_condition = "=", data_value = filter.Value, onchange = "DropDownChange(this)", @class = "form-control input-sm txt-filter " })
                                </div>
                            }
                            else if (filter.ColumnName == "IsActive" || filter.ColumnName == "IsDefault")
                            {
                                @Html.Sorter(filter.ColumnName, filter.ColumnName, Model.dynamicListMetaData.TotalItemCount, "Sample3FilterSearch", "Home", new AjaxOptions() { UpdateTargetId = "Sample3List", OnSuccess = "bindGridEvent('tblSample3')", OnBegin = "beforePage" }, new { page = Model.dynamicListMetaData.PageNumber, sortOrder = filter.ColumnName == Model.fieldName ? Model.sortOrder : ""})
                                <div class="input-group">
                                    @Html.CustomCheckbox(filter.ColumnName, filter.Value == null ? "false" : filter.Value, new { @class = "group-checkable mg-rt-2", data_column = filter.ColumnName, data_condition = (string.IsNullOrEmpty(filter.Condition) ? "false" : filter.Condition) })
                                    <a class="input-group-addon btn btn-icon-only @(string.IsNullOrEmpty(filter.Condition) ? "btn-filter" : "btn-red")" id="@Html.Raw("filter" + i)">
                                        <i class="@(string.IsNullOrEmpty(filter.Condition) ? "glyphicon glyphicon-filter" : "glyphicon glyphicon-remove")"></i>
                                    </a>
                                </div>
                            }
                            else
                            {
                                @Html.Sorter(filter.ColumnName, filter.ColumnName, Model.dynamicListMetaData.TotalItemCount, "Sample3FilterSearch", "Home", new AjaxOptions() { UpdateTargetId = "Sample3List", OnSuccess = "bindGridEvent('tblSample3')", OnBegin = "beforePage" }, new { page = Model.dynamicListMetaData.PageNumber, sortOrder = filter.ColumnName == Model.fieldName ? Model.sortOrder : ""})
                                <div class="input-group">
                                    <input type="text" class="form-control input-sm txt-filter" onabort="checkState(this)" data-pastvalue="@filter.Value" data-column="@filter.ColumnName" data-condition="@(string.IsNullOrEmpty(filter.Condition) ? "No" : filter.Condition)" value="@filter.Value" />
                                    <a class="input-group-addon btn btn-icon-only  @(string.IsNullOrEmpty(filter.Condition) ? "btn-filter" : "btn-red") " id="@Html.Raw("filter" + i)">
                                        <i class="@(string.IsNullOrEmpty(filter.Condition) ? "glyphicon glyphicon-filter" : "glyphicon glyphicon-remove")"></i>
                                    </a>
                                </div>
                            }
                        </th>
                    }
                    i++;
                }
            </tr>
        </thead>
        @if (Model != null && Model.dynamicList.Count() > 0)
        {
            <tbody>
                @foreach (var item in Model.dynamicList)
                {
                    <tr>
                        <td class="text-center">
                            <label class="mt-checkbox  mt-checkbox-outline">
                                <input type="checkbox" id="chkRow" class="group-checkable" value="@item.Id" />
                                <span></span>
                            </label>
                        </td>
                        @foreach (var column in item)
                        {
                            string columnName = column.Key;
                            string columnValue = column.Value == null ? string.Empty : Convert.ToString(column.Value);
                            if (columnName.ToLower() != "id")
                            {
                                <td @(columnName == "CityID" ? "style=display:none" : "")>
                                    @if (columnName.Contains("IsActive"))
                                    {
                                        columnValue = columnValue == null ? "false" : columnValue;
                                        @Html.CustomCheckbox(columnName, columnValue == null ? "false" : columnValue, new { @disabled = "disabled" })
                                    }
                                    else if (columnName.ToLower().Contains("date"))
                                    {
                                        columnValue = string.IsNullOrEmpty(columnValue) ? "" : Convert.ToDateTime(columnValue).ToString("yyyy-MM-dd hh:mm tt");
                                        @Html.Raw(columnValue)
                                    }
                                    else
                                    {
                                        @Html.Raw(columnValue)
                                    }
                                </td>
                            }
                        }
                    </tr>
                }
            </tbody>
        }
        else
        {
            <tbody>
                <tr>
                    <td colspan="@count">
                        No data
                    </td>
                </tr>
            </tbody>
        }
        <tfoot>
            @if (Model != null && Model.dynamicList.Count() != 0)
            {
                <tr>
                    <td colspan="@count">
                        @{
                            MVCPagerModel objMVCPagerModel = new MVCPagerModel();
                            objMVCPagerModel.ActionName = "Sample3FilterSearch";
                            objMVCPagerModel.ControllerName = "Home";
                            objMVCPagerModel.UpdateTargetId = "Sample3List";
                            objMVCPagerModel.TableUpdate = "tblSample3";
                            objMVCPagerModel.DynamicList = Model.dynamicList;
                            objMVCPagerModel.DynamicListMetaData = Model.dynamicListMetaData;
                            objMVCPagerModel.sortOrder = Model.sortOrder;
                            objMVCPagerModel.fieldName = Model.fieldName;
                            objMVCPagerModel.StaticPageSize = Model.StaticPageSize;
                        }
                        @Html.Partial("_MVCPager", objMVCPagerModel)
                    </td>
                </tr>
                            }
        </tfoot>
    </table>
</div>
<script>
    if (typeof SortSetting == 'function') {
        SortSetting('@(Model.sortOrder == null ? "" : Model.sortOrder)', '@(Model.fieldName == null ? "" : Model.fieldName)');
    }
</script>

using EmployeeManagement.Logic;
using EmployeeManagement.Model;
using System;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Linq;
using System.Net;
using System.Text;
using System.Web.Mvc;

namespace EmployeeManagement.Controllers
{
    public class HomeController : Controller
    {
        CommonFunction common = new CommonFunction();             

        #region Sample3 - Custom Grid with Each Column filter, paging and sorting
        public ActionResult Sample3(int page = 1, int pageSize = 10)
        {
            EmployeeModel objModel = new EmployeeModel();
            objModel.StaticPageSize = 10;

            BindSample3(objModel, page, pageSize);
            return View(objModel);
        }

        public ActionResult Sample3FilterSearch(EmployeeModel objModel, int page = 1, int pageSize = 10)
        {
            BindSample3(objModel, page, pageSize);
            return PartialView("Sample3List", objModel);
        }

        public void BindSample3(EmployeeModel objModel, int page, int pageSize)
        {
            CityManager objCityManager = new CityManager(new DataContext());
            EmployeeManager context = new EmployeeManager(new DataContext());

            StringBuilder query = new StringBuilder();
            List<string> colName = common.GetColumns(CommonFunction.module.Employee.ToString());
            query = common.GetSqlTableQuery(CommonFunction.module.Employee.ToString());
            if (objModel != null)
                objModel.StaticPageSize = pageSize;

            objModel.CityList = Extens.ToSelectList(objCityManager.GetDtCity(), "CityID", "CityName");
            context.setModel(query, objModel, colName, "Name", page, pageSize);
        }
        #endregion      
    }
}

Download Code

What do you think?

I hope you liked this article on paging searching and sorting in asp.net mvc. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

LEAVE A REPLY

Please enter your comment!
Please enter your name here