WebGrid in ASP.Net MVC

Introduction

How to Create a WebGrid

First of all, we want to show some data in a grid. So we have a StudentMaster table.

And based on the preceding table, we need to create a Model, so let's create StudentModel.cs.

StudentModel.cs

• Now create a school.edmx file
• Select Add New Item then select ADO.Net Entity Model
  
  
• Click the Add button.
• Now click Next in the wizard and then Finish.
• Add a new Controller
  
  StudentController.cs
  
  1. using MvcDemoApplication.Models;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.Mvc;
  7. using System.Web.UI.WebControls;
  8. using System.IO;
  9. using System.Web.UI;
  11. namespace MvcDemoApplication.Controllers
  12. {
  13. public class StudentController : Controller
  14. {
  15. //
  16. // GET: /Student/
  17. SchoolEntities1 schoolEntity = new SchoolEntities1();
  18. public ActionResult StudentGrid()
  19. {
  20. List<StudentModel> lstStudentModel = new List<StudentModel>();
  21. List<StudentMaster> lstStudentMasters = schoolEntity.StudentMasters.Where(x => x.IsActive == true).ToList();
  22. lstStudentMasters.ForEach(x =>
  23. {
  24. StudentModel stuModel = new StudentModel();
  25. stuModel.Name = x.Name;
  26. stuModel.Phone = x.Phone;
  27. stuModel.Address = x.Address;
  28. stuModel.Class = x.Class;
  29. lstStudentModel.Add(stuModel);
  30. });
  31. return View(lstStudentModel);
  32. }
  34. [HttpPost]
  35. public ActionResult StudentGrid(string studentName)
  36. {
  37. List<StudentModel> lstStudentModel = new List<StudentModel>();
  38. List<StudentMaster> lstStudentMasters = schoolEntity.StudentMasters.Where(x => x.Name.Contains(studentName)).ToList();
  39. lstStudentMasters.ForEach(x =>
  40. {
  41. StudentModel stuModel = new StudentModel();
  42. stuModel.Name = x.Name;
  43. stuModel.Phone = x.Phone;
  44. stuModel.Address = x.Address;
  45. stuModel.Class = x.Class;
  46. lstStudentModel.Add(stuModel);
  47. });
  48. if (lstStudentModel.Count > 0)
  49. {
  50. return View(lstStudentModel);
  51. }
  52. else
  53. {
  54. return Json("No Record Found");
  55. }
  56. }
  57. }
  58. }
• Add the View StudentGrid.cshtml
  
  1. @{
  2. ViewBag.Title = "StudentGrid";
  3. }
  4. <script type="text/javascript">
  6. $(document).ready(function () {
  7. $('#bttnSearch').click(function () {
  8. var stuName = $('#txtName').attr('value');
  9. $.ajax({
  10. type: "post",
  11. url: "/Student/StudentGrid",
  12. data: { studentName: $('#txtName').attr('value') },
  13. datatype: "json",
  14. traditional: true,
  15. success: function (data) {
  16. // debugger
  17. if (data == "No Record Found") {
  18. alert('No Record Found');
  19. }
  20. else {
  21. $('#gridContent').html(data);
  22. $('#txtName').val(stuName);
  23. }
  24. }
  25. });
  26. });
  27. });
  28. </script>
  30. <div id="grid">
  31. <table width="100%">
  32. <tr>
  33. <td>
  34. <table>
  35. <tr>
  36. <td>
  37. Name
  38. </td>
  39. <td>
  40. <input type="text" id="txtName" />
  41. </td>
  42. <td>
  43. <input type="button" id="bttnSearch" value="Search" />
  44. </td>
  45. </tr>
  46. </table>
  47. </td>
  48. </tr>
  49. <tr>
  50. <td>
  52. @{
  53. var grid = new WebGrid(Model, canPage: true, rowsPerPage: 5,
  54. selectionFieldName: "selectedRow", ajaxUpdateContainerId: "gridContent");
  55. grid.Pager(WebGridPagerModes.All);}
  58. @grid.GetHtml(tableStyle: "webGrid",
  59. headerStyle: "header",
  60. alternatingRowStyle: "alt",
  61. selectedRowStyle: "select",
  62. columns: grid.Columns(
  63. grid.Column("Name", " Name"),
  64. grid.Column("Phone", "Phone"),
  65. grid.Column("Address", "Address"),
  66. grid.Column("Class", "Class")
  67. ))
  69. </td>
  70. </tr>
  71. </table>
  72. </div>