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.