如何使用ASP.NET MVC创建仪表板用户界面？

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:

我目前正在使用ASP.NET MVC构建应用程序。数据输入页面相当容易编码,我只是为我的业务对象类型的页面制作模型:

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.

我正在努力寻找实现仪表板界面的最佳方法,使用独立的部件,使用ASP.NET MVC,其中每个部分的模型会有所不同?我假设每个部分都是MVC用户控件。

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

另外,我怎么能这样做,所以每个部分都是可测试的?

3 个解决方案

#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.

如果您需要测试您的视图,那么您可能已经在使用Selenium或其他一些Web测试框架。我不认为这些会关心页面是如何构建的,你应该能够像往常一样构建你的测试。

#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.

查看概念是MVC-Contrib http://www.codeplex.com/MVCContrib中的子控制器。基本上,您对部分运行完整请求,然后在现有代码中显示您想要的部分。

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

或者你可以查看这篇文章:http://blog.codeville.net/2008/10/14/partial-requests-in-aspnet-mvc/

#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.

Codeplex.com有一个开源项目“DotNet.Highcharts”。这个项目提供了一个ASP.NET控件,它包含了优秀的(免费供个人使用)Highcharts图表库。其中包括下载部分中的示例MVC3项目。

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.

我在CodeProject.com上发布了一篇文章,其中包括可下载的VS2012解决方案和一些示例C#代码。但是我在我的示例中使用了webform模板,而不是MVC。仪表板的大部分内容都是使用JavaScript库,HTML和CSS完成的。我已经在C#中包含了一些示例C#代码来演示数据检索,然后将其与JavaScript代码合并以呈现众多仪表板图表中的一个。

#1

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

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

#2