Abbas Hamza

Abbas Hamza

  • NA
  • 100
  • 51.1k

json result displayed as a text on my razor view !

Jan 27 2017 10:32 PM
Hi Guys I'm trying to display a Json result back to a view i have seen it done in a few tutorials but not working on min as it only display the json result on the page but not as a view I'm not sure where I'm going wrong
my Action in my control:
  1. public ActionResult Index()  
  2.        {  
  3.   
  4.            myContext.Configuration.ProxyCreationEnabled = false;  
  5.            myContext.Configuration.LazyLoadingEnabled = false;  
  6.            var driver = myContext.Drivers.OrderBy(x => x.firstName).ToList();  
  7.            return Json( driver, JsonRequestBehavior.AllowGet);  
  8.             
  9.        }  
my Razor view where I want to display the result: 
 
 
  1. @{  
  2.     ViewBag.Title = "test";  
  3. }  
  4. @{   
  5.     Layout = "~/Views/Shared/_Layout.cshtml";  
  6. }  
  7. <h2>test</h2>  
  8.   
  9. <h2>Part 1 : Implement jQuery Datatable in ASP.NET MVC</h2>  
  10. <div style="width:90%; margin:0 auto;">  
  11.     <table id="myTable">  
  12.         <thead>  
  13.             <tr>  
  14.                 <th>First Name</th>  
  15.                 <th>surname</th>  
  16.                 <th>BadgeNo</th>  
  17.                   
  18.             </tr>  
  19.         </thead>  
  20.     </table>  
  21. </div>  
  22. <style>  
  23.     tr.even {  
  24.         background-color: #F5F5F5 !important;  
  25.     }  
  26. </style>  
  27.   
  28. @* Load datatable js *@  
  29. @section Scripts{  
  30. <script src="~/Scripts/jquery-3.1.1.min.js"></script>  
  31. <script src="~/Scripts/jquery.validate.min.js"></script>  
  32. <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>  
  33. <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>  
  34. <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>  
  35. }  
  36.     <script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>  
  37.     <script>  
  38.         $(document).ready(function () {  
  39.             $('#myTable').DataTable({  
  40.                 "ajax": {  
  41.                     "url""/Driver/Index",  
  42.                     "type""GET",  
  43.                     "datatype""json"  
  44.                 },  
  45.                 "columns": [  
  46.                         { "data""firstName""autoWidth"true },  
  47.                         { "data""Surname""autoWidth"true },  
  48.                         { "data""BadgeNo""autoWidth"true },  
  49.                           
  50.                 ]  
  51.             });  
  52.         });  
  53.     </script>  
P.s I have a relationship between 2 tables all the tutorials I have watched using a single table
thanks in advance 

Answers (2)