MVC WebGrid Custom paging With Page no and Shorting Data Using C#.Net

In this article I will show you how you can how to bind data and add custom paging with page no and shoring of  webgrid by using entityframework  in asp.net MVC using C#.Net. In this I will fetch data from data base by using linq query in c#.net and lenda expression.  In this I have used asp.net, mvc, c#.net, webgrid, entityframework, lenda expression and linq query.

Some of my previous articles are as follows: How To Disable Sorting in Asp.net MVC Webgrid, How to Bind Data to Webgrid in ASP.net MVC Using C#.Net, Code to Select All Checkbox in GridView in Asp.Net Using jQuery,              Highlight GridView Row on Mouseover Using CSS in Asp.Net C#.Net, Drag Drop Cells in GridView Control Using Asp.net C# and jQuery, Track and Display Error Message in Asp.Net MVC Application Using C#.Net, Simple Login From in Asp.Net MVC Using C#.Net, Bind and Retrieve ListBox Selected Value in MVC Using C#.Net, Bind DropDownList Using Entity Framework in ASP.Net MVC Using C#.

So for this article first we will create our table to add data

After creating table we will create a mvc application. After creating mvc application we will create model

using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MVCDemo.Models {     public class StudentDetails     {         public List<StudentDetail> Studentmodel { get; set; }     }     public class StudentDetail     {         public int Id { get; set; }         public string Name { get; set; }         public string Class { get; set; }         public string Section { get; set; }         public string Address { get; set; }     } }

After creating model add the table in your entity file(.edmx)

Now we will come to our controller end and add the below code in your controller.

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MVCDemo.Models; namespace MVCDemo.Controllers {     public class HomeController : Controller     {         //         // GET: /UserLogin/         public ActionResult Index()         {             StudentDetails _objuserloginmodel = new StudentDetails();             List<StudentDetail> _objStudent = new List<StudentDetail>();             _objStudent = GetStudentList();             _objuserloginmodel.Studentmodel = _objStudent;             return View(_objuserloginmodel);         }         public List<StudentDetail> GetStudentList()         {             List<StudentDetail> objStudent = new List<StudentDetail>();             /*Create instance of entity model*/             NorthwindEntities objentity = new NorthwindEntities();             /*Getting data from database for user validation*/             var _objuserdetail = (from data in objentity.Students                                   select data);             foreach (var item in _objuserdetail)             {                 objStudent.Add(new StudentDetail { Id = item.Id, Name = item.Name, Section = item.Section, Class = item.Class, Address = item.Address });             }             return objStudent;         }         } }

In above code I have first created instance for the entity class. After that we have used linq query to access the value from table. After that I have assign it to model. Now we have done at controller end. We will create view and add the below code in our view.

@model MVCDemo.Models.StudentDetails @{     ViewBag.Title = "MVC WebGrid Custom paging With Page no and Shorting Data Using C#"; } <b>Paging and Shorting in Asp.Net MVC WebGrid</b> <style type="text/css"> table {        font-family: verdana,arial,sans-serif;        font-size:11px;        color:#333333;        border-width: 1px;        border-color: #666666;        border-collapse: collapse; } table th {        border-width: 1px;        padding: 8px;        border-style: solid;        border-color: #666666;        background-color: #dedede; } table td {        border-width: 1px;        padding: 8px;        border-style: solid;        border-color: #666666;        background-color: #ffffff; } </style> @using (@Html.BeginForm("Index", "Home")) {     var grid = new WebGrid(Model.Studentmodel,canSort:true,canPage:true,rowsPerPage:5);     <div>         @grid.GetHtml(columns:             grid.Columns             (                 grid.Column("ID", "Stud ID"),                 grid.Column("Name", "Stud Name"),                 grid.Column("Class", "Class"),                 grid.Column("Section", "Section"),                 grid.Column("Address", "Address")              ), mode: WebGridPagerModes.Numeric)     </div> }

Just check the below code

var grid = new WebGrid(Model.Studentmodel,canSort:true,canPage:true,rowsPerPage:5);

In this code we have canSort:true,canPage:true,rowsPerPage:5 . CanShort will used for allowing shorting the recodes and canpage allow for paging. Now run the page to view the output

DOWNLOAD