How to create a dashboard user interface using ASP.NET MVC?

Question

I am currently building an application using ASP.NET MVC. The data entry pages are fairly easy to code, I just make the Model for the page of the type of my business object:

namespace MyNameSpace.Web.Views.ProjectEdit
{
    public partial class MyView : ViewPage<Project>
    {
    }
}

Where I am struggling is figuring out the best way to implement a dashboard like interface, with stand-alone parts, using ASP.NET MVC, where the Model for each part would be different? I'm assuming that each part would be an MVC user control.

Also, how could I make it so each part is testable?

Stanch

Answer 1

I think that user controls is probably the way to go. I'm not sure what the concern is about testability. You should be able to test that your controller is providing the right view data -- since you'll have several models each of these will probably be stored in a separate view data item, rather than aggregating them in a single model. Aggregating in a single model is also possible, although probably more brittle. Each control would just need to check for a particular view data item, rather than being specific to a particular model. You could approximate the model variable on each view page by doing:

<% MyUserControlModel model = ViewData["MyUserControlModel"]
         as MyUserControlModel; %>

<div id="myUserControl_dashboard" class="dashboard">
   Name: <%= model.Name %><br />
   Count: <%$ model.Count %>
</div>

If you need to test your view, then you're probably already using Selenium or some other web testing framework. I don't think that these would care how the page was constructed and you should be able to construct your tests pretty much like you always do.

Damicke

So let's say I have a HomeController ... and on the Index view I want to display X other user controls ... how would I do this? – Stanch

Create your DashboardView that renders each of the UserControls in the view placed as you want them. Have your Index action collect the models needed for each of the user controls and store each model in an appropriately named ViewData item. Each control need only render its data. – Damicke

(cont.) The Index action returns a ViewResult for the DashboardView with appropriate data for each of the user controls. – Damicke

Answer 2

Check out the notion is sub-controllers in MVC-Contrib http://www.codeplex.com/MVCContrib. Basically you run a full request to a partial then display that partial where you want in your existing code.

Alternatively you can check out this post: http://blog.codeville.net/2008/10/14/partial-requests-in-aspnet-mvc/

Brose

Answer 3

Codeplex.com has an open source project "DotNet.Highcharts". This project provides an ASP.NET control that wraps around the excellent (free for personal use) Highcharts charting library. that includes a sample MVC3 project in the downloads section.

URL: http://dotnethighcharts.codeplex.com/

I have posted an article on CodeProject.com that includes a downloadable VS2012 solution and some sample C# code. However I use a webform template in my example, not MVC. The bulk of the dashboard is done using JavaScript libraries, HTML & CSS. I have included some sample C# code to demo data retrieval in C# which in then merged with JavaScript code to render one of the many dashboard charts.

Pointblank

thank you for this. I have a question. I like to know how would you pass user controls data to r, let r process the data and return back the results to ui to be charted by highcharts. Do you have sample codes to share? Any ideas how I could do this? – Plugugly