---
title: "How to use  WebGrid in mvc"  
description: "How to use  WebGrid in mvc"  
author: "Anonymous User"  
published: 2015-12-25  
updated: 2023-07-03  
canonical: https://www.mindstick.com/forum/33786/how-to-use-webgrid-in-mvc  
category: ".net"  
tags: ["c#", ".net", "mvc", "mvc3", "mvc2", "mvc4", "mvc5"]  
reading_time: 2 minutes  

---

# How to use  WebGrid in mvc

I want to use [WebGrid](https://www.mindstick.com/forum/34092/how-to-implement-a-webgrid-in-asp-dot-net-mvc) in [mvc](https://www.mindstick.com/forum/155803/define-cache-profile-in-mvc) how to do this please help me.\

## Replies

### Reply by Aryan Kumar

Sure, here are the steps on how to use WebGrid in MVC:

1. Add the Web Grid library to your ASP.NET project.
2. Create a view that will display the Web Grid.
3. In the view, use the Web Grid to display the data.
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();
}

<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
        });
    });
    </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 `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.

Here are some of the features of WebGrid:

- Paging: WebGrid can be paginated to display a limited number of records at a time.
- Sorting: WebGrid can be sorted by any column.
- Filtering: WebGrid can be filtered to display only the records that match the specified criteria.
- Editing: WebGrid can be used to edit the data in the grid.
- Deleting: WebGrid can be used to delete the data in the grid.

### Reply by Anonymous User

WebGrid is most powerful tools to list records from database in web application. Like ASP.NET Web Forms GridView, DataList, ASP.NET MVC didn't had any built in data controls. WebGrid that does almost all work of ASP.NET Web Form GridView and it is simple enough too.

**Index.cshtml**

```
@model IList<ForumMVC.Employee>@{    ViewBag.Title = "Index";} @{  var grid = new WebGrid(Model); }<h1>Employee List </h1> <div id="grid"> @grid.GetHtml()</div>  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    {        forumEntities db = new forumEntities();        public ActionResult Index()        {            List<Employee> Emplst = db.Employee.ToList();            return View(Emplst);        }    }}
```

![How to use  WebGrid in mvc](https://www.mindstick.com/mindstickforums/8cb2bd17-79eb-4235-abb2-469acdffea53/images/3d2bd445-af7b-4d2f-973b-854192a7b1d6.png)


---

Original Source: https://www.mindstick.com/forum/33786/how-to-use-webgrid-in-mvc

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
