Using jQuery DataTable With ASP.NET MVC Client Side

Client-side work is very simple. We will fetch the data from the database and hand it over to the table.

Client-side data table works fast with less data (Less than 10000 records) but this will perform very slowly if data (records) are in Lakhs. We have to decide on Client Side or Server Side as per data or project requirements. For client-side data table 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 the DataTable team.

You can visit here.

DataTable site home page

As you can see above on the home page of Datatable they did this with three steps.

Client-side implementation of jQuery data table

Create an Asp.Net MVC Web Application called “ClientSideDataTable”.

Steps Description

1. Select Empty Template
2. Checked MVC checkbox.
3. Select No Authentication
4. Press OK button

Now we are going to add the ADO.NET entity Data model.

Right-click on the project and select ADD --> NEW ITEM.

In the following image, you have to select.

1. Server Name
2. Verify connection.

In the above image, I selected EntityFramework 6.0

In the following image, you have to select tables that you want to insert/add into EDMX.

In the above image you can see that tblFriend is added successfully.

Now we are going to add a Controller.

Right-click on the CONTROLLERS folder and select ADD --> NEW ITEM.

// GET: Friend List
public ActionResult Index()
{
    // EntityFramework Class create "db" instance
    MbkTestEntities db = new MbkTestEntities();
    
    // Generating Friend List 
    var friendlist = db.tblFriends.OrderBy(x => x.FriendName).ToList();
    
    return View(friendlist);
}

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> tags to the table structure.

For more details visit here.

Now attach CDN files of DataTables to Index.CSS HTML.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

Now go to _layout.CSS HTML

By default in layout.cshtml jQuery link is added at the bottom, you have to move the jQuery link to the HEAD section of _layout.cshtml.

Source Code FriendController.cs Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ClientSideDataTable.Controllers
{
    public class FriendController : Controller
    {
        // GET: Friend List
        public ActionResult Index()
        {
            // EntityFramework Class create "db" instance
            MbkTestEntities db = new MbkTestEntities();
            
            // Generating Friend List
            var friendlist = db.tblFriends.OrderBy(x => x.FriendName).ToList();
            
            return View(friendlist);
        }
    }
}

Friend.cshtml Code

@model IEnumerable<ClientSideDataTable.tblFriend>

@{
    ViewBag.Title = "Index";
}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>

<table id="myTable" class="table">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.FriendID)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FriendName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CompanyName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Email)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.FriendID)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FriendName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CompanyName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Email)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                    @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                    @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                </td>
            </tr>
        }
    </tbody>
</table>

<script>
    $(document).ready(function () {
        $('#myTable').DataTable();
    });
</script>

_layout.CSS HTML Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
    <p class="navbar navbar-inverse navbar-fixed-top">
        <p class="container">
            <p class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </p>
            <p class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </p>
        </p>
    </p>
  
    <p class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </p>      
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

Output

In the next article, you will learn about server-side Jquery DataTable.