Bootstrap Sortable In ASP.NET MVC 5

Introduction

Bootstrap Sortable is a jQuery extension for Bootstrap that adds the capability of sorting rows of your Bootstrap tables.

Features:

Sorts table data alphabetically.
Sorts table data by numbers.
Sorts table data by dates. (Requires Momont.js).
Allows to disable sorting for a specific table column.

Create a new project using "File", "New", then "Project". Select Web, then "ASP.NET Web Application". Name it “BootstrapSortableApplication".

You can see New ASP.NET Project dialog for ASP.NET 4.6 templates. Select a template, MVC, then click OK.

Now, view Solution Explorer, Content and Scripts.

Now, Tools click on the Nuget Package Manager > Package Manager Console.

To install bootstrap-sortable, run the following command in the Package Manager Console.

Install-Package bootstrap-sortable.

To install Moment.js, run the following command in the Package Manager Console.
Install-Package Moment.js.

To configure a default page, you can go to App_Start > BundleConfig.cs. From there you should be able to see something like the following,

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap.min.js",
"~/Scripts/moment.min.js",
"~/Scripts/bootstrap-sortable.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/bootstrap-sortable.css",
"~/Content/site.css"));

Select the ADO.NET Entity Data Model,

Now click Add to continue and on the next step select “EF Designer from database” since we will use the database first approach to work with existing database.

Here click on New Connection and then enter your SQL Server details. After that select your database.

In the next step click on the “New Connection” button and then select “Microsoft SQL Server SqlClient” as the data source and then click Next. You should see this dialog below:

You should now see the following dialog: Yes > Next.

Now select the table that you want to use in your application. For this example, I selected all the tables because we will use those in our application. Clicking the Finish button will generate the Entity Model for you as in the following image,

Now, go to Models, then click Add and Class.

Now, Add New Item, select class MstEmployee.cs and then Add.

Applying Models attributes to the MstEmployee class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace BootstrapSortableApplication.Models
{
public class MstEmployee
{
public int EmployeeID
{
get;
set;
}
public string LastName
{
get;
set;
}
public string FirstName
{
get;
set;
}
public string Name
{
get;
set;
}
public string Title
{
get;
set;
}
public DateTime ? BirthDate
{
get;
set;
}
public DateTime ? HireDate
{
get;
set;
}
public string Address
{
get;
set;
}
public string City
{
get;
set;
}
public string Region
{
get;
set;
}
public string PostalCode
{
get;
set;
}
public string Country
{
get;
set;
}
}
}

Now here's the code block for “HomeController”

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using BootstrapSortableApplication.Models;
namespace BootstrapSortableApplication.Controllers
{
public class HomeController: Controller
{
public ActionResult Index()
{
List < MstEmployee > qry = new List < MstEmployee > ();
using(NorthwindEntities dc = new NorthwindEntities())
{
qry = (from s in dc.Employees select new MstEmployee
{
EmployeeID = s.EmployeeID,
Name = s.FirstName + " " + s.LastName,
Title = s.Title,
BirthDate = s.BirthDate,
HireDate = s.HireDate,
Address = s.Address,
City = s.City,
Region = s.Region,
PostalCode = s.PostalCode,
Country = s.Country,
}).ToList();
}
return View(qry);
}
}
}

Index.cshtml

@model IEnumerable<BootstrapSortableApplication.Models.MstEmployee>
@{
ViewBag.Title = "Home Page";
}
<br />
<div class="table-responsive">
<table class="table table-bordered table-condensed table-striped table-hover sortable">
@if (Model.Count() == 0)
{
<tr>
<td colspan="10">No Record's found.</td>
</tr>
}
else
{
<thead>
<tr class="danger">
<th data-defaultsign="_19"> Employee ID</th>
<th data-defaultsign="AZ">Name</th>
<th data-defaultsign="AZ">Title</th>
<th data-defaultsign="month">Birth Date</th>
<th data-firstsort="desc">Address</th>
<th data-defaultsign="AZ">City</th>
<th data-defaultsort="disabled">Country</th>
</tr>
</thead>
foreach (var item in Model)
{
<tr>
<td>@item.EmployeeID</td>
<td>@item.Name</td>
<td>@item.Title</td>
<td>@item.BirthDate</td>
<td>@item.Address</td>
<td>@item.City</td>
<td>@item.Country</td>
</tr>
}
}
</table>
</div>

Now run the page, it will look like this: Home/Index.

Now run the page, it sorts table data by numbers Employee ID data-defaultsign="_19".

Now run the page, Name Sorts table data alphabetically data-defaultsign="AZ".

Now run the page, Title Sorts table data alphabetically data-defaultsign="AZ".

Now run the page, Sorts table data by dates. Birth Date data-defaultsign="month",

Now run the page, Custom sorting signs Address data-firstsort="desc".

Now run the page, allows to disable sorting for a specific table column Country data-defaultsort="disabled".

I hope this article is useful. If you have any other questions, then please provide your comments below.

22 Comments

Join the conversation! Your thoughts help the community grow.

Rayman Bacchus5y ago
I followed the instructions above letter by letter. I only connected to a different database. I am on Framework 6.00 and get this error - System.NotSupportedException: 'The entity or complex type <Model> cannot be constructed in a LINQ to Entities query.'
Asad Naeem8y ago
Date columns sorting is not working properly. Any solution for that....
susilkumar behera8y ago
Nice....Bro:)Thanks 4 the Article.
Beefy Dawg8y ago
Sorting by date month is incorrect, unfortunately. December should be last not after January (it's actually sorting by the first digit of the month, not the month).
Sourabh Somani10y ago
Nice Article :)
- Sanjay Kumar10y ago
  Thanks Sourabh Somani
Uday Bhan Singh10y ago
Thank you for nice Article
- Sanjay Kumar10y ago
  Thanks Udaybhan Singh
Santhakumar Munuswamy10y ago
Thanks for nice article
- Sanjay Kumar10y ago
  Thanks Santhakumar Munuswamy
sreenivasa k10y ago
good
- Sanjay Kumar10y ago
  Thanks sreenivasa k
Muhammad Aqib Shehzad10y ago
good one
- Sanjay Kumar10y ago
  Thanks Aqib Shehzad
ROHAN THAKUR10y ago
nice article...
- Sanjay Kumar10y ago
  Thanks ROHAN THAKUR
Shridhar Sharma10y ago
nice share
- Sanjay Kumar10y ago
  Thanks Shridhar Sharma
Ankit Bansal10y ago
Nice one..
- Sanjay Kumar10y ago
  Thanks Ankit Bansal
Raja T10y ago
Nice, Thanks for sharing
- Sanjay Kumar10y ago
  Thanks Raja T