Introduction:

In this article we will explain how to use WebGrid in MVC or how to create WebGrid in MVC or how to user WebGrid shorting and paging in MVC with example.

Description:

In MVC We can define WebGrid to display data on a web page using an HTML table element. It renders tabular data in a very simple way with support for custom formatting of columns, paging, sorting, and asynchronous updates via AJAX. It provides some features and styles which shown below.

WebGrid Constructed Parameters used in this view :

Source : Used to render Data into table. This is List<dynamic> type, i.e. source: Model

canSort : used to enable or disable sorting data. default is enabled, this is bool type i.e. canSort : true

canPage : used to enable or disable paging data. default is enabled, this is bool type i.e. canPage : true

rowsPerPage : Used to control no.of rows per page to be rendered. Default is 10, this is Int type i.e. rowsPerPage:10

defaultSort : used to specify the default column to sort. This is string type i.e. defaultSort : "EmployeeID"

 

WebGrid GetHtml Parameters used in this View :

tableStyle : Used to define a table class style for styling. This is string type, i.e. tableStyle: "webGrid"

headerStyle : Used to define a header class style for styling. This is string type, i.e. headerStyle: "header"

alternatingRowStyle: Used to define  row class for styling even rows. This is string type i.e alternatingRowStyle:"alt" (for odd rows we have to use rowStyle parameter)

 

Now it's time to start coding! To start using the WebGrid web helper.

 

Controller:

using MVC_Tutorials.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVC_Tutorials.Controllers
{
    public class HomeController : Controller
    {
 
        public ActionResult User()
        {
            ArticleDBEntities db = new ArticleDBEntities();
            var data = db.Employee.ToList();
            return View(data);
        }
                
    }     }

 

Above code use controller to get all employee records from Employee table by using entityframework.


UserView.cshtml

@model
List<
MVC_Tutorials.Employee>
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>UserList</title>  
    <style>
        .webGrid {margin:4px;border-collapse:collapse;width:300px;}
        .header{background-color:#e8e8e8; font-weight:bold;color:#fff;}
        .webGrid th, .webGrid td{border: 1px solid #c0c0c0; padding:5px;}
        .alt {
            background-color: #e8e8e8;
            color: #000;
        }           </style>
</head>
<body>
    <div class="container">
         @{
             var grid = new WebGrid(source: Model, canPage: true, rowsPerPage: 10);
             grid.Pager(WebGridPagerModes.NextPrevious);
             @grid.GetHtml(tableStyle:"webGrid"
             ,headerStyle:"header",
             alternatingRowStyle:"alt",
             columns:grid.Columns(
                      grid.Column("EmployeeID"),
                      grid.Column("EmployeeName",canSort:true),
                               grid.Column("ContactNo", canSort: true),
                               grid.Column("EmailID", canSort: true)
                      )
            )
         }
    </div>
</body>
</html>

 

In above code example we create webgrid and bind employee records with sorting and paging.

 

 Now, press F5 and run your code.



I hope this article will help to you.

1 comments

  1. good
    7/20/2017 7:39:44 PM

    good



Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like