forum

Home / DeveloperSection / Forums / How to implement a WebGrid in ASP.NET MVC

Ask Question

How to implement a WebGrid in ASP.NET MVC

Anupam Mishra237131-Mar-2016
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.
asp.net mvcc# asp.net ajax asp.net mvc 
Updated on 01-Apr-2016
Anupam Mishra

Anupam Mishra

Follow

Can you answer this question?

Answer

1 Answers

Sachin Singh

Sachin Singh

01-Apr-2016

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:

answer 517700104124523


For Searching Student Name:


answer 517700104124523

 

 

Liked By