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

 

 

As you can see above in home page of datatable they did this with three steps. 

 

Client Side Implementation of jQuery Data Table

 

 

Create a 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 ADO.NET entity Data model.

 

Right click on project 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 which you want to insert/add into EDMX.

 

 

 

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.

 

 

 

 

// 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> tag to table structure.

 

For more details visit here.

 

 

Now attach CDN files of DataTables to Index.cshtml

<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.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.

 

 

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.cshtml 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>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div 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" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

OUTPUT

 

 

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