Bootstrap Sortable In ASP.NET MVC 5

This article explains how to use Sortable Bootstrap table in ASP.NET MVC 5.

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

ASP.NET Web Application

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

MVC

Now, view Solution Explorer, Content and Scripts.

Solution Explorer

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

Nuget Package Manager

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.

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,

BundleConfig.cs

  1. bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(  
  2.    "~/Scripts/bootstrap.js",  
  3.    "~/Scripts/bootstrap.min.js",  
  4.    "~/Scripts/moment.min.js",  
  5.    "~/Scripts/bootstrap-sortable.js",  
  6.    "~/Scripts/respond.js"));  
  7.   
  8. bundles.Add(new StyleBundle("~/Content/css").Include(  
  9.    "~/Content/bootstrap.min.css",  
  10.    "~/Content/bootstrap-sortable.css",  
  11.    "~/Content/site.css"));  
Select the ADO.NET Entity Data Model,

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.

EF Designer from Database

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

New Connection

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:

Microsoft SQL Server SqlClient

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

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,

Entity Model

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

Add Class

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

Class

Applying Models attributes to the MstEmployee class.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace BootstrapSortableApplication.Models  
  6. {  
  7.     public class MstEmployee  
  8.     {  
  9.         public int EmployeeID  
  10.         {  
  11.             get;  
  12.             set;  
  13.         }  
  14.         public string LastName  
  15.         {  
  16.             get;  
  17.             set;  
  18.         }  
  19.         public string FirstName  
  20.         {  
  21.             get;  
  22.             set;  
  23.         }  
  24.         public string Name  
  25.         {  
  26.             get;  
  27.             set;  
  28.         }  
  29.         public string Title  
  30.         {  
  31.             get;  
  32.             set;  
  33.         }  
  34.         public DateTime ? BirthDate  
  35.         {  
  36.             get;  
  37.             set;  
  38.         }  
  39.         public DateTime ? HireDate  
  40.         {  
  41.             get;  
  42.             set;  
  43.         }  
  44.         public string Address  
  45.         {  
  46.             get;  
  47.             set;  
  48.         }  
  49.         public string City  
  50.         {  
  51.             get;  
  52.             set;  
  53.         }  
  54.         public string Region  
  55.         {  
  56.             get;  
  57.             set;  
  58.         }  
  59.         public string PostalCode  
  60.         {  
  61.             get;  
  62.             set;  
  63.         }  
  64.         public string Country  
  65.         {  
  66.             get;  
  67.             set;  
  68.         }  
  69.     }  
  70. }  
Now here's the code block for “HomeController”
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.Mvc;  
  6. using BootstrapSortableApplication.Models;  
  7. namespace BootstrapSortableApplication.Controllers  
  8. {  
  9.     public class HomeController: Controller  
  10.     {  
  11.         public ActionResult Index()  
  12.         {  
  13.             List < MstEmployee > qry = new List < MstEmployee > ();  
  14.             using(NorthwindEntities dc = new NorthwindEntities())  
  15.             {  
  16.                 qry = (from s in dc.Employees select new MstEmployee  
  17.                 {  
  18.                     EmployeeID = s.EmployeeID,  
  19.                         Name = s.FirstName + " " + s.LastName,  
  20.                         Title = s.Title,  
  21.                         BirthDate = s.BirthDate,  
  22.                         HireDate = s.HireDate,  
  23.                         Address = s.Address,  
  24.                         City = s.City,  
  25.                         Region = s.Region,  
  26.                         PostalCode = s.PostalCode,  
  27.                         Country = s.Country,  
  28.                 }).ToList();  
  29.             }  
  30.             return View(qry);  
  31.         }  
  32.     }  
  33. }  
Index.cshtml
  1. @model IEnumerable<BootstrapSortableApplication.Models.MstEmployee>  
  2. @{  
  3.     ViewBag.Title = "Home Page";  
  4.   
  5. }  
  6. <br />  
  7.   
  8. <div class="table-responsive">  
  9.     <table class="table table-bordered table-condensed table-striped table-hover sortable">  
  10.         @if (Model.Count() == 0)  
  11.             {  
  12.             <tr>  
  13.                 <td colspan="10">No Record's found.</td>  
  14.             </tr>  
  15.         }  
  16.         else  
  17.         {  
  18.             <thead>  
  19.                 <tr class="danger">  
  20.                     <th data-defaultsign="_19"> Employee ID</th>  
  21.                     <th data-defaultsign="AZ">Name</th>  
  22.                     <th data-defaultsign="AZ">Title</th>  
  23.                     <th data-defaultsign="month">Birth Date</th>  
  24.                     <th data-firstsort="desc">Address</th>  
  25.                     <th data-defaultsign="AZ">City</th>  
  26.                     <th data-defaultsort="disabled">Country</th>  
  27.                 </tr>  
  28.             </thead>  
  29.             foreach (var item in Model)  
  30.             {  
  31.                 <tr>  
  32.                     <td>@item.EmployeeID</td>  
  33.                     <td>@item.Name</td>  
  34.                     <td>@item.Title</td>  
  35.                     <td>@item.BirthDate</td>  
  36.                     <td>@item.Address</td>  
  37.                     <td>@item.City</td>  
  38.                     <td>@item.Country</td>  
  39.                 </tr>  
  40.             }  
  41.         }  
  42.     </table>  
  43. </div>  
Now run the page, it will look like this: Home/Index.

Home

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

 Employee ID

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

data alphabetically

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

 alphabetically

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

Birth Date

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

run


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

run the page

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