1、首先在VS2010里新建项目ASP.NET Web应用程序:WebApplication1;
在应用程序里新建项目:WebForm.aspx(Web窗体),Model.cs(类),Controller.cs(类),Handler.ashx(一般处理程序),WebForm.js(JScript文件);
2、(1)首先,创建一个Model类,对象实体化:
namespace WebApplication1
{
public class Model
{
public int id { get; set; }
public string name { get; set; }
public decimal score { get; set; }
}
}
(2)接着,创建Controller类,连接数据库并从数据库取数据:
public List<Model> select()
{
List<Model> list = null;
//连接数据库
string ConString = "server=10.197.3.101;user id=sa;password=123456;database=ASS";
//server=localhost;database=数据库名;user id=用户名;pwd=密码;
SqlConnection conn = new SqlConnection(ConString);
try
{
conn.Open();
Console.WriteLine("已经建立连接");
}
catch (SqlException ex)
{
Console.WriteLine("建立连接失败");
Console.WriteLine(ex.Message);
}
SqlCommand cmd = conn.CreateCommand();
cmd.CommandText = "select * from jQueryTest";
try
{
SqlDataReader dr = cmd.ExecuteReader();//提取数据库里的数据
if (dr.HasRows)
{
list = new List<Model>();
while (dr.Read())
{
Model data = new Model();
data = new Model();
data.name = dr["Name"].ToString();
data.score = (decimal)dr["Score"];
list.Add(data);
}
}
// return list;
//cmd.Dispose();
//conn.Close();
}
catch(Exception ex)
{
Console.WriteLine(ex.Message);
}
return list;
}
(3)然后,创建Handler一般处理程序,把从数据库取出来的数据序列化为json格式(因为前台接受的数据类型是json格式的):
context.Response.ContentType = "text/plain";
context.Response.Charset = "utf-8";
Controller objec = new Controller();
string jsonData = JsonConvert.SerializeObject(objec.select());
context.Response.Write(jsonData);
(4)之后,WebForm.js(JScript文件),从Handler.ashx中取json格式的数据:
$(function () {
Bar();
});
var names=new Array();var scores=new Array();
function Bar() {
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
type: "post",
async: false,
url: "Handler.ashx",
dataType: "json",
success:function(data){
for (var i=0;i<data.length;i++){
names.push(data[i].name);
scores.push(data[i].score);
}
InitChart(names, scores);
},
error: function(errmsg) {
alert("Ajax获取服务器数据出错了!"+ errmsg);
}
});
}
function InitChart(names, scores) {
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
data: names
},
yAxis: {
type: 'value'
},
series: [{
data: scores,
type: 'bar'
}]
};
myChart.setOption(option);
}
(5)最后,抛给前台页面:
<head runat="server">
<title>学生成绩表</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Include/JS/echarts.min.js" type="text/javascript"></script>
<script src="WebForm.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="main" style="width:300px ;height:400px;"> </div>
</form>
</body>
</html>