How to use webGrid shoring and paging in mvc

Question

How to use webGrid  shoring and  paging  in mvc

Aryan Kumar · Answer

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.
and 
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();
}
andlt;html>
andlt;head>
    andlt;title>Web Gridandlt;/title>
    andlt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">andlt;/script>
    andlt;script src="https://cdnjs.cloudflare.com/ajax/libs/aspnet-webgrid/4.0.5/webgrid.min.js">andlt;/script>
andlt;/head>
andlt;body>
    andlt;h1>Web Gridandlt;/h1>
    andlt;div id="web-grid">
    andlt;/div>
    andlt;script>
    $(document).ready(function() {
        // Create the Web Grid
        var webGrid = $("#web-grid").webGrid({
            dataSource: data,
            pageSize: 10
        });
    });
    andlt;/script>
andlt;/body>
andlt;/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 · Answer

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

Anonymous User

Can you answer this question?

2 Answers

Liked By