Question

我正在创建一个实时数据门户，我必须使用c＃在asp.net中使用Ajax显示实时数据。

我有一个表和一个包含数据但以不同方式/不同风格的div。

每次我的页面在4秒后加载以显示更新的数据，表格和div都刷新以获得更新的数据。

最初当页面第一次加载时，我显示了表格以显示数据并隐藏div格式的数据，如果单击按钮（切换按钮），它将以div的形式显示数据并隐藏表格数据。

现在的问题是，当我点击切换按钮时，它不会以div格式显示数据，但会重新加载整个java脚本每次单击按钮时，都会在表格中显示数据。我想在表和div之间切换。

下面我有我的代码到目前为止我做了什么。请帮助我做错了什么。谢谢。

注意数据来自db，即SQL。

<form id="form1" runat="server">
    <div id="container">
            <table id="liveData">
            </table>
            <div id="div_f" style="display:none;">
                <%--<table id="liveData_div"></table>--%>
            </div>
    </div>
    <button>Toggle Data</button>
</form>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jquery-2.1.4.js"></script>
<script>
    (function worker() {
        $.ajax({

            type: "POST",
            url: "Default2.aspx/BindData",
            contentType: "application/json;charset=utf-8",
            data: {},
            dataType: "json",
            success: function (data) {
                //alert("Hello");
                $("#liveData").empty();
                if (data.d.length > 0) {
                    InDivs(data);
                    $("#liveData").append("<tr><th>Node Id</th><th>Parent</th><th>Voltage</th><th>Humid</th><th>HumTemp</th><th>PrTemp</th><th>Pressure</th><th>Light</th><th>Accel_X</th><th>Accel_Y</th><th>result_time</th></tr>");
                    for (var i = 0; i < data.d.length; i++) {
                        $("#liveData").append("<tr><td>" +
                        data.d[i].nodeID + "</td><td>" +
                        data.d[i].parent + "</td> <td>" +
                        data.d[i].voltage + "</td><td>" +
                        data.d[i].humid + "</td> <td>" +
                        data.d[i].humtemp + "</td><td>" +
                        data.d[i].prtemp + "</td> <td>" +
                        data.d[i].press + "</td><td>" +
                        data.d[i].light + "</td> <td>" +
                        data.d[i].accel_x + "</td><td>" +
                        data.d[i].accel_y + "</td><td>" +
                        data.d[i].result_time + "</td></tr>");
                    }


                }
                // Nontoggle();
            },

            error: function (result) {

                //Handling error
                alert("error");
            },
            complete: function () {
                // Schedule the next request when the current one's complete
                setTimeout(worker, 4000);
            }
        });
    })();

    function InDivs(data) {
        $("#div_f").empty();
        if (data.d.length > 0) {
            //$("#liveData").append("<tr><th>Node Id</th><th>Parent</th><th>Voltage</th><th>Humid</th><th>HumTemp</th><th>PrTemp</th><th>Pressure</th><th>Light</th><th>Accel_X</th><th>Accel_Y</th><th>result_time</th></tr>");
            for (var i = 0; i < data.d.length; i++) {
                $("#div_f").append(
                "<table class='LiveData_div'><tr>" +
                "<td>Node Id</td>" +
                "<td>" + data.d[i].nodeID + "</td>" +
                "<td>Parent Id</td>" +
                "<td>" + data.d[i].parent + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td>Voltage</td>" +
                "<td>" + data.d[i].voltage + "</td>" +
                "<td>Humid</td>" +
                "<td>" + data.d[i].humid + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td>Hum Temp</td>" +
                "<td>" + data.d[i].humtemp + "</td>" +
                "<td>Press</td>" +
                "<td>" + data.d[i].press + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td>Press Temp</td>" +
                "<td>" + data.d[i].prtemp + "</td>" +
                "<td>Light</td>" +
                "<td>" + data.d[i].light + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td>Accel_x</td>" +
                "<td>" + data.d[i].accel_x + "</td>" +
                "<td>Accel_y</td>" +
                "<td>" + data.d[i].accel_y + "</td>" +
                "</tr>" +
                "<tr>" +
                "<td>Time</td>" +
                "<td>" + data.d[i].result_time + "</td>" +
                "</tr></table>");
            }
        }
    }
    $(function () {
        $('button').live('click', function () {
            $('#div_f').toggle();
            $('#liveData').toggle();
        });
    });


</script>

Answer 1

<强>问题

您的网页重新加载，因为button标记默认为type='submit'，这将刷新页面。

<强>解决方案

您应该将类型定义为type='button'以防止出现这种行为，例如：

<button type='button'>Toggle Data</button>

希望这有帮助。

Answer 2

尝试添加“return false;”在点击按钮的末尾：

    $('button').live('click', function () {
        $('#div_f').toggle();
        $('#liveData').toggle();
        return false;
    });

使用.net中的ajax切换不使用动态内容的数据

2 个答案: