Asp.net Core MVC模型实现HTML使用jQuery的AJAX方法来获取后端数据并以柱状图、饼图以及表格形式展示（GET请求时是否允许返回JSON数据）
一、撰写后端代码数据：定义JsonResult类，将数据以JSON格式返回给客户端
（1）Asp.net的JsonResult类简介
JsonResult是ASP.NET中的一个类，它用于将数据以JSON格式返回给客户端。
JsonResult是ActionResult类的一个派生类，它表示一个操作方法的结果，该结果将数据序列化为JSON格式，并将其作为HTTP响应返回给客户端。
您可以使用JsonResult来返回各种类型的数据，例如对象、集合或匿名类型。当客户端请求一个返回JSON数据的操作方法时，您可以使用JsonResult来将数据序列化为JSON格式，并通过HTTP响应发送给客户端。
以下是使用JsonResult的示例：
public class DataController : Controller
{
public JsonResult GetData()
{
// 获取要返回的数据
var data = new { Name = "John", Age = 25 };
// 返回JsonResult对象
return Json(data);
}
}
在这个示例中，GetData方法返回一个JsonResult对象，其中包含一个匿名类型的数据。当客户端请求GetData方法时，ASP.NET将会将数据序列化为JSON格式，并将其作为HTTP响应返回给客户端。
请注意，您可以在JsonResult对象上设置其他属性，例如JsonRequestBehavior属性，以指定JSON序列化的行为。默认情况下，JsonRequestBehavior属性设置为AllowGet，允许通过GET请求获取JSON数据。
（2）代码：每行基本都有解释，简单易懂
public JsonResult AnswerListData1(int XXX, int XXX, string XXX, string XXX, string XXX, string XXX, string XXX, string XXX)
{
if (string.IsNullOrWhiteSpace(XXX) || XXX == "-1")
{
// 如果想允许通过GET请求获取JSON数据，可以将JsonRequestBehavior属性设置为JsonRequestBehavior.AllowGet，new List() 数据通用类
/*
public class QuestionData
{
public int CountData { get; set; }
public int QuestionId { get; set; }
public string QuestionContent { get; set; }
public List AnswerDatas { get; set; } = new List();
}
*/
return Json(new List<QuestionData>(), JsonRequestBehavior.AllowGet);
}
//sql的筛选条件
string where = " where 1=1";
//IsNullOrEmpty 判断是否为空或null，Trim 去掉字符的空格
if (!string.IsNullOrEmpty(XXX.Trim()))
{
//拼接sql的筛选语句
where += $@" and b.XXX = '{XXX}'";
}
//IsNullOrWhiteSpace检查一个字符串是否为null、空字符串或仅包含空白字符,ToInt32将其他数据类型转换为32位有符号整数
if (!string.IsNullOrWhiteSpace(XXX) && Convert.ToInt32(XXX) > 0)
{
where += $@" and b.XXX = {XXX}";
}
if (!string.IsNullOrWhiteSpace(XXX) && Convert.ToInt32(XXX) > 0)
{
where += $@" and c.XXX = {XXX}";
}
if (string.IsNullOrEmpty(XXX))//添加单选时间
{
WM3Y = "XXX";
}
DateTime d_one = DateTime.Now; DateTime d_last = DateTime.Now;
switch (WM3Y)
{
case "Week":
//ToDateTime将其他数据类型转换为DateTime类型，即日期和时间类型,并转化为"yyyy-MM-dd"形式
d_one = Convert.ToDateTime(GetThisWeekMonday().ToString("yyyy-MM-dd"));
d_last = Convert.ToDateTime(d_one.AddDays(6).ToString("yyyy-MM-dd") + " 23:59:59");
where += $@" and a.InsertTime >= '{d_one}'";
where += $@" and a.InsertTime <= '{d_last}'";
break;
case "Month":
//DateTime.Now.AddDays获取当前时间的前面时间或后面的时间
d_one = DateTime.Now.AddDays(1 - DateTime.Now.Day).Date;
d_last = DateTime.Now.AddDays(1 - DateTime.Now.Day).Date.AddMonths(1).AddSeconds(-1);
where += $@" and a.InsertTime >= '{d_one}'";
where += $@" and a.InsertTime <= '{d_last}'";
break;
case "Month3":
GetMonth3Date(out d_one, out d_last);
where += $@" and a.InsertTime >= '{d_one}'";
where += $@" and a.InsertTime <= '{d_last}'";
break;
case "Year":
GetYearDate(out d_one, out d_last);
where += $@" and a.InsertTime >= '{d_one}'";
where += $@" and a.InsertTime <= '{d_last}'";
break;
}
string sql = $@"select xxxxxxx from Answer aa
inner join XXXX a on a.XXXX=aa.XXXX
inner join XXXX b on b.XXXX=a.XXXX
inner join XXXX c on c.XXXX=a.XXXX
inner join XXXX Q on Q.XXXX=aa.XXXX and Q.XXXX in ('xxx','xxx') {where} and aa.XXXX=400 order by InsertTime desc;";
//SimpleSqlHelper.ExecuteDataset 一些sql语句增删改查通用方法（类），前面有些文章介绍了，大家可以去参考
DataSet ds = SimpleSqlHelper.ExecuteDataset(SimpleSqlHelper.GetConnSting(), CommandType.Text, sql);
var dt = ds.Tables[0];
var AnswerList = new List<object>();
DataColumn dc1 = new DataColumn("XXXXX", Type.GetType("System.Object"));
dt.Columns.Add(dc1);
for (int i = 0; i < dt.Rows.Count; i++)
{
if (dt.Rows[i]["XXXXXt"].ToString().Length <= 2)
{
string[] answers = dt.Rows[i]["XXXXX"].ToString().Split('|');
for (int j = 0; j < answers.Length; j++)
{
string[] answerss = answers[j].ToString().Split('~');
if (dt.Rows[i]["XXXXX"].ToString() == answerss[0])
{
dt.Rows[i]["XXXXX"] = answerss[1];
//AnswerList.Add(answerss[1]);
}
else
{
continue;
}
}
}
else
{
dt.Rows[i]["XXXXX"] = dt.Rows[i]["XXXXX"].ToString();
// AnswerList.Add(dt.Rows[i]["AnswerContent"].ToString());
}
}
for (int i = dt.Rows.Count - 1; i >= 0; i--)
{
DataRow row = dt.Rows[i];
if (dt.Rows[i]["XXXXX"].ToString().Length <= 2)
{
dt.Rows.RemoveAt(i); //删除不满足要求的行数据
}
else
{
continue;
}
}
DbTableConvertor<AnswerModel> T1 = new DbTableConvertor<AnswerModel>();
List<AnswerModel> sugList = T1.ConvertToList(dt);
var total = sugList.Count;
var rows = sugList.Skip(offset).Take(limit).ToList();
return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
}
二、前端html代码的撰写
（1）构造前端表格div
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-table"></i> XXXXXX: XXXXXX</h3>
</div>
<div class="panel-body">
<table id="tb_departments"></table>
</div>
</div>
（2）AJAX方法
<script type="text/javascript">
$(function () {
$.ajax({
type: "post",
url: "@Url.Content("~")/XXXXXXXXXX",
data: { "firstName": "请选择"},
success: function (data) {
$('#XXXXXX').empty();
$.each(data, function (i, v) {
$('#XXXXXX').append(' v.Key + '">' + v.Value + '');
});
$('#XXXXXX').selectpicker('refresh');
},
error: function () {
Ewin.alert({ message: "出错了！", btnok: "确定", btncl: "关闭" });
},
});
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
var oTable1 = new TableInit1();
oTable1.Init();
var oTable2 = new TableInit2();
oTable2.Init();
//2.初始化Button的点击事件
var oButtonInit = new ButtonInit();
oButtonInit.Init();
//3.初始化图标
var oChartInit = new ChartInit();
oChartInit.Init();
formValidator();
});
//验证方法
function formValidator() {
//验证
$('form').bootstrapValidator({
message: 'This value is not valid',
excluded: [':disabled'],//[':disabled', ':hidden', ':not(:visible)']
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
}
});
}
//Modal验证销毁重构
$('#myModal').on('hidden.bs.modal', function () {
$("#modalform").data('bootstrapValidator').destroy();
$('#modalform').data('bootstrapValidator', null);
formValidator();
});
//立即验证
function revalid() {
$("#modalform").data('bootstrapValidator').destroy();
$('#modalform').data('bootstrapValidator', null);
formValidator();
var bootstrapValidator = $("#modalform").data("bootstrapValidator");
bootstrapValidator.validate();
}
var ChartInit = function () {
var oChartInit = new Object();
function loadChart1(data, chartId) {
var zlfxChart = echarts.init(document.getElementById(chartId));
var titlelst = ['PatientNum'];
var datalst = ['人数占比'];
var series = [];
for (var i = 0; i < data.length; i++) {
titlelst.push(data[i].AnswerContent);
datalst.push(data[i].Percent);
series.push({ type: 'bar' });
}
var option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份数据。
source: [
titlelst,
datalst
]
},
// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
xAxis: { type: 'category' },
// 声明一个 Y 轴，数值轴。
yAxis: {},
// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
series: series
};
zlfxChart.setOption(option);
}
function loadChart2(data, chartId) {
var zbfxChart = echarts.init(document.getElementById(chartId));
var datalst = [];
for (var i = 0; i < data.length; i++) {
datalst.push([data[i].AnswerContent,data[i].Percent]);
}
var option2 = {
dataset: [
{
// 这个 dataset 的 index 是 `0`。
source: datalst
// id: 'a'
}
],
legend: {
show: true
},
series: [
{
type: 'pie',
datasetIndex: 0
}, {
type: 'pie',
label: { //饼图图形上的文本标签
normal: {
show: true,
position: 'inner', //标签的位置
textStyle: {
fontWeight: 300,
fontSize: 12 //文字的字体大小
},
formatter: '{d}%'
}
},
datasetIndex: 0
}
]
};
zbfxChart.setOption(option2);
}
//初始化图标
oChartInit.Init = function () {
debugger
var InvType = $("#XXXXXX").val();
var HospitalId = $("#XXXXXX").val();
var OfficeName = $("#XXXXXX").val();
var WM3Y = $('XXXXXX').val();
$.ajax({
type: "post",
url: "@Url.Content("~")/XXXXXX",
data: { "XXXXXX": InvType, "XXXXXX": HospitalId, "XXXXXX": OfficeName, "WM3Y": WM3Y },
async: false,//同步
success: function (data) {
debugger
$('#main').html('');
if (data.length == 0) {
$('#main').append('暂无数据');
return;
}
var k = 0;
for (var i = 0; i < data.length; i++) {
var panel;
if (i % 2 == 0) {
panel = $('+ k + '">').appendTo('#main');
panel.append(` <div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-bar-chart"></i> `+ data[i].QuestionContent + `</h3>
</div>
<div class="panel-body">
<div id="zlfx`+ k + `" style="width: 100%;height:400px;"></div>
</div>
</div>
</div>`);
loadChart1(data[i].AnswerDatas, 'zlfx' + k);
k++;
} else {
panel = $('#panel' + (k-1));
panel.append(`<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-pie-chart"></i> `+ data[i].QuestionContent + `</h3>
</div>
<div class="panel-body">
<div id="zbfx`+ (k - 1) + `" style="width: 100%;height:400px;"></div>
</div>
</div>
</div>`);
loadChart2(data[i].AnswerDatas, 'zbfx' + (k - 1));
}
}
$('#XXXXXX').val(data[0].CountData); // 设置输入框的值为新值
},
error: function () {
Ewin.alert({ message: "初始化图标出错了！", btnok: "确定", btncl: "关闭" });
},
});
};
return oChartInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
//下拉框选中第一个值
function resetValue() {
$('.firstselect').each(function (i, j) {
var options = $(j).find("option");
options.attr("selected", false);
options.first().attr("selected", true);
})
}
oInit.Init = function () {
$("#XXXXXX").change(function () {
var seloffice = $("#XXXXXX");
var selvalue = $("#XXXXXX").val();
//var selbasevalue = $("#selBaseInvType").val();
var hid = $("#XXXXXX").val();
seloffice.empty();
$.ajax({
type: "post",
url: "@Url.Content("~")/XXXXXX",
data: { "XXXXXX": selvalue, "XXXXXX": hid, "XXXXXX": ""},
success: function (data) {
$.each(data, function (i, v) {
$("").val(v.Key).text(v.Value).appendTo(seloffice);
});
},
error: function () {
Ewin.alert({ message: "出错了！", btnok: "确定", btncl: "关闭" });
},
});
});
return oInit;
};
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#XXXXXX').bootstrapTable({
url: '@Url.Content("~")/XXXXXX', //请求后台的URL（*）
method: 'get', //请求方式（*）
toolbar: '', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: false, //是否启用排序
sortOrder: "desc", //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [5, 10, 20, 50], //可供选择的每页的行数（*）
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: false, //是否显示所有的列
showRefresh: false, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
//uniqueId: "AnswerId", //每一行的唯一标识，一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
innerWidth:40,
columns: [
{ checkbox: true },
{
sortable: true,
field: 'XXXXXX',
title: 'XXXXXX'
},
{
sortable: true,
field: 'XXXXXX',
title: 'XXXXXX',
formatter: function (value, row, index) {
return changeDateFormat(value)
}
}]
});
function changeDateFormat(cellval) {
var dateVal = cellval + "";
if (cellval != null) {
var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
}
}
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
order: params.order,
ordername: params.sort,
InvType: $("XXXXXX").val(),
HospitalId: $("XXXXXX").val(),
OfficeName: $("XXXXXX").val(),
WM3Y: $('XXXXXX').val()
};
return temp;
};
return oTableInit;
};
</script>
三、结果
