Display Data in GridView Using MVC

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


 

Up Next
    Ebook Download
    View all
    Learn
    View all