How to display Grid in MVC with paging and sorting.
Question
Answers
-
User665608656 posted
Hi pathipati,
According to your requirements,I suggest you can use Grid.Mvc dll to achieve this function.
First, you need to download Grid.Mvc Nuget packages, you can refer to this link : https://www.nuget.org/packages/Grid.Mvc/
Second,create a controller named PagingSortingController.cs, get the data you need to show from the EntityFramework as below:
using MVC_Cases.Models; using System.Linq; using System.Web.Mvc; namespace MVC_Cases.Controllers { public class PagingSortingController : Controller { public ActionResult Index() { EntityData db = new EntityData(); return View(db.Employees.OrderBy(e => e.EmplId)); } } }Third, create a .cshtml view page on the base of this controller.(Remember to refer files of gridmvc.css and gridmvc.min.js)
@model IEnumerable<MVC_Cases.Models.Employee> @using GridMvc.Html @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <link href="~/Content/Gridmvc.css" rel="stylesheet" /> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/gridmvc.min.js"></script> </head> <body> <div> @Html.Grid(Model).AutoGenerateColumns().Sortable().Filterable().WithPaging(5) //you can change 5 to anyother you want to show pagesize </div> </body> </html>
The result of this work demo:
You can also refer to this link : Creating Grid (Table) With Sorting, Filtering and Paging in Asp.Net MVC
Best Regards,
YongQing.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
All replies
-
User665608656 posted
Hi pathipati,
According to your requirements,I suggest you can use Grid.Mvc dll to achieve this function.
First, you need to download Grid.Mvc Nuget packages, you can refer to this link : https://www.nuget.org/packages/Grid.Mvc/
Second,create a controller named PagingSortingController.cs, get the data you need to show from the EntityFramework as below:
using MVC_Cases.Models; using System.Linq; using System.Web.Mvc; namespace MVC_Cases.Controllers { public class PagingSortingController : Controller { public ActionResult Index() { EntityData db = new EntityData(); return View(db.Employees.OrderBy(e => e.EmplId)); } } }Third, create a .cshtml view page on the base of this controller.(Remember to refer files of gridmvc.css and gridmvc.min.js)
@model IEnumerable<MVC_Cases.Models.Employee> @using GridMvc.Html @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Scripts/jquery-3.3.1.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <link href="~/Content/Gridmvc.css" rel="stylesheet" /> <link href="~/Content/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/gridmvc.min.js"></script> </head> <body> <div> @Html.Grid(Model).AutoGenerateColumns().Sortable().Filterable().WithPaging(5) //you can change 5 to anyother you want to show pagesize </div> </body> </html>
The result of this work demo:
You can also refer to this link : Creating Grid (Table) With Sorting, Filtering and Paging in Asp.Net MVC
Best Regards,
YongQing.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
