Create A Dashboard Experience In Asp.Net MVC

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.

dashboard_aspnetmvc

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. Email me 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.

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.

Advertisements

5 thoughts on “Create A Dashboard Experience In Asp.Net MVC

  1. Pingback: ASP.NET MVC实现仪表程序 – JK_Rush | 查问题

  2. Ali

    Hello Tien,
    Great tutorial, I am very much Interested to the improvements like drag and drops, save state either in database or cookie and add a widget and deleting it for respective profile.

    Thanks

  3. Hi Tien, Very nice article.. I downloaded and ran this app but when I tried to add Sales Category widget twice on same screen it did not work..Can you help me .. I want to create a similar application

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s