Using Bootstrap Table Wenzhixin With ASP.NET MVC

Good evening guys and gals!

In this tutorial, I will show you on how to display records in tabular format using Bootstrap Table created by Wenzhixin in ASP.NET MVC. First, you need to have AdventureWorks Database since this is the database used in the demo. Next is to create an ASP.NET MVC project and then add an ADO.NET Entity Model that targets the AdventureWorks DB specifically the tables People, EmployeeDepartmentHistories, Departments, Shifts, BusinessEntityAddresses and Addresses. Proceed by adding an EmployeeViewModel class that contains properties of the Employee. This class will be used by the Bootstrap Table's columns property.

public class EmployeeViewModel
{
 public int BusinessEntityId { get; set; }
 public string EmployeeName { get; set; }
 public string Address { get; set; }
 public string PostalCode { get; set; }
 public string DepartmentName { get; set; }
 public string DepartmentGroupName { get; set; }
 public string ShiftName { get; set; }
}

Add a controller class with an AdventureWorks context object that will read the employee information from AdventureWorks DB. The results list are then converted to JSON object to be used by the Bootstrap Table.

public class EmployeeController : Controller
{
 private AdventureWorks2012Entities _context;

 public EmployeeController()
 {
  _context = new AdventureWorks2012Entities();
 }

 // GET: Employee
 public ActionResult Index()
 {
  return View(); 
 }

 public ActionResult GetEmployees()
 {
  var model = (from person in _context.People.AsEnumerable()
   join empDep in _context.EmployeeDepartmentHistories on person.BusinessEntityID equals empDep
    .BusinessEntityID
   join dep in _context.Departments on empDep.DepartmentID equals dep.DepartmentID
   join shift in _context.Shifts on empDep.ShiftID equals shift.ShiftID
   join busEntAdd in _context.BusinessEntityAddresses on empDep.BusinessEntityID equals busEntAdd
    .BusinessEntityID
   join busAdd in _context.Addresses on busEntAdd.AddressID equals busAdd.AddressID
   select new EmployeeViewModel()
   {
    BusinessEntityId = person.BusinessEntityID,
    EmployeeName = (person.LastName + ", " + person.FirstName + " " + person.MiddleName),
    DepartmentName = dep.Name,
    ShiftName = shift.Name,
    DepartmentGroupName = dep.GroupName,
    Address = busAdd.AddressLine1,
    PostalCode = !string.IsNullOrEmpty(busAdd.PostalCode) ? busAdd.PostalCode : string.Empty
   });

  return Json(model, JsonRequestBehavior.AllowGet);
 }
}

Add an empty View to the Index ActionResult that has a table element with myTable as it's id. And in the ready function of jQuery, set the properties and the columns of the table to match the model object returned by the controller action.

@model IEnumerable<BootstrapTables.Models.EmployeeViewModel>

@{
    ViewBag.Title = "Index";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
<link href="~/Content/bootstrap-table.css" rel="stylesheet" />
<script type="text/javascript">
    $(function () {
        $("#myTable").bootstrapTable({
            url: '/Employee/GetEmployees',
            method: 'get',
            pageSize: 10,
            pageNumber: 1,
            pagination: true,
            columns: [
                {
                    field: 'BusinessEntityId',
                    title: 'Employee ID',
                    sortable: true
                },
                {
                    field: 'EmployeeName',
                    title: 'Employee Name',
                    sortable: true
                },
                {
                    field: 'DepartmentName',
                    title: 'Department Name',
                    sortable: true
                },
                {
                    field: 'ShiftName',
                    title: 'Shift Name',
                    sortable: true
                },
                {
                    field: 'DepartmentGroupName',
                    title: 'Department GroupName',
                    sortable: true
                },
                {
                    field: 'Address',
                    title: 'Address',
                    sortable: true
                },
                {
                    field: 'PostalCode',
                    title: 'Postal Code',
                    sortable: true
                }
            ]
        });
    });

<div class="container">
    <br/>
    <div class="row">
        <table id="myTable"></table>
    </div>
</div>

You should see the output rendered to the browser as presented below.