---
title: "How to implement a WebGrid in ASP.NET MVC"  
description: "How to implement a WebGrid in ASP.NET MVC"  
author: "Anupam Mishra"  
published: 2016-03-31  
updated: 2016-04-01  
canonical: https://www.mindstick.com/forum/34092/how-to-implement-a-webgrid-in-asp-dot-net-mvc  
category: "asp.net mvc"  
tags: ["c#", "asp.net", "ajax", "asp.net mvc"]  
reading_time: 6 minutes  

---

# How to implement a WebGrid in ASP.NET MVC

Hi Everyone,\
I want to use WebGrid to [display data](https://www.mindstick.com/forum/160249/what-is-the-role-of-the-display-data-annotation-to-display-name-for-a-model-property-in-dot-net-core) on a [web page](https://www.mindstick.com/forum/718/sql-server-report-alignment-to-center-of-web-page) using an HTML [table](https://www.mindstick.com/articles/43918/how-to-design-table-using-bootstrap) element Please It also be demonstrate a [custom](https://www.mindstick.com/blog/12298/use-custom-writing-services-to-get-through-the-finals) formatting of columns, [paging](https://www.mindstick.com/articles/335974/retrieve-data-from-restful-api-and-add-paging-in-knockout-js), [sorting](https://www.mindstick.com/articles/1581/sorting-list-with-side-bar), and [asynchronous](https://www.mindstick.com/blog/178/synchronous-and-asynchronous-command-execution-in-c-sharp-dot-net) [updates](https://yourviews.mindstick.com/view/85235/global-efforts-to-combat-climate-change-updates-and-initiatives) via AJAX.\
\
Thank you.

## Replies

### Reply by Sachin Singh

Hi Anupam,

You want to use WebGrid to display [data](https://www.mindstick.com/articles/13050/salesforce-aiming-to-dominate-predictive-analytics-with-data-science) on a web [page](https://www.mindstick.com/articles/13031/why-to-make-a-wikipedia-page) using an HTML table element

Please It also be demonstrate a custom formatting of columns, paging, sorting, and asynchronous updates via AJAX.

Here, we have taken a "Student" model and i want to display all Student in WebGrid with a custom formatting of columns, paging, sorting, and asynchronous updates via AJAX.

## \

## Here, My Student Controller:

\

```
public ActionResult StudentGrid()
        {
           List<Student> lstStudentModel = new List<Student>();
           List<Student> lstStudentMasters = db.Students.ToList();
            lstStudentMasters.ForEach(x =>
            {
               Student  stuModel = new Student();
                stuModel.FirstName =x.FirstName;
                stuModel.LastName = x.LastName;
                lstStudentModel.Add(stuModel);
            });
           return View(lstStudentModel);
        }

        [HttpPost]
       public ActionResult StudentGrid(string studentName)
        {
           List<Student> lstStudentModel = new List<Student>();
           List<Student> lstStudentMasters = db.Students.Where(x =>

                             x.FirstName.Contains(studentName)).ToList();
            lstStudentMasters.ForEach(x =>
            {
               Student stuModel = new Student();
                stuModel.FirstName =x.FirstName;
                stuModel.LastName = x.LastName;
                lstStudentModel.Add(stuModel);
            });
           if (lstStudentModel.Count > 0)
            {
               return View(lstStudentModel);
            }
           else
            {
               return Json("No Record Found");
            }
        }
```

\

Now My StudentGrid View:

```
@{
    ViewBag.Title ="StudentGrid";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" />
<div id="dialog-alert" style="display: none">
    <p>
       Record Found
   </p>
</div>
<div id="grid">
    <table width="100%">
        <tr>
            <td>
                <table>
                    <tr>
                        <td>Search By Name
                       </td>
                        <td>
                            <input type="text" id="txtName" />
                        </td>
                        <td>
                            <input type="button" id="bttnSearch" value="Search" />
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                @{
                   var grid = new WebGrid(Model, canPage: true, rowsPerPage: 4,
                    selectionFieldName:"selectedRow",

                        ajaxUpdateContainerId: "gridContent");
                    grid.Pager(WebGridPagerModes.All);}
@grid.GetHtml(tableStyle: "webGrid",
headerStyle:"header",
alternatingRowStyle:"alt",
selectedRowStyle:"select",
columns:

grid.Columns(grid.Column("FirstName", " FirstName"),grid.Column("LastName", "LastName")))
           </td>
        </tr>
    </table>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#bttnSearch').click(function () {
           var stuName = $('#txtName').attr('value');
            $.ajax({
                type:"post",
                url:"/Student/StudentGrid",
                data: { studentName: $('#txtName').attr('value') },
                datatype:"json",
                traditional:true,
                success:function (data) {
                   // debugger
                    if (data == "No Record Found")

                    {
                        $("#dialog-alert").dialog('open');
                    }
                   else {
                        $('#gridContent').html(data);
                        $('#txtName').val(stuName);
                    }
                }
            });
        });
    });
    $(document).ready(function () {
       var url = "";
        $("#dialog-alert").dialog({
            autoOpen:true,
            resizable:true,
            height: 100,
            width: 350,
            show: { effect:'drop', direction: "up" },
            modal:true,
            draggable:true,
            open:function (event, ui) {
                $(".ui-dialog-titlebar-close").hide();
            },
            buttons: {
               "OK": function () {
                    $(this).dialog("close");
                }
            }
        });
    });
</script>
```

## \

## Output:

![How to implement a WebGrid in ASP.NET MVC](https://www.mindstick.com/mindstickforums/56af92b2-1eed-4558-912f-454b392775e4/images/7ce1a4ad-e3ad-4df0-9451-9b92f63cafdd.png)\

\

For Searching Student Name:

\

![How to implement a WebGrid in ASP.NET MVC](https://www.mindstick.com/mindstickforums/56af92b2-1eed-4558-912f-454b392775e4/images/e39b475b-64e3-4107-bcea-53b7ff8e26fa.png)\


---

Original Source: https://www.mindstick.com/forum/34092/how-to-implement-a-webgrid-in-asp-dot-net-mvc

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.