ASP.NET MVC实现仪表程序
在大多数情况下，我们的Web程序不仅仅需要给用户提供具体数据，在一些情况下，我们还需要给高级的用户或管理者提供数据汇总和分析图表之类的功能。
如果我们不想显示一大堆烦心的数据，希望通过饼图或条形图来直观地显示数据，这是我们可以考虑使用图表控件显示。
在接下来的文章中，我们将向大家介绍数据仪表板程序的实现。
之前有一篇文章关于StackOverflow上的编程趋势，它通过条形和区域图，向我们展示了Stackoverflow上的热门的问题标签。
图1 Stackoverflow的热门标签
通过上图，我们可以直观地了解Stackoverflow上的热门标签的变化趋势，现在，我们通过仪表程序实现同样的功能。
在仪表程序界面中，我们会通过饼状图、区域图和条形图显示数据，这里我们使用Google Charts控件来显示饼状图、区域图和条形图数据图。
Google Charts通过Javascript实现动态图片的绘制，它的使用非常简便，我们只需给相应的绘图函数传递相应的数据，就可以生成相应的数据图表了。
UI设计
图2 Dashboard界面
现在，我们要在主界面（Dashboard）中，显示数据的饼状图、区域图和条形图，那么我们使用Google Charts控件动态地把三种图形加载到Index.cshtml页面中，下面是Index.cshtml页面代码：
<!-- Dashboard UI START -->
<body>
<div>
@{ Html.RenderAction("Dashboard_Pie", "DashBoard"); }
</div>
<div>
@{ Html.RenderAction("Dashboard_AreaChart", "DashBoard"); }
</div>
<div>
@{ Html.RenderAction("Dashboard_ColumnChart", "DashBoard"); }
</div>
</body>
<!-- Dashboard UI END -->
上面，我们定义了三个div元素，Index.cshtml页面动态地加载Dashboard_Pie、Dashboard_AreaChart以及Dashboard_ColumnChart的内容。
接下来，我们要定义Dashboard_Pie（饼状图）、Dashboard_AreaChart（区域图）和Dashboard_ColumnChart（条形图）页面，在定义数据图界面之前，首先让我们介绍Google Charts的使用。
Javascript
前面我们提到Google Charts的使用十分方便，首先我们需要引用jsapi库，在页面代码中添加如下代码：
<!-- Adds Google js api reference.--> <script type="text/javascript" src="https://www.google.com/jsapi"></script>
Google的JSAPI，不仅可以加载Google自身提供的AJAX API（如：Google Map API、Google Search API和Google Earth API），它还可以加载各种常用的JS库（如：jQuery、jQuery UI、Prototype、MooTools和Dojo等）。
现在，我们在页面中添加如下Javascript代码，引用Google的visualization库：
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawPieChart);
</script>
上面，我们使用google的load()方法加载了visualization库，并且定义了加载成功后的回调函数为drawPieChart()。
也许有人会问：“为什么不直接用Google CDN中提供Javascript库呢？”有两个原因，首先我们在Google CDN中没有找到和visualization库相关的引用地址（如有请告诉一下），其次，google的load()方法会加载一系列相关的资源（如：Javascript和CSS），这样我们就无需一个个引用了。
前面，我们定义了回调函数drawPieChart()，但还没有实现该方法，接下来，我们需要实现回调函数drawPieChart()，它负责获绘制数据图，具体实现如下：
/**
* Draws the pie chart.
**/
function drawPieChart() {
// Gets data from GetLanguageRank().
$.ajax({
type: 'GET',
dataType: 'json',
url: '<%= Url.Content("") %>',
data: {},
success: function(data) {
var dt = new google.visualization.DataTable();
dt.addColumn('string', 'Language');
dt.addColumn('number', 'Question');
// Adds data.
for (var i = 0; i < data.length; i++) {
dt.addRow([data[i].Name, data[i].Question]);
}
var options = {
title: "Top 25 programming language"
};
// Draws pie implemention.
var chart = new google.visualization.PieChart(document.getElementById('pieChart'));
chart.draw(dt, options);
},
error: function(xhr, textStatus, e) {
console.log('Status: ' + textStatus + ' Error: ' + e.toString());
},
complete: function() {
}
});
}
上面，我们实现了回调函数drawPieChart()，它通过调用$.ajax()方法从后端中获取数据，如果数据获取成功，就把数据传递给draw()方法绘制数据图表。
接着，我们实现Dashboard_Pie数据图界面，具体代码如下：
<!-- Pie chart page --> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <form id="form2" runat="server"> <div id="pieChart"> </div> </form> </body> </html>
上面，我们在form元素中添加了一个div元素，由于我们在回调函数drawPieChart()中，指定了饼状图的加载位置，所以我们需要在页面中添加饼状图的div元素。
前面，我们提到回调函数drawPieChart()，通过$.ajax()方法从后端中获取数据，现在，我们需要提供API方法，让客户端通过调用API获取相应的数据。
这里，我们使用Stackoverflow Jan/01/2010到July/01/2013的热门标签数据。
由于数据是CSV格式的，所以我们可以使用Excel查看数据。
图3 热门标签数据
通过上图中的数据，我们定义Language类，它包含四个字段分别是Id、Name、Question和CreateOn，具体定义如下：
图4 Language类
/// <summary>
/// The language model.
/// </summary>
public class QuestionTag
{
public int Id { get; set; }
public string Name { get; set; }
public int Question { get; set; }
public DateTime CreateOn { get; set; }
}
上面，我们定义了QuestionTag类，接下来，我们需要定义控制器类，它负责返回后端数据，所以我们在Controllers文件中创建DashboardController类，并且我们添加GetLanguageRank()方法，具体实现如下：
图5 DashboardController类
/// <summary>
/// Gets language rank data.
/// </summary>
/// <returns>JSON arrary.</returns>
public JsonResult GetLanguageRank()
{
// Gets data from database.
}
导入数据
上面，我们定义了DashboardController类，它包含GetLanguageRank()方法，接下来我们把CSV数据保存到数据库中。首先，我们在数据库中创建数据表，具体SQL代码如下：
-- ============================================= -- Description: Table for storing question tag data -- ============================================= SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO SET ANSI_PADDING ON GO CREATE TABLE [dbo].[QuestionTags]( [Name] [varchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL, [Question] [int] NOT NULL, [CreateOn] [datetime] NOT NULL ) ON [PRIMARY] GO SET ANSI_PADDING OFF
接着，我们CSV数据导入到SQL Server中，具体实现如下：
-- ============================================= -- Description: Imports csv data into database. -- ============================================= BULK INSERT QuestionTags FROM 'C:\Users\Administrator\Desktop\Stackoverflow Tags Data.csv' WITH ( FIRSTROW = 2, -- Start row excludes header. FIELDTERMINATOR = ',', --CSV field delimiter ROWTERMINATOR = '\n', --Use to shift the control to next row ERRORFILE = 'C:\Users\Administrator\Desktop\ErrorLog.csv'，? TABLOCK )
上面，我们直接使用SQL语句把CSV数据导入到数据库中，其中，我们定义了导入数据的源文件和数据格式，并且定义了ErrorLog文件记录导入失败的数据，最后，我们在表QuestionTags中添加自增型的Id主键。
图6 导入CSV数据
ASP.NET控制器
现在，我们已经把数据储存到数据库中了，接下来我们将使用EF获取数据库中的数据，接触过EF的应该都知道EF的编程模型有3种：
- Database First：数据库先行
- Model First：模型先行
- Code First：代码先行
由于，前面我们已经把数据表定义好了，所以我们将使用数据库先行（Database First）模型对数据库进行访问。
接下来，让我们实现GetLanguageRank()方法，具体代码如下：
/// <summary>
/// Gets language rank data.
/// </summary>
/// <param name="index">Specifies the range of data,
/// for instance, when index is 0, then get the data range from Jan/1/2010 till Feb/2/2010.
/// </param>
/// <returns>JSON Array</returns>
public JsonResult GetLanguageRank(int index = 0)
{
using (var db = new DashboardDbContext())
{
var result = (from tags in db.QuestionTags
orderby tags.CreateOn ascending
select new { tags.Id, tags.Name, tags.Question, tags.CreateOn }).Skip((index % 42) * 25).Take(25).ToList();
return Json(result, JsonRequestBehavior.AllowGet);
}
}
我们实现了GetLanguageRank()方法，它根据index值获取指定时间的数据，然后通过JSON数据格式返回给客户端。
现在，我们已经实现了饼状图（Dashboard_Pie）了，接下来，让我们运行Index.cshtml页面查看运行的效果吧！
图7 饼状图
我们注意到图1是一个动态图，它直观的展示了Stackoverflow热门标签的变化趋势，如果我们也要实现动态生成数据图该如何实现呢？
其实，问题转化为实时获取数据，然后生成数据图就OK了，如果要实现实时获取时间，我们想到的方法有：
- 1.Timer()
- 2.方法二数据库实时方法数据（SqlDependency）
- 3.Other（请大家分享好方法）
接下来，我们将使用Javascript中Timer()函数来定时访问GetLanguageRank()方法，所以我们需要修改Javascript代码，通过Timer()函数定时调用drawColumnChart()方法，具体实现如下：
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(timerStart);
var cnt = 0, t;
function timerStart() {
t = window.setInterval(drawColumnChart, 1000);
}
function timerStop() {
clearTimeout(t);
}
function drawColumnChart() {
$.ajax({
type: 'GET',
dataType: 'json',
url: '<%= Url.Content("~/Dashboard/GetLanguageRank") %>',
data: { index: cnt },
success: function(data) {
var dt = new google.visualization.DataTable();
dt.addColumn('string', 'Language');
dt.addColumn('number', 'Question');
for (var i = 0; i < data.length; i++) {
dt.addRow([data[i].Name, data[i].Question]);
}
var dateTime = new Date(parseInt(data[0].CreateOn.substr(6)));
var options = {
title: "Top 25 programming language on " +
(dateTime.getMonth() + 1) + '/' + dateTime.getDate() + '/' + dateTime.getFullYear(),
//width: 600,
height: 500
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnChart'));
chart.draw(dt, options);
},
error: function(xhr, textStatus, e) {
timerStop();
console.log('Status: ' + textStatus + ' Error: ' + e.toString());
},
complete: function() {
cnt = cnt + 1;
}
});
}
</script>
当Google的visualization库加载完毕后，访问回调函数timerStart()，然后使用setInterval()方法每隔1s就调用drawColumnChart()绘制新的柱状图。
图8 柱状图
现在，我们通过Timer()函数实时的访问API接口，数据通过柱状图动态地显示出来。
页面样式
现在，我们已经完成了饼状图和柱状图，接下来，我们需要给仪表程序添加一些简单的CSS效果，具体代码如下：
/*Dashboard APP CSS*/
.pageHeader
{
height: 20px;
background-color: #2C2C2C;
padding: 10px 10px;
margin-bottom: 10px;
color: White;
position: relative;
}
.pageHeader h1
{
font: normal 1.2em Arial;
color: White;
margin: 0;
padding: 0;
}
.pageHeader .platformular
{
position: absolute;
top: 10px;
right: 10px;
}
.pageBody
{
margin: 0 10px;
}
.pageFooter
{
clear: both;
padding-top: 10px;
width: 100%;
text-align: center;
font-size: 0.8em;
color: #686868;
margin: 25px 0 0 0;
border-top: solid 1px #e7e7e7;
}
现在，我们重新运行程序查看页面效果。
图10仪表程序
在本文中，我们通过使用ASP.NET MVC和EF的Database First实现了简单的仪表程序，使用Google Charts控件来显示数据图，这只是一个简单的程序，我们还有很大的改善空间，提供一个内容丰富和功能强大的程序是每个程序员的目标。
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章
- 这篇文章主要为大家详细介绍了ASP.NET购物车的实现过程，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-22
- 在开发过程中，使用Visual Studio的断点调试功能可以很方便帮我们调试发现程序存在的错误，同样Visual Studio也支持对SQL Server里面的存储过程进行调试，下面就让我们看看具体的调试方法。...2021-09-22
ASP.NET Core根据环境变量支持多个 appsettings.json配置文件
这篇文章主要介绍了ASP.NET Core根据环境变量支持多个 appsettings.json配置文件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22- 这篇文章主要介绍了记一次EFCore类型转换错误及解决方案，帮助大家更好的理解和学习使用asp.net core，感兴趣的朋友可以了解下...2021-09-22
- 这篇文章主要介绍了SpringMVC文件上传原理及实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-07-15
C# MVC模式中应该怎样区分应用程序逻辑（Controller层）和业务逻辑（Model层）?
这篇文章主要介绍了C# MVC模式中应该怎样区分应用程序逻辑（Controller层）和业务逻辑（Model层）?,这也小编做.NET项目时经常思考和让人混乱的一个问题,这篇文章写的挺好,一下清晰了许多,需要的朋友可以参考下...2020-06-25详解ASP.NET Core 中基于工厂的中间件激活的实现方法
这篇文章主要介绍了ASP.NET Core 中基于工厂的中间件激活的实现方法，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-09-22使用Maven 搭建 Spring MVC 本地部署Tomcat的详细教程
这篇文章主要介绍了使用Maven 搭建 Spring MVC 本地部署Tomcat,本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-08-16asp.net通过消息队列处理高并发请求(以抢小米手机为例)
这篇文章主要介绍了asp.net通过消息队列处理高并发请求(以抢小米手机为例)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22ASP.NET 2.0中的数据操作:使用两个DropDownList过滤的主/从报表
在前面的指南中我们研究了如何显示一个简单的主/从报表, 该报表使用DropDownList和GridView控件, DropDownList填充类别,GridView显示选定类别的产品. 这类报表用于显示具有...2016-05-19ASP.NET单选按钮控件RadioButton常用属性和方法介绍
RadioButton又称单选按钮，其在工具箱中的图标为 ，单选按钮通常成组出现，用于提供两个或多个互斥选项，即在一组单选钮中只能选择一个...2021-09-22- 这篇文章主要介绍了SpringMvc自动装箱及GET请求参数原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-19
- 这篇文章主要介绍了SpringMvc获取请求头请求体消息过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-17
- 这篇文章主要介绍了CocosCreator MVC架构，同学们在制作游戏过程中，尽量使用一些架构，会避免很多问题...2021-04-16
Springmvc ResponseBody响应json数据实现过程
这篇文章主要介绍了Springmvc ResponseBody响应json数据实现过程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-10-26ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容
这篇文章主要介绍了ASP.NET中iframe框架点击左边页面链接,右边显示链接页面内容的实现代码，感兴趣的小伙伴们可以参考一下...2021-09-22- 本篇文章介绍了，基于C#后台调用跨域MVC服务及带Cookie验证的实现。需要的朋友参考下...2020-06-25
- ASP.NET Web API具有与ASP.NET MVC类似的编程方式，ASP.NET Web API不仅仅具有一个完全独立的消息处理管道，而且这个管道比为ASP.NET MVC设计的管道更为复杂，功能也更为强大。下面创建一个简单的Web API项目，需要的朋友可以参考下...2021-09-22
- 这篇文章主要介绍了仅30行代码实现Javascript中的MVC的方法，MVC的基础是观察者模式，这是实现model和view同步的关键，想要深入了解的朋友可以参考本文...2016-02-18
- Spring MVC是Spring系列框架中使用频率最高的部分。不管是Spring Boot还是传统的Spring项目，只要是Web项目都会使用到Spring MVC部分。因此程序员一定要熟练掌握MVC部分。本篇博客简要分析Spring MVC处理一个请求的流程。...2021-02-06