forum

Home / DeveloperSection / Forums / How to use webGrid shoring and paging in mvc

Ask Question

How to use webGrid shoring and paging in mvc

Anonymous User213725-Dec-2015
I want  to use   shoring and  paging  in mvc How to use this Please Help me.
.net mvc  mvc3  mvc2  mvc4  mvc5 
Updated on 03-Jul-2023
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

2 Answers

Aryan Kumar

Aryan Kumar

03-Jul-2023

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

@{
    // 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

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

answer 415872512102025

Liked By