Home > DeveloperSection > Forums > How to implement a WebGrid in ASP.NET MVC
Anupam Mishra

Total Post:135

Points:949
Posted on    March-31-2016 12:29 AM

 ASP.NET MVC C#  ASP.Net  AJAX  ASP.NET MVC 
Ratings:


 1 Reply(s)
 431  View(s)
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.


Manoj Bhatt
Manoj Bhatt

Total Post:153

Points:1079
Posted on    April-01-2016 12:37 AM

Hi Everyone,


Please can anyone give me a complete code.


Thank you.

 


Modified On Apr-01-2016 12:43:51 AM

Sachin Singh
Sachin Singh

Total Post:26

Points:182
Posted on    April-01-2016 12:45 AM

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:



 

 


Don't want to miss updates? Please click the below button!

Follow MindStick