How to implement a WebGrid in ASP.NET MVC

Hi Everyone,

I want to use WebGrid to display data on a web page using an HTML table element 
Please It also be demonstrate a custom formatting of columns, paging, sorting, and asynchronous updates via AJAX.

Thank you.
Last updated:4/1/2016 12:45:23 AM

1 Answers

Sachin Singh
Sachin Singh

Hi Anupam,

 You want to use WebGrid to display data on a web 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:



For Searching Student Name:



 

 

Answer