How to use webGrid shoring and paging in mvc

Anonymous User 2742 25 Dec 2015

I want to use shoring and paging in mvc How to use this Please Help me.

Anonymous User

Other

I am a content writter !

2 Answers

Aryan Kumar 03 Jul 2023

Sure, here are the steps on how to use Web Grid shoring and paging in MVC:

Add the Web Grid library to your ASP.NET project.

Create a view that will display the Web Grid.
In the view, use the Web Grid to display the data.
Set the paging options for the Web Grid.
Bind the Web Grid to a model.

Here is an example of the code:

HTML

@{
    // Get the data for the Web Grid
    var data = GetData();
}

<html>
<head>
    <title>Web Grid</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/aspnet-webgrid/4.0.5/webgrid.min.js"></script>
</head>
<body>
    <h1>Web Grid</h1>

    <div id="web-grid">
    </div>

    <script>
    $(document).ready(function() {
        // Create the Web Grid
        var webGrid = $("#web-grid").webGrid({
            dataSource: data,
            pageSize: 10
        });
    });
    </script>
</body>
</html>

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.

Anonymous User 25 Dec 2015

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);
        }
    }
}

forum

How to use webGrid shoring and paging in mvc

Can you answer this question?

2 Answers