Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Ajax Paging in ASP.Net MVC using jQuery

jQuery Ajax Paging ASP.NET MVC

Custom paging is very helpful when presenting a huge amount of data on a webpage. In one of my web application, the requirement was such that the pagination should have numeric paging as well as links to previous, next, first and last page. In this article, I will explain how to implement ajax paging in asp.net MVC using jquery with pagedlist MVC ajax example.

  • Must read ASP.Net MVC Tutorial for Beginners with Example
  • ASP.Net MVC Routing Examples

Ajax paging in asp.net MVC example

The following example will demonstrate how to implement ajax paging in MVC 5 using jQuery and Bootstrap. Find the source code below:-

CREATE TABLE [dbo].[City](
	[CityID] [int] IDENTITY(1,1) NOT NULL,
	[CityName] [nvarchar](max) NULL,
 CONSTRAINT [PK_City] PRIMARY KEY CLUSTERED 
(
	[CityID] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]

CREATE TABLE [dbo].[Employee](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[CityID] [int] NOT NULL,
	[Name] [nvarchar](max) NULL,
	[Email] [nvarchar](max) NULL,
	[Salary] [decimal](18, 2) NULL,
	[BirthDate] [datetime] NULL,
	[CreatedDate] [datetime] NULL,
	[IsActive] [bit] NULL,
 CONSTRAINT [PK_Employees] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]
@using EmployeeManagement.Logic
@using EmployeeManagement.Helpers
@model EmployeeModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
ASP.NET MVC Pagination Example

@Html.Partial("Sample1List", Model)
@section scripts{ } @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; }
@foreach (var filter in Model.Filters) { if (filter.ColumnName.ToLower() != "id") { } i++; } @if (Model != null && Model.dynamicList.Count() > 0) { @foreach (var item in Model.dynamicList) { @foreach (var column in item) { string columnName = column.Key; string columnValue = column.Value == null ? string.Empty : Convert.ToString(column.Value); if (columnName.ToLower() != "id") { } } } } else { } @if (Model != null && Model.dynamicList.Count() != 0) { }
@filter.ColumnName
@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
@Html.PagedListPager(new PagedList.StaticPagedList(Model.dynamicList, Model.dynamicListMetaData), page => Url.Action("Sample1FilterSearch", new { page, pageSize = Model.dynamicListMetaData.PageSize, TotalItemCount = Model.dynamicListMetaData.TotalItemCount, CurrentPage = Model.dynamicListMetaData.PageNumber, sortOrder = Model.sortOrder, fieldName = Model.fieldName, IsShowControls = true, IsShowFirstLast = true, IsShowPages = true }), PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new MyCustomNextPrevNumberRenderOptions(), new AjaxOptions() { HttpMethod = "POST", UpdateTargetId = "Sample1List", }))
Page @(Model.dynamicListMetaData.PageCount
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(); public ActionResult Index() { return View(); } #region Sample1 - Custom Grid with paging public ActionResult Sample1(int page = 1, int pageSize = 10) { EmployeeModel objModel = new EmployeeModel(); objModel.StaticPageSize = 10; BindSample1(objModel, page, pageSize); return View(objModel); } public ActionResult Sample1FilterSearch(EmployeeModel objModel, int page = 1, int pageSize = 10) { BindSample1(objModel, page, pageSize); return PartialView("Sample1List", objModel); } public void BindSample1(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; context.setModel(query, objModel, colName, "Name", page, pageSize); } #endregion } } using PagedList; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Text.RegularExpressions; using System.Web; namespace EmployeeManagement.Logic { public class CommonFunction { public static string GetConnectionStringname() { return "DefaultConnection"; } public List GetColumns(string moduleName) { List colName = new List(); if (moduleName == module.Employee.ToString()) { colName.Add("Id"); colName.Add("CityID"); colName.Add("Name"); colName.Add("Email"); colName.Add("CityName"); colName.Add("Salary"); colName.Add("BirthDate"); colName.Add("IsActive"); } return colName; } public StringBuilder GetSqlTableQuery(string mod) { StringBuilder query = new StringBuilder(); query.Append("SELECT COUNT(1) OVER() AS rwcnt,"); if (mod == module.Employee.ToString()) { query.Append("Id,City.CityID,Name,Email,City.CityName,Salary,BirthDate,IsActive FROM Employee"); query.Append(" join City on City.CityID = Employee.CityID"); } return query; } public static string GenerateFilterCondition(List filters) { string ret = " 1=1 "; if (filters != null) { foreach (var filter in filters) { if (!string.IsNullOrWhiteSpace(filter.ColumnName) && !string.IsNullOrEmpty(filter.Condition)) { string value = ""; if (filter.Condition.Contains("is null") || filter.Condition.Contains("is not null")) { } else { value = filter.Value == null ? string.Empty : filter.Value.Trim(); } Regex regex = new Regex("[;\\\\/:*?\"|&']"); value = regex.Replace(value, ""); if (filter.Condition == "No" && !string.IsNullOrEmpty(value)) filter.Condition = "Contain"; ret += " AND"; ret += " (" + filter.ColumnName; if (filter.Condition == "Contain") { ret += " LIKE '%" + value + "%'"; } else if (filter.Condition == "Does not contain") { ret += " NOT LIKE '%" + value + "%'"; } else if (filter.Condition == "Starts with") { ret += " LIKE '" + value + "%'"; } else if (filter.Condition == "Ends with") { ret += " LIKE '%" + value + "' "; } else if (filter.Condition.Contains("is null") || filter.Condition.Contains("is not null")) { ret += " " + filter.Condition + " "; } else { ret += " " + filter.Condition + " '" + value + "'"; } ret += ") "; } } } return ret; } public enum module { Employee, Category, SubCategory, Status } } public class CommonModel { public T Table { get; set; } public List dynamicList { get; set; } public IPagedList dynamicListMetaData { get; set; } public int? page { get; set; } public string sortOrder { get; set; } public string fieldName { get; set; } public string SearchText { get; set; } public List Filters { get; set; } public int StaticPageSize { get; set; } public string ViewType { get; set; } } public class GridFilter { public string Value { get; set; } public string ColumnName { get; set; } public string Condition { get; set; } } public class MVCPagerModel { public List DynamicList { get; set; } public IPagedList DynamicListMetaData { get; set; } public string ActionName { get; set; } public string ControllerName { get; set; } public string UpdateTargetId { get; set; } public string TableUpdate { get; set; } public string sortOrder { get; set; } public string fieldName { get; set; } public string SearchText { get; set; } public string SearchType { get; set; } public string OnBegin { get; set; } public string OnComplete { get; set; } public string OnSuccess { get; set; } public int StaticPageSize { get; set; } public bool PagingWithoutFilter { get; set; } } } _Layout.cshtml @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")
@RenderBody()
@Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/bootstrap") @Scripts.Render("~/bundles/jqueryval") @RenderSection("scripts", required: false)

ajax paging in asp.net MVC example – demo

Download Source Code

Did you find this post useful? I hope you liked this article. Please share with me your valuable suggestions and feedback.

The post Ajax Paging in ASP.Net MVC using jQuery appeared first on Dot Net Technology Tutorial, Dot Net Tricks and Tips, ASP.Net Tutorial C#.



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

Share the post

Ajax Paging in ASP.Net MVC using jQuery

×

Subscribe to Asp Dot Net Tricks And Tips, Dot Net Coding Tips, Google Maps Api Developer

Get updates delivered right to your inbox!

Thank you for your subscription

×