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")
Custom Grid with Each Column Filter, Paging and Sorting | DotNettec.com
@Html.Partial("Sample3List", Model)
@section scripts{
@*start Grid paging/Sorting*@
}
@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;
}
@Html.Hidden("hdnParamNames", "Home|Sample3FilterSearch|Sample3List|tblSample3")@*Ex: ControllerName|ActionName|tableList|tableName*@
@foreach (var filter in Model.Filters)
{
if (filter.ColumnName.ToLower() != "id")
{
@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 : ""})
@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 " })
}
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 : ""})
@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) })
}
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 : ""})
}
}
i++;
}
@foreach (var column in item)
{
string columnName = column.Key;
string columnValue = column.Value == null ? string.Empty : Convert.ToString(column.Value);
if (columnName.ToLower() != "id")
{
@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)
}
}
}
No data
@{
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)
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 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.
This post first appeared on Asp Dot Net Tricks And Tips, Dot Net Coding Tips, Google Maps API Developer, please read the originial post: here
