For displaying data in a GridView using MVC, use the following procedure.

Display grid data

Add the following action in page:
  1. public ActionResult GetDetails()
  2. {
  3. var data = DB.tblStuds.ToList();
  4. return PartialView(data);
  5. }
Add a partial view for this action. Right-Click on the preceding then select Action > Add View then enter the ViewName the same as the action name. Now, check the "Create as a Partial View" checkbox.



Here, we have index.cshtml, where we can see a Show Data Button, for which we have an ajax call. it's for getting stud details.

Index.cshtml
  1. @model projStudentInfo.Models.tblStud
  2. @{
  3. ViewBag.Title = "Index";
  4. Layout = "~/Views/Shared/_Layout.cshtml";
  5. }
  6. <h2>
  7. Student Info</h2>
  8. @using (Html.BeginForm("Save", "Studs", FormMethod.Post))
  9. {
  10. <table>
  11. <tr>
  12. <td>
  13. Name
  14. </td>
  15. <td>@Html.TextBoxFor(c => c.stud_name)
  16. </td>
  17. </tr>
  18. <tr>
  19. <td>
  20. Age
  21. </td>
  22. <td>@Html.TextBoxFor(c => c.stud_age)
  23. </td>
  24. </tr>
  25. <tr>
  26. <td>
  27. <input type="submit" name="submit" value="Save" />
  28. </td>
  29. <td>
  30. <input type="button" name="submit" value="Show Data" id="btnShow" />
  31. </td>
  32. </tr>
  33. </table>
  34. }
  35. <div id="dvShow"></div>
  36. <script>
  37. /* we have ajax call for calling GetDetails which will return html data in vHtml variable */
  38. $(document).ready(function () {
  39. $("#btnShow").click(function () {
  40. $.ajax({
  41. url: '@Url.Action("GetDetails","Studs")',
  42. type: 'post',
  43. success: function (vHtml) {
  44. $("#dvShow").html("");
  45. $("#dvShow").html(vHtml);
  46. }
  47. });
  48. });
  49. });
  50. </script>
GetDetails.cshtml (partialview)
  1. @model IEnumerable<projStudentInfo.Models.tblStud>
  2. <table border="0" cellpadding="0" cellspacing="0" id="tblStud">
  3. <thead>
  4. <tr>
  5. <th>
  6. Id
  7. </th>
  8. <th>
  9. Student Name
  10. </th>
  11. <th>
  12. Age
  13. </th>
  14. </tr>
  15. </thead>
  16. @foreach (var item in Model)
  17. {
  18. <tr>
  19. <td>@item.studid
  20. </td>
  21. <td>@item.stud_name
  22. </td>
  23. <td>@item.stud_age
  24. </td>
  25. </tr>
  26. }
  27. </table>
  28. <style>
  29. #tblStud td {padding:5px;}
  30. #tblStud th {background:#aea;}
  31. </style>
Final Screen