Add below action in page

  1. public ActionResult GetDetails()
  3. {
  4. var data = DB.tblStuds.ToList();
  5. return PartialView(data);
  6. }

Add partial view for this action. RightClick on above Action > add View > Enter ViewName Same as action name > tick Create Partial View


Now we have index.cshtml where we have Show Data Button for which I have ajax call for getting stud details.

Index.cshtml

  1. @model projStudentInfo.Models.tblStud
  3. @ {
  5. ViewBag.Title = "Index";
  7. Layout = "~/Views/Shared/_Layout.cshtml";
  8. }
  10. < h2 >
  12. Student Info < /h2>
  14. @using (Html.BeginForm("Save", "Studs", FormMethod.Post))
  16. {
  18. <table>
  20. <tr>
  22. <td>
  24. Name
  26. </td >
  28. < td > @Html.TextBoxFor(c = > c.stud_name)
  30. < /td>
  32. </tr >
  34. < tr >
  36. < td >
  38. Age
  40. < /td>
  42. <td>@Html.TextBoxFor(c => c.stud_age)
  44. </td >
  46. < /tr>
  48. <tr>
  50. <td>
  52. <input type="submit" name="submit" value="Save" / >
  54. < /td>
  56. <td>
  58. <input type="button" name="submit" value="Show Data" id="btnShow" / >
  60. < /td>
  62. </tr >
  64. < /table>
  66. }
  68. <div id="dvShow"></div >
  70. < script >
  72. /* we have ajax call for calling GetDetails which will return html data in vHtml variable */
  74. $(document).ready(function() {
  76. $("#btnShow").click(function() {
  78. $.ajax({
  80. url: '@Url.Action("GetDetails","Studs")',
  82. type: 'post',
  84. success: function(vHtml) {
  86. $("#dvShow").html("");
  88. $("#dvShow").html(vHtml);
  89. }
  91. });
  93. });
  95. });
  97. < /script>
  99. GetDetails.cshtml (partialview)
  101. @model IEnumerable<projStudentInfo.Models.tblStud>
  103. <table border="0" cellpadding="0" cellspacing="0" id="tblStud">
  105. <thead>
  107. <tr>
  109. <th>
  111. Id
  113. </th >
  115. < th >
  117. Student Name
  119. < /th>
  121. <th>
  123. Age
  125. </th >
  127. < /tr>
  129. </thead >
  131. @foreach(var item in Model)
  133. {
  135. < tr >
  137. < td > @item.studid
  139. < /td>
  141. <td>@item.stud_name
  143. </td >
  145. < td > @item.stud_age
  147. < /td>
  149. </tr >
  151. }
  153. < /table>
  155. <style>
  157. #tblStud td {padding:5px;}
  159. #tblStud th {background:#aea;}
  161. </style >

Final Screen