Dashboard Application With ASP.NET MVC 5 And jQuery

Introduction

As you know dashboard system has become very important because it helps the managers taking the right decisions. Generally, a dashboard has so many KPIs (Key Performance Indicator) which represent what happens in business. The KPIs or metrics can be number of users, number of orders, top customers, top orders etc...

All of these KPIs give visibility that can allow the top management of any enterprise to make good decisions. In this article, the idea is to build simple dashboard system with KPIs, then represent them in charts (using Google Charts).

Finally, I would like to point out that we will use ASP.NET MVC 5 and jQuery to build our app. I hope you will like it.

Prerequisites

Make sure you have installed Visual Studio 2015 (.NETFramework 4.5.2) and SQL Server.

In this post, we are going to,

Create MVC application.
Create database (Using Entity Framework Code First).
Create controllers (Customer Order, Product, and Dashboard).

Create your MVC application

Open Visual Studio and select File >> New Project.

The "New Project" window will pop up. Select ASP.NET Web Application (.NET Framework), name your project, and click OK.

ASP.NET

Next, new dialog will pop up for selecting the template. We are going choose MVC template and click Ok.

ASP.NET

Once our project is created, we will create database using entity framework (Code first approach).

SQL Database part

As you know, entity framework has different approach to map database such as database first, model first, and code first. In this article, I’d like to show you how we can create database using code first approach.

Let’s follow the steps below to create our database. Before of all, we are going create Data Access folder.

To do that. From solution explorer >> right click on project name >> Add >> New Folder.

After that, we are adding two new folders, entities and configurations respectively.

Here entities folder contains the definition of all the implied entities in our application whereas configurations folder is used to define characteristics of different properties of each entity.

Entities Folder

Now, we are adding the following entities

IEntity.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace ApplicationDashboardMVC.DataAccess.Entitites
{
public interface IEntity
{
int ID { get; set; }
}
}

Customer.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ApplicationDashboardMVC.DataAccess.Entitites
{
public class Customer : IEntity
{
public Customer()
{
Orders = new List<Order>();
}
public int ID { get; set; }
public string CustomerName { get; set; }
public string CustomerEmail { get; set; }
public string CustomerPhone { get; set; }
public string CustomerCountry { get; set; }
public string CustomerImage { get; set; }
public virtual ICollection<Order> Orders { get; set; }
}
}

Order.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ApplicationDashboardMVC.DataAccess.Entitites
{
public class Order: IEntity
{
public Order()
{
OrderDetail = new List<OrderDetails>();
}
public int ID { get; set; }
public DateTime OrderDate { get; set; }
public virtual Customer Customer { get; set; }
public virtual ICollection<OrderDetails> OrderDetail { get; set; }
}
}

OrderDetails.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ApplicationDashboardMVC.DataAccess.Entitites
{
public class OrderDetails : IEntity
{
public int ID { get; set; }
public int Quatity { get; set; }
public virtual Order Order { get; set; }
public virtual Product Product { get; set; }
}
}

Product.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ApplicationDashboardMVC.DataAccess.Entitites
{
public class Product : IEntity
{
public Product()
{
OrderDetails = new List<OrderDetails>();
}
public int ID { get; set; }
public string ProductName { get; set; }
public decimal UnitPrice { get; set; }
public int UnitsInStock { get; set; }
public string ProductImage { get; set; }
public string ProductType { get; set; }
public virtual ICollection<OrderDetails> OrderDetails { get; set; }
}
}

Now, it’s time to add configurations of all entities which will be used in our application.

EntityConfiguration.cs

using ApplicationDashboardMVC.DataAccess.Entitites;
using System;
using System.Collections.Generic;
using System.Data.Entity.ModelConfiguration;
using System.Linq;
using System.Web;
namespace ApplicationDashboardMVC.DataAccess.Configurations
{
public class EntityConfiguration<T> : EntityTypeConfiguration<T> where T: class, IEntity
{
public EntityConfiguration()
{
HasKey(e=>e.ID);
}
}
}

CustomerConfiguration.cs

using ApplicationDashboardMVC.DataAccess.Entitites;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ApplicationDashboardMVC.DataAccess.Configurations
{
public class CustomerConfiguration : EntityConfiguration<Customer>
{
public CustomerConfiguration()
{
Property(c => c.CustomerName).IsRequired().HasMaxLength(100);
Property(c => c.CustomerEmail).IsRequired().HasMaxLength(60);
Property(c => c.CustomerPhone).IsRequired().HasMaxLength(100);
Property(c => c.CustomerCountry).IsRequired().HasMaxLength(100);
Property(c => c.CustomerImage).IsOptional();
}
}
}

OrderConfiguration.cs

using ApplicationDashboardMVC.DataAccess.Entitites;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ApplicationDashboardMVC.DataAccess.Configurations
{
public class OrderConfiguration : EntityConfiguration<Order>
{
public OrderConfiguration()
{
Property(o => o.OrderDate).IsRequired();
}
}
}

OrderDetailsConfiguration.cs

using ApplicationDashboardMVC.DataAccess.Entitites;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ApplicationDashboardMVC.DataAccess.Configurations
{
public class OrderDetailsConfiguration : EntityConfiguration<OrderDetails>
{
public OrderDetailsConfiguration()
{
Property(o => o.Quatity).IsRequired();
}
}
}

ProductConfiguration.cs

using ApplicationDashboardMVC.DataAccess.Entitites;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ApplicationDashboardMVC.DataAccess.Configurations
{
public class ProductConfiguration : EntityConfiguration<Product>
{
public ProductConfiguration()
{
Property(p => p.ProductName).IsRequired().HasMaxLength(100);
Property(p => p.UnitPrice).IsRequired();
Property(p => p.ProductImage).IsRequired().HasMaxLength(100);
Property(p => p.UnitsInStock).IsRequired();
}
}
}

As final step. We are adding our dashboard context which will help us to access data from database. Usually context inherits from dbcontext class.

DashboardContext.cs

using ApplicationDashboardMVC.DataAccess.Configurations;
using ApplicationDashboardMVC.DataAccess.Entitites;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Data.Entity.ModelConfiguration.Conventions;
using System.Linq;
using System.Web;
namespace ApplicationDashboardMVC.DataAccess
{
public class DashboardContext : DbContext
{
public DashboardContext():base("DashboardOrder")
{
}
#region Entities
public IDbSet<Customer> CustomerSet { get; set; }
public IDbSet<Order> OrderSet { get; set; }
public IDbSet<Product> ProductSet { get; set; }
public IDbSet<OrderDetails> OrderDetailSet { get; set; }
#endregion
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
modelBuilder.Configurations.Add(new CustomerConfiguration());
modelBuilder.Configurations.Add(new OrderConfiguration());
modelBuilder.Configurations.Add(new ProductConfiguration());
modelBuilder.Configurations.Add(new OrderDetailsConfiguration());
}
}
}

Note

Make sure that you have added connection string of your database in Web.config file.

<connectionStrings>
<add name="DashboardOrder" connectionString="Data Source=.;Initial Catalog=DashboardOrder;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>

Now, Open Package Manager console and type the following command.

Enable-migrations

After that, I can see that we are ready to create our database. Run the following commands respectively.

add-migration "initial_migration"

update-database –verbose

ASP.NET

As you can see above, all the table have been added successfully.

ASP.NET

Create a controller

Now, we are going to create a controller. Right click on the controllers folder> > Add >> Controller>> selecting MVC 5 Controller - Empty>> click Add. In the next dialog name the controller CustomerOrderController and then click Add.

ASP.NET

ASP.NET

CustomerOrderController.cs

using ApplicationDashboardMVC.DataAccess;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ApplicationDashboardMVC.Controllers
{
public class CustomerOrderController : Controller
{
// GET: CustomerOrder
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult CustomersList()
{
return View();
}
[HttpGet]
public ActionResult GetCustomers()
{
using (DashboardContext _context = new DashboardContext())
{
var customerList = _context.CustomerSet.Select(c => new
{
c.ID,
c.CustomerName,
c.CustomerEmail,
c.CustomerPhone,
c.CustomerCountry,
c.CustomerImage
}).ToList();
return Json(new { data = customerList }, JsonRequestBehavior.AllowGet);
}
}
}
}

Here, we have added two actions CustomersList decorated with HttpGet attribute and GetCustomers with HttpGet attribute respectively.

CustomersList returns view that contains customer’s datatable whereas GetCustomers retrieves all customers from customer table and returns them in JSON format.

Now, we need to add CustomersList view. To do that, right click on CustomersList action >> Add view >> Add.

CustomersList.cshtml

@{
ViewBag.Title = "CustomersList";
}
@*<link href="~/Content/bootstrap.min.css" rel="stylesheet" />*@
<link href="~/Content/dataTables.bootstrap.min.css" rel="stylesheet" />
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Customer - Order</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
CUSTOMER LIST
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<table id="myDataTable" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Customer Profil</th>
<th>Customer ID</th>
<th>Customer Name</th>
<th>Customer Email</th>
<th>Customer Phone</th>
<th>Customer Country</th>
<th>Order</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@section Scripts{
@*<script src="~/Scripts/jquery-1.10.2.min.js"></script>*@
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
@*<script src="~/Scripts/bootstrap.min.js"></script>*@
<script src="~/Scripts/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//GET DATA FROM DATABASE TO FILL DATATABLE
var oTable = $("#myDataTable").DataTable({
"ajax": {
"url": "/CustomerOrder/GetCustomers",
"type": "GET",
"dataType": "json"
},
"columns": [
{
"data": "CustomerImage", "width": "50px", "render": function (data) {
return '<img class="rounded img-thumbnail" style="width:60px; height:58px;" src="/Images/Customers/' + data + '"/>';
}
},
{ "data": "ID", "autowidth": true },
{ "data": "CustomerName", "autowidth": true },
{ "data": "CustomerEmail", "autowidth": true },
{ "data": "CustomerPhone", "autowidth": true },
{ "data": "CustomerCountry", "autowidth": true },
{
"data": "ID", "width": "50px", "render": function (data) {
return '<a href=/Products/ProductList/'+ data + ' class="btn btn-primary">Order</a>';
//return '<a href=/Products/ProductList/' + data + ' class="btn btn-primary" data-id= ' + data + '>Order</a>';
}
}
]
});
});
</script>
}

ASP.NET

Notice that, we must add DataTable libraries in order to display customers list into DataTable grid, thus do not forget add the following libraries.

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="~/Scripts/dataTables.bootstrap.min.js"></script>

ProductsController.cs

using ApplicationDashboardMVC.DataAccess;
using ApplicationDashboardMVC.DataAccess.Entitites;
using ApplicationDashboardMVC.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Globalization;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ApplicationDashboardMVC.Controllers
{
public class ProductsController : Controller
{
public static List<ProductsViewModel> productList = new List<ProductsViewModel>();
// GET: Products
public ActionResult Index()
{
return View();
}
[HttpGet]
public ActionResult ProductList(int id)
{
Session["CustomerId"] = id;
return View();
}
[HttpGet]
public ActionResult GetProductByCategory(string category)
{
using (DashboardContext _context = new DashboardContext())
{
List<ProductsViewModel> productList = _context.ProductSet
.Where(p => p.ProductType.ToLower().Equals(category.ToLower()))
.Select(p => new ProductsViewModel
{
ProductID = p.ID,
ProductName = p.ProductName,
UnitPriceProduct = p.UnitPrice,
UnitsInStock = p.UnitsInStock,
ProductImage = p.ProductImage,
ProductType = p.ProductType
}).ToList();
return PartialView("~/Views/Products/GetProductByCategory.cshtml", productList);
}
}
[HttpPost]
public ActionResult ShoppingCart(ProductsViewModel product)
{
string message = string.Empty;
if(product != null)
{
productList.Add(product);
message = "product has been added successfully !";
}
else
{
message = "something Wrong !";
}
return Json( new { message = message}, JsonRequestBehavior.AllowGet);
}
public ActionResult DisplayShoppingCart()
{
List<ProductsViewModel> myShoppingCart = productList;
return PartialView("~/Views/Products/DisplayShoppingCart.cshtml", myShoppingCart);
}
[HttpPost]
public ActionResult AddOrder(int[] arrIdProduct, int[] arrQteProduct)
{
int countProduct = arrIdProduct.Length;
int customerId = (int)Session["CustomerId"];
bool statusTran = false;
DashboardContext _context = new DashboardContext();
using (DbContextTransaction dbTran = _context.Database.BeginTransaction())
{
try
{
Customer customer = _context.CustomerSet.Find(customerId);
if (customer != null)
{
customer.Orders.Add(new Order { OrderDate = DateTime.Now });
}
Order orderSelected = customer.Orders.LastOrDefault();
if (orderSelected != null)
{
for (int i = 0; i < countProduct; i++)
{
Product selectedProduct = _context.ProductSet.Find(arrIdProduct[i]);
orderSelected.OrderDetail.Add(new OrderDetails { Product = selectedProduct, Quatity = arrQteProduct[i] });
}
}
//Save Changes
int countResult = _context.SaveChanges();
//Commit Transaction
dbTran.Commit();
if(countProduct > 0)
{
statusTran = true;
productList.Clear();
}
}
catch (Exception)
{
dbTran.Rollback();
}
}
return Json(new { data = statusTran }, JsonRequestBehavior.AllowGet);
}
}
}

Let’s explain the different actions implemented within products controller.

ProductList action has an id as parameter which means customer id that would make an order.

Now, we are going add ProductList view. Right click on ProductList action >> Add View >> Add.

ProductList.cshtml

@{
ViewBag.Title = "ProductList";
}
<h2>ProductList</h2>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
<span class="glyphicon glyphicon-shopping-cart"></span> Shopping Cart
<p style="display:inline-block; position:relative; right:-56%;">
<button type="button" class="btn btn-primary" id="myOrder">
<span class="glyphicon glyphicon-shopping-cart"></span> My Order
</button>
</p>
</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
PRODUCT LIST
<div style="display:inline-block; position:relative; right:-68%;">
<button type="button" class="btn btn-primary btn-xs" data-id="Cars">Cars</button>
<button type="button" class="btn btn-default btn-xs" data-id="Clothing">Clothing</button>
<button type="button" class="btn btn-warning btn-xs" data-id="Electronics">Electronics</button>
</div>
</div>
<div class="panel-body">
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel"> <span class="glyphicon glyphicon-shopping-cart"></span> Order </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
@section Scripts{
<script type="text/javascript">
$(document).ready(function () {
$(".btn").click(function (element) {
var id = $(this).attr('data-id');
$.ajax({
type: 'GET',
url: '@Url.Action("GetProductByCategory", "Products")',
data: { category: $(this).attr('data-id') },
success: function (response) {
$(".panel-body").html(response);
},
error: function (error) {
}
});
});
$("#myOrder").click(function () {
$(".modal-body").html('');
$.ajax({
type: 'GET',
url: '@Url.Action("DisplayShoppingCart", "Products")',
success: function (response) {
$(".modal-body").html(response);
$("#exampleModal").modal('show');
},
error: function () {
alert("Something Wrong");
}
});
});
});
</script>
}

ASP.NET

GetProductByCategory accepts category as parameter and it is used to retrieve products from database based on the given category, then display them into GetProductByCategory partial view.

In order to display products by category, we will add new partial view with GetProductByCategory as name.

GetProductByCategory.cshtml

@model IEnumerable<ApplicationDashboardMVC.Models.ProductsViewModel>
@using ApplicationDashboardMVC.Helpers;
<div class="row">
@if (Model != null && Model.Any())
{
foreach (var product in Model)
{
<div class="col-md-4">
<div class="thumbnail">
@Html.ProductImage(product.ProductType, product.ProductImage, "300px", "165px")
<div class="caption">
<h3 style="text-align:center">@product.ProductName</h3>
<span style="position: relative; left: 29%; font-size: 16px;" class="label label-default">
@string.Format("{0} {1}", product.UnitPriceProduct, "$")
</span>
<select id="[email protected]" class="form-control" style="margin-top: 10px;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<p>
<a class="btn btn-success" id="test" role="button"
data-productId="@product.ProductID"
data-productImage="@product.ProductImage"
data-productName="@product.ProductName"
data-productType="@product.ProductType"
data-UnitPriceProduct="@product.UnitPriceProduct"
style="margin-left: 65px; margin-top: 10px;">
<span class="glyphicon glyphicon-shopping-cart"></span> Add To Card
</a>
@*<button type="button" class="btn btn-success" style="margin-left: 25%; margin-top: 2%;">
<span class="glyphicon glyphicon-shopping-cart"></span> Add To Card
</button>*@
</p>
</div>
</div>
</div>
}
}
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.btn-success').click(function () {
var selectedProduct = {
ProductID: $(this).attr('data-productId'),
ProductImage: $(this).attr('data-productImage'),
ProductName: $(this).attr('data-productName'),
ProductType: $(this).attr('data-productType'),
UnitPriceProduct: $(this).attr('data-UnitPriceProduct'),
QteSelected: $('#Qte_' + $(this).attr('data-productId')).val()
};
console.log(selectedProduct);
$.ajax({
type: 'POST',
url: '@Url.Action("ShoppingCart", "Products")',
data: selectedProduct,
success: function (response) {
alert(response.message);
},
error: function (response) {
alert(response.message);
}
});
});
});
</script>

ShoppingCart action is used when customers select their products, then they will be added in memory at first this is why we have used productList.

public static List<ProductsViewModel> productList = new List<ProductsViewModel>();

Now, to display all the selected products by customer, we will add DisplayShoppingCart action which is able to show all customer’s products.

So, what we need to do, it’s adding new partial view with DisplayShoppingCart as name then copy-past the following code snippet.

DisplayShoppingCart.cshtml

@model IEnumerable<ApplicationDashboardMVC.Models.ProductsViewModel>
@using ApplicationDashboardMVC.Helpers;
@{
decimal totalOrder = 0;
}
@if (Model != null && Model.Any())
{
using (Html.BeginForm("AddOrder", "Products", new { id = "f"}))
{
<div class="row">
<div class="col-md-12">
<table id="tableOrder" class="table table-hover">
<tr>
<th>Product Image</th>
<th>Product Name</th>
<th>Unit Price</th>
<th>Qte Selected</th>
<th>Product Type</th>
<th>Total Price</th>
</tr>
@foreach (var product in Model)
{
<tr>
<td>
@Html.ProductImage(product.ProductType, product.ProductImage, "60px", "58px")
</td>
<td>@product.ProductName</td>
<td>@string.Format("{0} $", product.UnitPriceProduct)</td>
<td>@product.QteSelected</td>
<td>@ProductType(product.ProductType)</td>
<td>@string.Format("{0} $", (product.UnitPriceProduct * product.QteSelected))</td>
</tr>
totalOrder += (product.QteSelected * product.UnitPriceProduct);
@Html.HiddenFor(p=>product.ProductID)
@Html.HiddenFor(p => product.QteSelected)
}
</table>
<h4 style="margin-left: 66%;">Total : <span class="label label-info">@string.Format("{0} $", totalOrder)</span></h4>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="close" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="SaveOrder">Save Order</button>
</div>
}
}
else
{
<div class="alert alert-warning" role="alert"> your basket is empty !</div>
}
@helper ProductType(string productType) {
switch (productType)
{
case "Cars":
<span class="label label-success">@productType</span>
break;
case "Clothing":
<span class="label label-warning">@productType</span>
break;
case "Electronics":
<span class="label label-info">@productType</span>
break;
}
}
<script type="text/javascript">
$(document).ready(function () {
//add class rounded img-thumbnail to img tag
$('img').addClass('rounded img-thumbnail');
//Save Order
$("#SaveOrder").click(function () {
var $form = $(this).closest('form');
var dataProduct = $form.serializeArray();
console.log(dataProduct);
var arrIdProduct = [];
var arrQteProduct = [];
for( i = 0; i < dataProduct.length; i++)
{
if (dataProduct[i].name == 'product.ProductID')
{
arrIdProduct.push(dataProduct[i].value);
}
else if (dataProduct[i].name == 'product.QteSelected')
{
arrQteProduct.push(dataProduct[i].value);
}
}
$.ajax({
type: 'POST',
url: '@Url.Action("AddOrder", "Products")',
data: { arrIdProduct, arrQteProduct },
success: function (response) {
if(response.data == true)
{
alert("Order has saved successfully ");
}
else
{
alert("Something Wrong ! ");
}
},
error: function (error) {
alert("Something Wrong ! ");
}
});
});
});
</script>

ASP.NET

Finally, AddOrder action is responsible to add new order with different products which are included to it.

Now, let's take a look at DashboardController

DashboardController.cs

using ApplicationDashboardMVC.DataAccess;
using ApplicationDashboardMVC.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace ApplicationDashboardMVC.Controllers
{
public class DashboardController : Controller
{
// GET: Dashboard
public ActionResult Index()
{
return View();
}
public ActionResult Dashboard()
{
using (DashboardContext _context = new DashboardContext())
{
ViewBag.CountCustomers = _context.CustomerSet.Count();
ViewBag.CountOrders = _context.OrderSet.Count();
ViewBag.CountProducts = _context.ProductSet.Count();
}
return View();
}
public ActionResult GetDetails(string type)
{
List<ProductOrCustomerViewModel> result = GetProductOrCustomer(type);
return PartialView("~/Views/Dashboard/GetDetails.cshtml", result);
}
public ActionResult TopCustomers()
{
List<TopCustomerViewModel> topFiveCustomers = null;
using (DashboardContext _context = new DashboardContext())
{
var OrderByCustomer = (from o in _context.OrderSet
group o by o.Customer.ID into g
orderby g.Count() descending
select new
{
CustomerID = g.Key,
Count = g.Count()
}).Take(5);
topFiveCustomers = (from c in _context.CustomerSet
join o in OrderByCustomer
on c.ID equals o.CustomerID
select new TopCustomerViewModel
{
CustomerName = c.CustomerName,
CustomerImage = c.CustomerImage,
CustomerCountry = c.CustomerCountry,
CountOrder = o.Count
}).ToList();
}
return PartialView("~/Views/Dashboard/TopCustomers.cshtml", topFiveCustomers);
}
public ActionResult OrdersByCountry()
{
DashboardContext _context = new DashboardContext();
var ordersByCountry = (from o in _context.OrderSet
group o by o.Customer.CustomerCountry into g
orderby g.Count() descending
select new
{
Country = g.Key,
CountOrders = g.Count()
}).ToList();
return Json(new { result = ordersByCountry }, JsonRequestBehavior.AllowGet);
}
public ActionResult CustomersByCountry()
{
DashboardContext _context = new DashboardContext();
var customerByCountry = (from c in _context.CustomerSet
group c by c.CustomerCountry into g
orderby g.Count() descending
select new
{
Country = g.Key,
CountCustomer = g.Count()
}).ToList();
return Json(new { result = customerByCountry }, JsonRequestBehavior.AllowGet);
}
public ActionResult OrdersByCustomer()
{
DashboardContext _context = new DashboardContext();
var ordersByCustomer = (from o in _context.OrderSet
group o by o.Customer.ID into g
select new
{
Name = from c in _context.CustomerSet
where c.ID == g.Key
select c.CustomerName,
CountOrders = g.Count()
}).ToList();
return Json(new { result = ordersByCustomer }, JsonRequestBehavior.AllowGet);
}
public List<ProductOrCustomerViewModel> GetProductOrCustomer(string type)
{
List<ProductOrCustomerViewModel> result = null;
using (DashboardContext _context = new DataAccess.DashboardContext())
{
if (!string.IsNullOrEmpty(type))
{
if (type == "customers")
{
result = _context.CustomerSet.Select(c => new ProductOrCustomerViewModel
{
Name = c.CustomerName,
Image = c.CustomerImage,
TypeOrCountry = c.CustomerCountry,
Type = "Customers"
}).ToList();
}
else if (type == "products")
{
result = _context.ProductSet.Select(p => new ProductOrCustomerViewModel
{
Name = p.ProductName,
Image = p.ProductImage,
TypeOrCountry = p.ProductType,
Type = p.ProductType
}).ToList();
}
}
return result;
}
}
}
}

Now, we will explain all the actions which are defined within DashboardController.

Dashboard action is the main action that represents our dashboard with different KPIs (Key Performance Indicator).

Dashboard.cshtml

@{
ViewBag.Title = "Dashboard";
}
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-comments fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge" id="CountCustomers">
<span>
@if (ViewBag.CountCustomers != null)
{
@ViewBag.CountCustomers;
}
</span>
</div>
<div>Customers!</div>
</div>
</div>
</div>
<a href="#" class="viewDetails" data-type="customers">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="panel panel-green">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-tasks fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge" id="CountOrders">
<span>
@if (ViewBag.CountOrders != null)
{
@ViewBag.CountOrders;
}
</span>
</div>
<div>Orders!</div>
</div>
</div>
</div>
<a href="#">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="panel panel-yellow">
<div class="panel-heading">
<div class="row">
<div class="col-xs-3">
<i class="fa fa-shopping-cart fa-5x"></i>
</div>
<div class="col-xs-9 text-right">
<div class="huge" id="CountProducts">
<span>
@if (ViewBag.CountProducts != null)
{
@ViewBag.CountProducts;
}
</span>
</div>
<div>Products!</div>
</div>
</div>
</div>
<a href="#" class="viewDetails" data-type="products">
<div class="panel-footer">
<span class="pull-left">View Details</span>
<span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
<div class="clearfix"></div>
</div>
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> ORDERS BY COUNTRY
</div>
<div class="panel-body">
<div id="orderByCountry"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> ORDERS BY CUSTOMER
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div id="ordersByCustomer"></div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-clock-o fa-fw"></i> CUSTOMERS LIST
</div>
<div class="panel-body">
<table id="myDataTable" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>Customer Profil</th>
<th>Customer ID</th>
<th>Customer Name</th>
<th>Customer Email</th>
<th>Customer Phone</th>
<th>Customer Country</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bell fa-fw"></i> TOP 5 CUSTOMERS
</div>
<div class="panel-body topCustomer">
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> CUSTOMER BY COUNTRY
</div>
<div class="panel-body">
<div id="customerByCountry"></div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel"> <span class="glyphicon glyphicon-search"></span> View Details </h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
@section Scripts{
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.google.com/uds/api/visualization/1.0/40ff64b1d9d6b3213524485974f36cc0/format+en,default+en,ui+en,corechart+en.I.js"></script>
<script src="~/Scripts/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
//Global Variable
google.load("visualization", "1", { packages: ["corechart"] });
$(document).ready(function () {
//View Details Button
$(".viewDetails").click(function () {
$(".modal-body").html('');
$.ajax({
type: 'GET',
url: '@Url.Action("GetDetails", "Dashboard")',
data: { type: $(this).attr("data-type") },
success: function (response) {
$(".modal-body").html(response);
$("#exampleModal").modal('show');
},
error: function () {
alert("Something wrong");
}
});
});
//Panel Body
$.ajax({
type: 'GET',
url: '@Url.Action("TopCustomers", "Dashboard")',
success: function (response) {
$(".topCustomer").html(response);
},
error: function () {
alert("Something Wrong");
}
});
//Chart Orders By Country
OrdersByCountry()
//Chart Customer By Country
CustomersByCountry()
//Chart Orders By Customer
OrdersByCustomer()
//Get All Customers
CustomerList()
//function Orders By Country
function OrdersByCountry() {
$.ajax({
type: 'GET',
url: '@Url.Action("OrdersByCountry", "Dashboard")',
success: function (response) {
console.log(response);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'CountOrders');
for (var i = 0; i < response.result.length; i++) {
data.addRow([response.result[i].Country, response.result[i].CountOrders]);
}
var chart = new google.visualization.ColumnChart(document.getElementById('orderByCountry'));
chart.draw(data,
{
title: "",
position: "top",
fontsize: "14px",
chartArea: { width: '100%' },
});
},
error: function () {
alert("Error loading data!");
}
});
}
function CustomersByCountry() {
$.ajax({
type: 'GET',
url: '@Url.Action("CustomersByCountry", "Dashboard")',
success: function (response) {
console.log(response);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'CountCustomer');
for (var i = 0; i < response.result.length; i++) {
data.addRow([response.result[i].Country, response.result[i].CountCustomer]);
}
var chart = new google.visualization.PieChart(document.getElementById('customerByCountry'));
chart.draw(data,
{
title: "",
position: "top",
fontsize: "14px",
chartArea: { width: '100%' },
});
},
error: function () {
alert("Error loading data!");
}
});
}
function OrdersByCustomer() {
$.ajax({
type: 'GET',
url: '@Url.Action("OrdersByCustomer", "Dashboard")',
success: function (response) {
console.log(response);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'CountOrders');
for (var i = 0; i < response.result.length; i++) {
data.addRow([response.result[i].Name[0], response.result[i].CountOrders]);
}
var chart = new google.visualization.BarChart(document.getElementById('ordersByCustomer'));
chart.draw(data,
{
title: "",
position: "top",
fontsize: "14px",
chartArea: { width: '100%' },
});
},
error: function () {
alert("Error loading data!");
}
});
}
function CustomerList() {
//GET DATA FROM DATABASE TO FILL DATATABLE
var oTable = $(".panel #myDataTable").DataTable({
"ajax": {
"url": "/CustomerOrder/GetCustomers",
"type": "GET",
"dataType": "json"
},
"columns": [
{
"data": "CustomerImage", "width": "50px", "render": function (data) {
return '<img class="rounded img-thumbnail" style="width:60px; height:58px;" src="/Images/Customers/' + data + '"/>';
}
},
{ "data": "ID", "autowidth": true },
{ "data": "CustomerName", "autowidth": true },
{ "data": "CustomerEmail", "autowidth": true },
{ "data": "CustomerPhone", "autowidth": true },
{ "data": "CustomerCountry", "autowidth": true }
]
});
}
});
</script>
}

Here, GetDetails action is responsible to get all products or customers based on type parameter which takes as value customer or product type then we will loop the returned result within GetDetails partial view.

GetDetails.cshtml

Copy-past the following code snipped

@model IEnumerable<ApplicationDashboardMVC.Models.ProductOrCustomerViewModel>
@using ApplicationDashboardMVC.Helpers;
<table class="table table-hover">
@foreach (var md in Model)
{
<tr>
<td> @Html.ProductImage(@md.Type, @md.Image, "60px", "58px") </td>
<td>@md.Name </td>
<td>@md.TypeOrCountry </td>
</tr>
}
</table>
<script type="text/javascript">
$('img').addClass('rounded img-thumbnail');
</script>

TopCustomers action is used to get top 5 customers who made more orders, then we will use TopCustomers partial view to display result.

TopCustomers.cshtml

@model IEnumerable<ApplicationDashboardMVC.Models.TopCustomerViewModel>
<div class="list-group">
@foreach (var customer in Model)
{
<a href="#" class="list-group-item">
<div style="display: inline-block;width: 60px;">
<img class="rounded img-thumbnail" src="@string.Format("/Images/Customers/{0}", customer.CustomerImage)" alt="" style="width:50px; height:60px;" />
</div>
@customer.CustomerName
<span class="label label-info"> @string.Format("{0} : {1}", "Count Orders", customer.CountOrder) </span>
<span class="label label-success" style="margin-left: 10px;"> @string.Format("{0} : {1}", "From", customer.CustomerCountry) </span>
</a>
}
</div>

Next, OrdersByCountry action will help us to return as result the number of orders by country in JSON format.

Now, let’s switch to CustomersByCountry which has the role to return the number of customers by country in JSON format.

Finally, we have OrdersbyCustomer action which is used to return the number of orders by customer.

Note

Do not forget to add the following view models

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ApplicationDashboardMVC.Models
{
public class ProductsViewModel
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public decimal UnitPriceProduct { get; set; }
public int UnitsInStock { get; set; }
public string ProductImage { get; set; }
public string ProductType { get; set; }
public int QteSelected { get; set; }
}
public class ProductOrCustomerViewModel
{
public string Name { get; set; }
public string Image { get; set; }
public string TypeOrCountry { get; set; }
public string Type { get; set; }
}
public class TopCustomerViewModel
{
public string CustomerName { get; set; }
public string CustomerImage { get; set; }
public string CustomerCountry { get; set; }
public int CountOrder { get; set; }
}
}

That’s all, Please send your feedback and queries in comments box.

36 Comments

Join the conversation! Your thoughts help the community grow.

Emmmanuel FIADUFE1y ago
Very cool one, but I can't find the the CRUD operation page for the customer and the product page, and printing of invoice after successful order, it will be great if you add them to it.
Emmmanuel FIADUFE1y ago
Thank you El Mahdi
Emmmanuel FIADUFE1y ago
Great tutorial,
Emmmanuel FIADUFE2y ago
That's great tutorial sir, but one thing I didn't see in the tutorial is the product page where the user will enter the product information and upload the product images with it associated information
Emmmanuel FIADUFE3y ago
Thank you for this tutorial but please which view did you add the dashboard code to, and is both the html and the JavaScript code on this same page
Manoj Singh3y ago
Hello can you share the database scripts also please?
Emmmanuel FIADUFE3y ago
Please thank you for this tutorial, but where is the page you use to save the product into the product table before selling
Bibhas Mishra3y ago
There is no output only trap
Satyaprakash Samantaray4y ago
Where is the output......???
Dinesh Chintalapudi5y ago
Nice article. Very useful. Thanks for the good work
Rajat Kumar Toppo6y ago
This is really helpful
shikhar gihlotra6y ago
Hi, i cant open this application in any browser. I downloaded it and tried to run it as it is. I just opens the browser and stops executing surprisingly....why is it like that ?
Jeevan Shetty6y ago
Hi can i have the complete project along with database as am fresher am finding it to little difficult to understand.
Guest User6y ago
Hi EL Mahdi, does this dashboard has login and registration page? Before a user logs in, i can see admin rights is SA Admin logged, please advice thanks. On the DB side, its native development through configuration setting and class?
Nilesh Sawardekar7y ago
Have you taken any special effort on CSS files?
Mohammed Shelle7y ago
That awesome !!!
Cyril Ejike7y ago
Good work!
Alice Nguyen7y ago
Thank you, this tutorial is great, it was helping a lot!
Bavithra devasri8y ago
nice application
siddhanath nikam8y ago
Fantastic...Awesome & Mind Blowing ......good done getting good skills
James Warrior8y ago
HelloCould you put an image of how the dashboard looks?
Sanju goud8y ago
Hello MY Name sanju i am a fresher plz exaplan with detail this artical is nice tell small one
Sanju goud8y ago
I am a fresher plz examplen withb detail i cant understand this what is this Configuration.cs
Naresh Singhal8y ago
Fantastic...Awesome & Mind Blowing ......good done El Mahdi Archane
Farhan Ahmed8y ago
Wow its really nice work
Mario Saccoia8y ago
Nice article and very great work
Ricardo Trein8y ago
Nice! I like very much this article! But i have one question, why you don't use async controllers and methods in others layers?
First Last8y ago
FYI.. In ProductsController/AddOrder(,,), the Product table's UnitsInStock should be decremented for the Product ordered.
First Last8y ago
In the GetDetails.cshmtl view, the GetCustomerOrderDetails.cshmtl view, and the DisplayShoppingCaart.cshmtl view, the GetProductsByCategory.cshmtl view, how is the path to the Product image determined?
First Last8y ago
Found a 2 bugs. In ProductsController/DisplayShoppingCart(): 1.)This is showing all the products for ALL customers who have selected products. Not the customer who currently is selecting and wanting to see just their shopping cart. There should be a shopping cart for EACH customer. In ProductsController/AddOrder(,,): 1.) If 2 customers add their orders to the shopping cart, the first customer who added is the one who is being updated with all products in the shopping cart. Not the appropriate customers.
andy 08y ago
Awesome sample, look forward to your version 2 launch. Thanks a lot....
First Last8y ago
You left out the code and partial view for the orders - the "customer's orders details". The middle panel. I created it to complete the app.
First Last8y ago
Good stuff but found 2 bugs....Also, can you post the test data for the database either as SQL inserts or as Seed method code? Your tutorial is really not complete without it. I created my own SQL inserts.
Sundaram Subramanian8y ago
Very great full work
sreenivasa k8y ago
Really nice article and worthy one
Naresh Singhal8y ago
Very Nice article, Explained in deep with great example, thanks sir !!