--- title: "How to use webGrid shoring and paging in mvc" description: "How to use webGrid shoring and paging in mvc" author: "Anonymous User" published: 2015-12-25 updated: 2023-07-03 canonical: https://www.mindstick.com/forum/33787/how-to-use-webgrid-shoring-and-paging-in-mvc category: ".net" tags: ["mvc", "mvc3", "mvc2", "mvc4", "mvc5"] reading_time: 3 minutes --- # How to use webGrid shoring and paging in mvc I want to use shoring and [paging](https://www.mindstick.com/articles/335974/retrieve-data-from-restful-api-and-add-paging-in-knockout-js) in [mvc](https://www.mindstick.com/forum/155803/define-cache-profile-in-mvc) How to use this Please Help me. ## Replies ### Reply by Aryan Kumar Sure, here are the steps on how to use Web Grid shoring and paging in MVC: 1. Add the Web Grid library to your ASP.NET project. 1. Create a view that will display the Web Grid. 2. In the view, use the Web Grid to display the data. 3. Set the paging options for the Web Grid. 4. Bind the Web Grid to a model. Here is an example of the code: HTML ```plaintext @{ // Get the data for the Web Grid var data = GetData(); } Web Grid

Web Grid

``` This code will add the Web Grid library to your ASP.NET project. The `GetData` function will get the data for the Web Grid. The `web-grid` element will be used to create the Web Grid. The `dataSource` attribute of the `web-grid` element will be bound to the data returned by the `GetData` function. The `pageSize` attribute of the `web-grid` element will set the number of records to be displayed per page. The `web-grid` element will be bound to the `webGrid` method of the `Web Grid` library. The `webGrid` method will handle the events of the Web Grid. ### Reply by Anonymous User 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@{    ViewBag.Title = "Index";}@{    var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,     selectionFieldName: "selectedRow",ajaxUpdateContainerId: "gridContent");        grid.Pager(WebGridPagerModes.NextPrevious);}

Employee List

 
    @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")     ))  
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 Emplst = db.Employee.ToList();            return View(Emplst);        }    }} ``` ![How to use webGrid shoring and paging in mvc](https://www.mindstick.com/mindstickforums/ba451bf8-6265-4593-b948-716bd992fc49/images/a55fea24-3f38-4db8-9017-e02e5b525bd2.png) --- Original Source: https://www.mindstick.com/forum/33787/how-to-use-webgrid-shoring-and-paging-in-mvc Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.