Create A Dashboard Experience In Asp.Net MVC

Posted on April 12, 2012

In most of the time while creating a web application, a secured section for administrating the application is always needed. Something like a control panel or back end of the website(One of my client even call it a database!). No matter how you call it. You do not want to display a bunch of links when you first entered. Instead, you want to show useful data, important notifications or graphical reports using pie or bar chart before they decide where to go in the application. Therefore, a dashboard is needed for that purpose.

UI Requirement

UI requirement becomes essential in the web development using Asp.Net MVC not only because you have more control of how it renders but also more often developers has to write more client side codes under this architecture. Starting my technical career from a UI designer a decade ago, I felt it make more sense to do it in this way while developing a web application.

In this dashboard demo, we would like to create a 3 column dashboard where each column can has as many as widgets inside and the size of the column will grow vertically while you add more. Also we would like to treat the widget as a individual element where developer can simply add or remove widget while time pass by.

Each widget will contains header and body section where header describe the name of the widget and body is where the data to be presented.

Besides how it looks, here are some other UI requirements

Html/css is compatible with the modern browser IE/Firefox/Opera
Fluid design that work under full screen
Tableless Design

HTML

Here is the html codes for the dashboard. As we described, it is a 3 column design, however, it can turn into two columns or multiple columns design easily by modifying the mark up. if you need any help on that.

</pre>

<div class="dashboard">

<div class="dashboard3Col">

<div class="dashboardCol"><% Html.RenderAction("dashboardItem_Users", "DashBoard"); %>

 <% Html.RenderAction("dashboardItem_Orders", "DashBoard"); %></div>

<div class="dashboardCol"><% Html.RenderAction("dashboardItem_SalesPie", "DashBoard"); %>

 <% Html.RenderAction("dashboardItem_Users", "DashBoard"); %></div>

<div class="dashboardCol"><% Html.RenderAction("dashboardItem_Visitors", "DashBoard"); %>

 <% Html.RenderAction("dashboardItem_Users", "DashBoard"); %></div>

<div class="dashboardFooter"></div>

</div>

</div>

<pre>

CSS

.dashboard { float: left; width: 100%;}

.dashboard .dashboard3col {width:100%; float:left;}

.dashboardCol {float:left; width:33%; overflow:hidden; margin:0;}

.dashboardItem { margin:0 10px 10px 0; border:solid 1px #e7e7e7;}

.dashboardItemHeader { font-size:1.2em; font-weight:bold; padding:10px 15px; background-color:#dbdbdb;}

.dashboardItemBody { margin:10px; overflow:hidden;}

.dashboardFooter {clear:both; width:100%; background-color:Red;}

Asp.Net MVC View
Now, it’s time to create the view for widgets. Here is the folder structure of the view.

Here is html structure in the views.

</pre>

<div class="dashboardItem">

<div class="dashboardItemHeader">New Users</div>

<div class="dashboardItemBody"></div>

</div>

<pre>

Once child view is created, developers can simply call Html.RenderAction() to bring up the view on the dashboard like the following code syntax.

</pre>

<div class="dashboardCol"><% Html.RenderAction("dashboardItem_Users", "DashBoard"); %>

 <% Html.RenderAction("dashboardItem_Orders", "DashBoard"); %></div>

<pre>

Asp.Net MVC Controller

A dashboard controller needs to be created to handle all the dashboard
activities. Each widget will be treated as an individual childaction. This childaction is a type of action in the controller, where can only be called from it’s parent. In this tutorial, no data was passed from action to the view. However, you may want to pass useful data you wish to display on the view in real world situation.

[ChildActionOnly]

public ActionResult DashboardItem_Users()

{

return View();

}

Done, you can click on the following screen shot of the Asp.Net MVC dashboard to go to the demo page to see how it looks like.

Demo of the dashboard

Download the source code

Improvement

This is a quick and easy dashboard can be achive in short time frame. You as developer can simply copy and paste the code into your project. however, there are rooms to improve such as making drag and drop widgets, extending the width of column by drag and drop…etc. If you would like to see those functionality in my next post. Leave your comment below.

Sunday, 14 July 2013