读取数据库数据，以报表的形式显示在前台网页（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();
});

}
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>

读取数据库数据，以报表的形式显示在前台网页（asp.net+echarts+ajax+数据库）

猜你喜欢