HOW TO IMPLEMENT A WEBGRID IN ASP.NET MVC

Anupam Mishra

Total Post:135

Points:949
Posted by  Anupam Mishra
 958  View(s)
Ratings:
Rate this:
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.
  1. Manoj Bhatt

    Post:154

    Points:1086
    Re: How to implement a WebGrid in ASP.NET MVC

    Hi Everyone,


    Please can anyone give me a complete code.


    Thank you.

     

      Modified On Apr-01-2016 12:43:51 AM
  1. Sachin Singh

    Post:26

    Points:182
    Re: How to implement a WebGrid in ASP.NET MVC

    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

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!