Using jQuery DataTable With ASP.NET MVC Client Side

Client side work is very simple. We will fetch the data from database and handover to table.
 
Client side datatable works fast with less data (Less then 10000 records) but this will perform very slowly if datas (records) are in Lakhs. We have to decide for Client Side or Server Side as per data or project requirement. For client side datatable implementation there are  very few lines of code required to start working.
 
For Server side working we have to set the parameters and follow some coding instructions settings given by DataTable team.
 
You can visit here.
 

DataTable site Home Page

 
Using jQuery DataTable With ASP.NET MVC Client Side
 
As you can see above in home page of datatable they did this with three steps. 
 

Client Side Implementation of jQuery Data Table

 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Create a Asp.Net MVC Web Application called “ClientSideDataTable”.
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Steps Description
  1. Select Empty Template
  2. Checked MVC checkbox.
  3. Select No Authentication
  4. Press OK button
Now we are going to add ADO.NET entity Data model.
 
Right click on project select ADD --> NEW ITEM.
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
In  the following image you have to select:
  1. Server Name
  2. Verify connection.
Using jQuery DataTable With ASP.NET MVC Client Side
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
In the above image I selected EntityFramework 6.0
 
In the following image you have to select tables which you want to insert/add into EDMX.
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
In the above image you can see tblFriend is added successfully.
 
Now we are going to add Controller.
 
Right click on CONTROLLERS folder select ADD --> NEW ITEM.
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Using jQuery DataTable With ASP.NET MVC Client Side
  1. // GET: Friend List  
  2. public ActionResult Index()  
  3. {  
  4.     //EntityFramework Class create "db" instance  
  5.     MbkTestEntities db = new MbkTestEntities();  
  6.       
  7.     //Generating Friend List   
  8.     var friendlist = db.tblFriends.OrderBy (x => x.FriendName).ToList();  
  9.       
  10.     return View(friendlist);  
  11. }  
Using jQuery DataTable With ASP.NET MVC Client Side
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
After auto code is generated we have to add <thead> and <tbody> to tag to <table> structure.
 
By-default asp.net mvc will not add <thead> and <tbody> tag to table structure.
 
For more details visit here.
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Now attach CDN files of DataTables to Index.cshtml
  1. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />  
  2. <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>   
Now go to _layout.cshtml
 
By default in layout.cshtml jquery link is added at bottom, you have to move the jquery link to HEAD section of _layout.cshtml.
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
Source Code - FriendController.cs Code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6.   
  7. namespace ClientSideDataTable.Controllers  
  8. {  
  9.     public class FriendController : Controller  
  10.     {  
  11.         // GET: Friend List  
  12.         public ActionResult Index()  
  13.         {  
  14.             //EntityFramework Class create "db" instance  
  15.             MbkTestEntities db = new MbkTestEntities();  
  16.               
  17.             //Generating Friend List   
  18.             var friendlist = db.tblFriends.OrderBy (x => x.FriendName).ToList();  
  19.               
  20.             return View(friendlist);  
  21.         }  
  22.     }  
  23. }  
Friend.cshtml Code
  1. @model IEnumerable<ClientSideDataTable.tblFriend>  
  2.   
  3. @{  
  4.     ViewBag.Title = "Index";  
  5. }  
  6. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />  
  7. <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>   
  8.   
  9. <h2>Index</h2>  
  10.   
  11. <p>  
  12.     @Html.ActionLink("Create New""Create")  
  13. </p>  
  14. <table id="myTable" class="table">  
  15.     <thead>  
  16.         <tr>  
  17.             <th>  
  18.                 @Html.DisplayNameFor(model => model.FriendID)  
  19.             </th>  
  20.             <th>  
  21.                 @Html.DisplayNameFor(model => model.FriendName)  
  22.             </th>  
  23.             <th>  
  24.                 @Html.DisplayNameFor(model => model.CompanyName)  
  25.             </th>  
  26.             <th>  
  27.                 @Html.DisplayNameFor(model => model.Email)  
  28.             </th>  
  29.             <th></th>  
  30.         </tr>  
  31.     </thead>  
  32.     <tbody>  
  33.         @foreach (var item in Model)  
  34.     {  
  35.         <tr>  
  36.             <td>  
  37.                 @Html.DisplayFor(modelItem => item.FriendID)  
  38.             </td>  
  39.             <td>  
  40.                 @Html.DisplayFor(modelItem => item.FriendName)  
  41.             </td>  
  42.             <td>  
  43.                 @Html.DisplayFor(modelItem => item.CompanyName)  
  44.             </td>  
  45.             <td>  
  46.                 @Html.DisplayFor(modelItem => item.Email)  
  47.             </td>  
  48.             <td>  
  49.                 @Html.ActionLink("Edit""Edit"new { /* id=item.PrimaryKey */ }) |  
  50.                 @Html.ActionLink("Details""Details"new { /* id=item.PrimaryKey */ }) |  
  51.                 @Html.ActionLink("Delete""Delete"new { /* id=item.PrimaryKey */ })  
  52.             </td>  
  53.         </tr>  
  54. }  
  55.     </tbody>  
  56. </table>  
  57.   
  58. <script>  
  59.     $(document).ready(function () {  
  60.         $('#myTable').DataTable();  
  61.     });  
  62. </script>  
_layout.cshtml Code
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <title>@ViewBag.Title - My ASP.NET Application</title>  
  7.     <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />  
  8.     <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />  
  9.     <script src="~/Scripts/modernizr-2.6.2.js"></script>  
  10.     <script src="~/Scripts/jquery-1.10.2.min.js"></script>  
  11. </head>  
  12. <body>  
  13.     <div class="navbar navbar-inverse navbar-fixed-top">  
  14.         <div class="container">  
  15.             <div class="navbar-header">  
  16.                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">  
  17.                     <span class="icon-bar"></span>  
  18.                     <span class="icon-bar"></span>  
  19.                     <span class="icon-bar"></span>  
  20.                 </button>  
  21.                 @Html.ActionLink("Application name""Index""Home"new { area = "" }, new { @class = "navbar-brand" })  
  22.             </div>  
  23.             <div class="navbar-collapse collapse">  
  24.                 <ul class="nav navbar-nav">  
  25.                 </ul>  
  26.             </div>  
  27.         </div>  
  28.     </div>  
  29.   
  30.     <div class="container body-content">  
  31.         @RenderBody()  
  32.         <hr />  
  33.         <footer>  
  34.             <p>© @DateTime.Now.Year - My ASP.NET Application</p>  
  35.         </footer>  
  36.     </div>      
  37.     <script src="~/Scripts/bootstrap.min.js"></script>  
  38. </body>  
  39. </html>  
OUTPUT
 
Using jQuery DataTable With ASP.NET MVC Client Side
 
In the next article you will learn about server side Jquery DataTable.