echarts 在.net 中和数据库交互

需求描述：在FineUIMVC中加载图形控件echarts　其官网中只有静态的json语句的数据源，没有关于取数据库的资料，几天下午百度了一些方法。坑太多了，但是只要方向没错，总有成功的方法：

1.起初从简单的Webform 中处理开始（思路：从数据库中取数据保留在datatable 中，再把datatable 转成json 格式的数据； ajax 怎样和后台交互：（通过一般处理程序.ashx 向js中异步传所需的数据）

2.先贴些代码：

一下是.ashx 代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;
using System.Web.Script.Serialization;

namespace WebApplication1
{
/// <summary>
/// Test01 的摘要说明
/// </summary>
public class Test01 : IHttpHandler
{
/// <summary>
/// 您将需要在网站的 Web.config 文件中配置此处理程序
/// 并向 IIS 注册它，然后才能使用它。有关详细信息，
/// 请参见下面的链接: http://go.microsoft.com/?linkid=8101007
/// </summary>
#region IHttpHandler Members
SqlConnection con = new SqlConnection("Server=.;User Id=sa;Pwd=123456;DataBase=AppBoxMvc");
DataSet ds = new DataSet();
SqlDataAdapter adapter = new SqlDataAdapter();
JavaScriptSerializer jsS = new JavaScriptSerializer();
List<object> lists = new List<object>();
//Series seriesObj = new Series();
string result = "";

public void ProcessRequest(HttpContext context)
{
//获取一同发送过来的参数
//string command = context.Request["cmd"];
context.Response.ContentType = "text/plain";
//用来传回去的内容
//context.Response.Write("Hello World");
Get_Data01(context);
}

public void Get_Data01(HttpContext context)
{
string sql = @"SELECT Name, ParentID FROM dbo.Menus WHERE ParentID IS NOT null and ParentID <> 1";
ds = GetDataFromDatabase(sql);
lists = new List<object>();
foreach (DataRow dr in ds.Tables[0].Rows)
{
var obj = new { Name = dr["Name"], ParentID = dr["ParentID"] };
lists.Add(obj);
}
jsS = new JavaScriptSerializer();
result = jsS.Serialize(lists);
context.Response.Write(result);
}

public DataSet GetDataFromDatabase(string sql)
{
ds = new DataSet();
adapter = new SqlDataAdapter(sql, con);
adapter.Fill(ds);
return ds;
}

public bool IsReusable
{
// 如果无法为其他请求重用托管处理程序，则返回 false。
// 如果按请求保留某些状态信息，则通常这将为 false。
get { return false; }
}

#endregion
}
}

以上代码返回web调用的数据源。

前端代码：

一，添加 js引用

<script src="echarts.js"></script>

--- jquery 库
<script src="jquery-1.11.1.js"></script>

二，拼接动态字符串

var name = '[';

name += 'transresult[' + item + '].Name' + ', ';

name += ']';

三，取动态字符串的值

--eval 函数

eval(name);

四，完整代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<title>ECharts</title>

<script src="echarts.js"></script>
<script src="jquery-1.11.1.js"></script>
</head>
<body>

<div id="main1" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例

var myChart1 = echarts.init(document.getElementById('main1'));

// 指定图表的配置项和数据
var option1 = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
title: {
text: '',
subtext: '',
},
legend: {
data: ['data'],
right: '5%'
},
grid: {
left: '5%',
right: '0%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: []
}
],

yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'New',
type: 'bar',
data: [100],
markPoint: {
data: [
{ type: 'max', name: 'Max Value' },
{ type: 'min', name: 'Min Value' }
]
},
},
]
};

$.ajax({
type: "post",
async: false,
url: "Test01.ashx",

datatype: "json",
success: function (result) {
if (result) {

eval("var transresult=" + result);

</script>

</body>
</html>

--------------------------------------------------------------------------------------------------------------------------

FINEUIMVC 中的测试。

是否可以使用一般窗体：（可以，但需要修改Web.config 中添加以下内容）

然后按正常的控制器视图模式就可以生成类型webform的程序

如果是正常的.cshtml 文件如果能在JS 代码里处理一般处理过程，则其加载数据的方式和 webform无异。

在测试环境中是成功的！

转载于:https://www.cnblogs.com/hzf08/p/7475034.html

echarts 在.net 中和数据库交互相关推荐

Java豆瓣电影爬虫——减少与数据库交互实现批量插入
节前一个误操作把mysql中record表和movie表都清空了,显然我是没有做什么mysql备份的.所以,索性我把所有的表数据都清空的,一夜回到解放前-- 项目地址:https://github.c ...
shell编程系列22--shell操作数据库实战之shell脚本与MySQL数据库交互(增删改查)
shell编程系列22--shell操作数据库实战之shell脚本与MySQL数据库交互(增删改查)Shell脚本与MySQL数据库交互(增删改查)# 环境准备:安装mariadb 数据库 [root ...
帆软报表调用mysql存储过程_FineReport单行与数据库交互的方法
FineReport单行与数据库交互的方法 1. 问题描述我们在做一张报表填报的时候经常会遇到需要在一行进行添加动作,将该行数据直接与数据库交互,执行存储过程过程.我们可以通过每一行增加帆软&q ...
竞赛报名 | AI时代数据库交互怎么玩？首届中文NL2SQL挑战赛开战
也许用不了多久,人们就会看到全新的数据库交互方式. 不一定是专业的SQL语言开发者,也不用局限于传统的条件筛选,交互很简单,说说话,就可以随心所欲的调用所需数据,甚至完成更复杂的"逻辑&qu ...
FineReport单行与数据库交互的方法
1. 问题描述我们在做一张报表填报的时候经常会遇到需要在一行进行添加动作,将该行数据直接与数据库交互,执行存储过程过程.我们可以通过每一行增加帆软"插入"按钮实现插入动作,并 ...
辅助的写与数据库交互的XML文件的类
现在企业级WEB应用中与数据库交互的XML文件都是通过插件自动生成的,不过有些时候修改比较老的项目的时候也是需要手动的来做这一动作的!如下代码就是一个实现上述的功能的辅助类,在此记录一下以备后用! p ...
java与mysql的交互_java与数据库交互常用到的一些方法
下面我整理了一下java中常用的几个与数据库交互的常用方法,仅供参考: 1.执行SQL(dao层的实现类中) (1)SQL查询: //import org.hibernate.Query; //imp ...
go 连接服务器并存放图片_基于 Go 语言开发在线论坛（二）：通过模型类与MySQL数据库交互...
在这篇教程中,我们将在 MySQL 中创建一个 chitchat 数据库作为论坛项目的数据库,然后在 Go 项目中编写模型类与之进行交互.你可以本地安装 MySQL 数据库,也可以基于 Docker ...
JQuery如何与数据库交互
JQuery与数据库交互可利用jQuery.ajax()来实现. 例如: jQuery.ajax({ type: "post",//也可以是get方式 url: "XX. ...

echarts 在.net 中和数据库交互

echarts 在.net 中和数据库交互相关推荐

最新文章

热门文章