Home > DeveloperSection > Forums > How to use webGrid shoring and paging in mvc
Ankit Singh

Total Post:341

Points:2389
Posted on    December-25-2015 10:11 PM

 .NET Mvc  Mvc3  Mvc2  Mvc4  Mvc5 
Ratings:


 1 Reply(s)
 395  View(s)
Rate this:
I want  to use   shoring and  paging  in mvc How to use this Please Help me.


aditya kumar Patel

Total Post:242

Points:1722
Posted on    December-25-2015 10:20 PM

We can define WebGrid to display data on a web page using an HTML table element. It renders tabular data in a very simple manner with support for custom formatting of columns, paging, sorting.

The main properties in WebGrid are:

  • Source – Where your data comes from. Usually the model passed by the controller action.
  • DefaultSort – Here you can define how the data will be sorted. Just provide the column name here.
  • RowsPerPage – Number of records that will be shown on table.
  • CanPage – Allows paging.
  • CanSort – Allows sorting by clicking on column title.

Index.cshtml

@model IList<ForumMVC.Employee>
@{
    ViewBag.Title = "Index";
}
@{
    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,
    selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");
        grid.Pager(WebGridPagerModes.NextPrevious);}

<h1>Employee List </h1>
 
<div id="gridContent">
    @grid.GetHtml(tableStyle: "webGrid",
            headerStyle: "header",
            alternatingRowStyle: "alt",
            selectedRowStyle: "select",
            columns: grid.Columns(
            grid.Column("Emp_ID", "Emp_ID"),
            grid.Column("Emp_Name", " Emp_Name"),
            grid.Column("Emp_Sal", "Emp_Sal", style: "Emp_Sal"),
            grid.Column("Location", "Location")
     ))
 
</div>
<style type="text/css">
    .webGrid { margin: 4px; border-collapse: collapse; width: 500px;  background-color:#B4CFC3;}
    .header { background-color: #C1D4E6; font-weight: bold; color: #FFF; }
    .webGrid th, .webGrid td { border: 1px solid #C0C0C0; padding: 5px; }
    .alt { background-color: #E4E9F5; color: #000; }
    .gridHead a:hover {text-decoration:underline;}
    .description { width:auto}
    .select{background-color: #71857C}
</style>

HomeController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ForumMVC;
using System.Data.Entity;
namespace ForumMVC.Controllers
{
    public class HomeController : Controller
    {
        forumEntitiesa db = new forumEntitiesa();
        public ActionResult Index()
        {
            List<Employee> Emplst = db.Employee.ToList();
            return View(Emplst);
        }
    }
}


Don't want to miss updates? Please click the below button!

Follow MindStick