web.net中使用ajax动态加载数据——table和图表实例

susan花雨

已于 2022-04-19 10:46:08 修改

阅读量780

点赞数 1

分类专栏： C# 文章标签：前端 ajax .net

于 2022-02-23 18:53:40 首次发布

本文链接：https://blog.csdn.net/qq_42711010/article/details/123096399

版权

C# 专栏收录该内容

39 篇文章 6 订阅

订阅专栏

本人因工作需要，需要实现页面的局部刷新功能，在网上找了很多资料都不是很完整，本人自己结合网上资料和自己经验多次实验写了一个，在这里记录一下，方便以后查阅。

1.绑定table实例

1.引用工具：Newtonsoft.Json.dll
在这里插入图片描述

2.下载Newtonsoft.Json.dll：https://www.cnblogs.com/youmeng/p/4874897.html，如下图
在这里插入图片描述
实现table数据的自动刷新
aspx页面代码：

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
     <link href="css/bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript"  src="js/jquery-1.4.0-jquery.js"></script>
    <script src="js/jquery-1.8.1.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>      
     <table class="table table-bordered" id='tabletest'>
          <thead > 
               <tr>
                  <th>当前产能</th>
                  <th>差异产能</th>            
              </tr>   
         </thead>  
   
        <tbody id="tbody-result">  
         </tbody>     
 </table>
        <script type="text/javascript">
            $(function () {                             
                var tbody = window.document.getElementById("tbody-result");
                    setInterval(function () {                      
                        $.ajax({
                            url: 'WebForm5.aspx?action=Showcn',
                            type: 'post',
                            dataType: 'json',
                            async: false,
                            cache: false,
                            timeout: 3,
                            success: function (data) {
                                //方法中传入的参数data为后台获取的数据                                  
                                console.log(data);                                                                                            
                                var str = "";
                                    str += "<tr>" +  
                                    "<td>" + data[0].cn + "</td>" +
                                    "<td>" + data[0].qs + "</td>" +
                                    "</tr>";  
                                    tbody.innerHTML = str;
                            }
                        });
                    }, 1000); //一秒刷新                
            });         
         </script>
    </div>
    </form>
</body>
</html>

对应的CS代码如下：

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace AJAX
{
    public partial class WebForm5 : System.Web.UI.Page
    {
       
        string action = "";

        SQLHelper sql = new SQLHelper();
        protected void Page_Load(object sender, EventArgs e)
        {          
            action = Request["action"] == null ? "" : Request["action"];                                  
                switch (action)
                {
                    case "Showcn":
                        ShowCn();  
                        break;
                }
        }
        
        private void ShowCn()
        {
            DataTable dr = sql.f2();//连接数据库并返回DataTable的值
            if (dr != null)
            {
                if (dr.Rows.Count != 0)
                {
                    string strJson = ToJson(dr);

                    WriteJson(strJson);
                }
            }
        }
        public static string ToJson(object obj)
        {
            return NewtonsoftJson(obj);
        }

        public static string NewtonsoftJson(object obj)
        {
            return Newtonsoft.Json.JsonConvert.SerializeObject(obj, Newtonsoft.Json.Formatting.None);
        }

        private static void WriteJson(string str)
        {
            HttpContext.Current.Response.Write(str);
            //HttpContext.Current.Response.ContentType = "text/plain"; //设置MIME格式
            HttpContext.Current.Response.End();
        }       
    }
}

2.绑定echart图表

部分代码如下：

  <div class="biaoge" style="width:100%; height:25vh" id="chartmain_zhe"></div>
                        <script type="text/javascript">                          
                            //指定图表的配置项和数据
                            option2 = {                                
                            };
                            //获取dom容器
                            var myChart2 = echarts.init(document.getElementById('chartmain_zhe'));
                            // 使用刚指定的配置项和数据显示图表。
                            myChart2.setOption(option2);                        
                            $(function () {
                                setInterval(function () {
                                    $.ajax({
                                        url: 'Index.aspx?action=CTtime',
                                        type: 'post',
                                        dataType: 'json',
                                        async: false,
                                        cache: false,
                                        timeout: 3,
                                        success: function (data) {
                                            //方法中传入的参数data为后台获取的数据                                  
                                            console.log(data);
                                            //获取数据时显示加载状态图
                                            myChart2.showLoading();
                                            var name = [];
                                            var factdata = [];
                                            var up = [];                                          
                                            for (var i = 0; i < data.length; i++) {
                                                name[i] = data[i]["Adress_name"];
                                                factdata[i] = parseFloat(data[i]["DATA"]);
                                                up[i] = parseFloat(data[i]["UP"]);
                                            }
                                            console.log(name);
                                            console.log(factdata);
                                            console.log(up);
                                            myChart2.hideLoading();    //隐藏加载动画
                                            myChart2.setOption({
                                                title: {
                                                    text: ''
                                                },
                                                tooltip: {
                                                    trigger: 'axis'
                                                },
                                                legend: {
                                                    textStyle: {
                                                        color: '#fff',
                                                        fontSize: 12,
                                                    },
                                                    right: '10%',
                                                    data: ['实际','目标']
                                                },
                                                grid: {
                                                    x: 40,
                                                    y: 40,
                                                    x2: 20,
                                                    y2: 20,
                                                },
                                                toolbox: {
                                                    feature: {
                                                        //saveAsImage: {}
                                                    }
                                                },
                                                xAxis: {
                                                    type: 'category',
                                                    boundaryGap: false,
                                                    axisLabel: {
                                                        /*inside: true,*/
                                                        interval: 0,
                                                        textStyle: {
                                                            color: '#fff',
                                                            fontSize: 12

                                                        }
                                                    },
                                                    axisTick: {
                                                        show: false,
                                                    },
                                                    axisLine: {
                                                        show: true,
                                                        symbol: ['none', 'arrow'],
                                                        symbolOffset: 12,
                                                        lineStyle: {
                                                            color: '#fff',
                                                        }
                                                    },
                                                    data: name
                                                },
                                                yAxis: [
                                                    {
                                                    type: 'value',
                                                    //name: '实际',
                                                    min: 0,
                                                    axisLine: {
                                                        show: true,
                                                        symbol: ['none', 'arrow'],
                                                        symbolOffset: 12,
                                                        lineStyle: {
                                                            color: '#fff',
                                                        }
                                                    },
                                                    axisTick: {
                                                        show: false
                                                    },
                                                    axisLabel: {
                                                        textStyle: {
                                                            color: '#fff',
                                                            fontSize: 12
                                                        }
                                                    }
                                                    },                                                  
                                                ],
                                                series: [
                                                    {
                                                        name: '目标',                                                      
                                                        type: 'line',
                                                        //stack: '总量',
                                                        data: up,
                                                        itemStyle: {
                                                            normal: {
                                                               
                                                                label: {
                                                                    show: true, //开启显示
                                                                    position: 'top', //在上方显示
                                                                    textStyle: { //数值样式
                                                                        color: 'white',
                                                                        fontSize: '70%'
                                                                    },
                                                                    formatter: '{c}'
                                                                }
                                                            },
                                                        }
                                                    },
                                                    {
                                                        name: '实际',                                                       
                                                        type: 'line',
                                                        //stack: '总量',
                                                        data: factdata,
                                                        itemStyle: {
                                                            normal: {
                                                                color: "#0efdff",//折线点的颜色
                                                                lineStyle: {
                                                                    color: "#0efdff",//折线的颜色
                                                                    width: 2,
                                                                },
                                                                label: {
                                                                    show: true, //开启显示
                                                                    position: 'top', //在上方显示
                                                                    textStyle: { //数值样式
                                                                        color: 'white',
                                                                        fontSize: '70%'
                                                                    },
                                                                    formatter: '{c}'
                                                                }
                                                            },
                                                        },                                                                                                                                                                                                                      
                                                    },
                                                ]
                                            });
                                        }
                                    });
                                }, 1000);
                            });
                        </script>

上面代码为aspx页面部分代码，cs部分与上面的cs部分雷同，页面布局请自行调整，下图为绑定的echart图表：
在这里插入图片描述
总结：本篇文章主要实现ajax动态加载数据，实现实时刷新的功能。
参考链接：https://www.cnblogs.com/youmeng/p/4874897.html

susan花雨

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
web.net中使用ajax动态加载数据——table和图表实例

本人因工作需要，需要实现页面的局部刷新功能，在网上找了很多资料都不是很完整，本人自己结合网上资料和自己经验多次实验写了一个，在这里记录一下，方便以后查阅。1.绑定table实例1.引用工具：Newtonsoft.Json.dll2.下载Newtonsoft.Json.dll：https://www.cnblogs.com/youmeng/p/4874897.html，如下图实现table数据的自动刷新aspx页面代码：<%@ Page Language="C#" AutoEventWi
复制链接

扫一扫