JQuery GridView using ASP.NET MVC

  1. Column Name        Data Type         Max Length    
  2.     
  3. CustID               int             NULL    
  4. CompName             nvarchar         50    
  5. ContactName          nvarchar         50    
  6. Address              nvarchar         50    
  7. City                 nvarchar         50    
  8. PostalCode           nvarchar         50    
  9. Country              nvarchar         50    
  10. Phone                nvarchar         50   

Home Controller

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using MVCDATATABLE.Controllers;  
  7. namespace MVCDATATABLE.Controllers  
  8. {  
  9.     public class HomeController: Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             return View();  
  14.         }  
  15.         public ActionResult LoadData()  
  16.         {  
  17.             using(CustomerDBContext dc = new CustomerDBContext())  
  18.             {  
  19.                 var data = dc.Tbl_Customer.OrderBy(a => a.ContactName)  
  20.                     .ToList();  
  21.                 return Json(new  
  22.                 {  
  23.                     data = data  
  24.                 }, JsonRequestBehavior.AllowGet);  
  25.             }  
  26.         }  
  27.     }  
  28. }  
  1.  \\ Jquery Gridview code  
  2.  for index.cshtml  
  3.  @  
  4.  {  
  5.      ViewBag.Title = "Index";  
  6.  } < h2 > < marquee behavior = "scroll"  
  7.  direction = "left" > < b > Customer Record < /b></marquee > < /h2>   < div style = "width: 92%; margin: 0 auto;" > < table id = "myTable" > < thead > < tr > < th > Company name < /th>   < th > Customer name < /th>   < th > Address < /th>   < th > City < /th>   < th > Postal Code < /th>   < th > Country < /th>   < th > Contact No. < /th>   < /tr>   < /thead>   < /table>   < /div>   < style > tr.even  
  8.      {  
  9.          background - color: #88cc00 !important;    
  10. }    
  11. </style>    
  12.     
  13. <link href= "//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css"  
  14.          rel = "stylesheet" / > @section Scripts  
  15.          { < script src = "//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js" > < /script>   < script > $(document)  
  16.                  .ready(function ()  
  17.                  {  
  18.                      $('#myTable')  
  19.                          .DataTable(  
  20.                          {  
  21.                              "ajax":  
  22.                              {  
  23.                                  "url": "/Home/LoadData",  
  24.                                  "type": "Get",  
  25.                                  "datatype": "json"  
  26.                              },  
  27.                              "columns": [  
  28.                              {  
  29.                                  "data": "CompName",  
  30.                                  "autowidth": true  
  31.                              },  
  32.                              {  
  33.                                  "data": "ContactName",  
  34.                                  "autowidth": true  
  35.                              },  
  36.                              {  
  37.                                  "data": "Address",  
  38.                                  "autowidth": true  
  39.                              },  
  40.                              {  
  41.                                  "data": "City",  
  42.                                  "autowidth": true  
  43.                              },  
  44.                              {  
  45.                                  "data": "PostalCode",  
  46.                                  "autowidth": true  
  47.                              },  
  48.                              {  
  49.                                  "data": "Country",  
  50.                                  "autowidth": true  
  51.                              },  
  52.                              {  
  53.                                  "data": "Phone",  
  54.                                  "autowidth": true  
  55.                              }]  
  56.                          });  
  57.                  }); < /script>    
  58.         }