讀取資料庫資料，以報表的形式顯示在前臺網頁（asp.net+echarts+ajax+資料庫）
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>