ASP.NET MVC以JSON的方式调用数据库数据生成统计图
ASP.NET MVC 简介：
正如名称所言的那样，该技术的特色是 ：M：即是Model（模型）；V：即是Views（视图）；C：即是Controller（控制器）
模型：一组类，描述了要处理的数据以及修改和操作数据的业务规则；
视图：定义应用程序用户界面的显示方式。
控制器：一组类，用于处理来自用户、整个应用程序流以及特定用用程序逻辑的通信。
到目前为止，只知道View和Controller的用法，对于Model不太会用，但是最近领导让写一个把数据库的内容转换成统计，利用ECharts来实现。艰难的实现完成以后来做个笔记。
上代码吧，越说越乱。
首先是Controller部分：
using Microsoft.AspNetCore.Mvc;
using RoadFlow.Mapper;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Runtime.Serialization.Json;
namespace RoadFlow.Mvc.Controllers
{
public class GetEchartsController : Controller
{
public ActionResult Charts()
{
return View();
}
public JsonResult GetCharts()
{
ArrayList xAxisData = new ArrayList();
ArrayList yAxisData = new ArrayList();
System.Data.DataTable dt = new System.Data.DataTable();
var db = new DataContext();//已经连接完数据库
var table = db.GetDataTable("select count(receivename) num ,receivename name from ****where status = 2 group by receivename ");//此处是sql语句
for(int i=0;i<table.Rows.Count;i++)
{
xAxisData.Add(table.Rows[i].ItemArray[1]);//提取出我们要的部分存入到数组中
yAxisData.Add(table.Rows[i].ItemArray[0]);
}
var result = new {
name = xAxisData, num = yAxisData };//设计JSON格式
return Json(result);//返回JSON数据
}
}
}
接着上View部分的数据：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
@*<script src="echarts.common.min.js"></script>*@
<script src="~/RoadFlowResources/scripts/echarts.common.min.js"></script>
<script src="~/RoadFlowResources/scripts/jquery-1.12.4.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts
// 指定图表的配置项和数据
alert("开始执行");
$.ajax({
type: "post",
async: true,
url: "GetCharts",//一般写出相对路径的
dataType: "json",
success: function (result) {
var objsx = [];
var objsy = [];
for (var i = 0; i < result.num.length; i++) {
objsy[i] = JSON.parse(result.num[i]);//以特定的JSON的格式接收数字；
for (var i = 0; i < result.name.length; i++){
objsx[i] = JSON.stringify(result.name[i]);//以JSON的方式接收字符串
}
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '自己设计标题'
},
tooltip: {
},
legend: {
data: ['给个柱的含义']
},
xAxis: {
data: objsx
},
yAxis: {
},
series: [{
name: 'y轴的名称',
type: 'bar',
data: objsy
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("请求数据失败!");
myChart.hideLoading();
}
});
</script>
</body>
</html>
至此完成！！！
最最重要的：
1.设计输出部分的数据，如果不止一个返回值（正常都不止一组返回值），所以一定要以一种可以被处理的可以被接收的方式转换成JSON数据返回。
2.接收数据时一定要区分开，不然会报错，而且不好找哪里犯错了（本人是吃过亏的）。
3.URL的路径一定要写对，这是视图的相对路径，只要能找到该controller下对应的视图的路径即可。
执行结果如下(丑是丑了点，但是也算是从一个小白凑活出了一些东西)：
