Ajax 表未显示答案

【问题标题】：Ajax Table is not showingAjax 表未显示
【发布时间】：2019-09-04 19:31:52
【问题描述】：

我正在从数据库创建 ajax 表。我的控制器返回对象列表但表未在页面上创建，而是显示 json 字符串。这是我的 ajax 调用和视图：

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<h2>Real Time Values</h2>

<body>
<div>
    <table id="tbldata" class="tabledata">
        <tr>
            <th>Meter Number</th>
            <th>Current A</th>
            <th>Current B</th>
            <th>Current C</th>
            <th>Current N</th>
            <th>Current Avg</th>
        </tr>
    </table>

</div>
<script>
    $(function () {
        $.get(("ShowRealTimeValues", "RealTimeValues", function (data) {
            var row;
            $.each(data, function (i, v1) {
                row += "<tr><td>" + v1.MeterNumber + "</td><td>" + v1.Current_A + "</td><td>" + v1.Current_B + "</td><td>" + v1.Current_C + "</td><td>" + v1.Current_N + "</td><td>" + v1.Current_Avg + "</td></tr>"
            });
            $("#tbldata").append(row);
        }))
    })
</script>

 </body>

这是我的控制器。我的控制器正在返回对象列表。

   public ActionResult ShowRealTimeValues()
    {
        DateTime time = DateTime.Now;
        var data = myDbContext.RealTimeValues.OrderByDescending(a => a.Time).Take(1).ToList();

        return Json(data, JsonRequestBehavior.AllowGet);
    }

不知道为什么没有创建表。控制台没有任何错误。

【问题讨论】：

为什么将数据存储在 session 中？当您收到 ajax 的响应时，为什么不建立您的表格？
在会话中存储数据对我来说很方便
但是我相信这里的问题是你的foreach不会被触发，因为页面没有加载。
我可以在页面中看到 json 格式的数据，但不知道为什么表格没有显示......
我也尝试从 ajax 创建表

标签： c# ajax asp.net-mvc session

【解决方案1】：

您不能在客户端使用会话。要操作表格，您甚至不需要将数据保持在会话中。解决方法可以是

 $.ajax({
        url: '@Url.Action("ShowRealTimeValues", "RealTimeValues")',
        type: "GET",
        success: function (result) {
            var theTable="<table id='yourTableId' class='yourTableClass'>";
            var theTr="";
            for (var i = 0; i < result.length; i++) {
                theTr = theTr + "<tr><td>" + result[i] + "</td></tr>";
            }
            theTable = theTable + theTr + "</table>";
            $(".tblContainer").empty();
            $(".tblContainer").html(theTable);
        }
        });

    <div class='tblContainer'>

    </div>

【讨论】：

在页面上显示：{"Id":0,"MeterNumber":"EMREAL_1","Date":"\/Date(-62135596800000)\/","Time":"\ /Date(-62135596800000)\/","Current_A":33.5,"Current_B":15.5,"Current_C":415.5,"Current_N":0.055,"Current_G":0,"Current_Avg":4456.5,"Voltage_A_B": 0,"Voltage_B_C":0,"Voltage_C_A":0,"Voltage_L_L_Avg":0,"Voltage_A_N":0,"Voltage_B_N":0,"Voltage_C_N":0,"Voltage_N_G":0,"Voltage_L_N_Avg":0, "ActivePower_A":0,"ActivePower_B":0,"ActivePower_C":0,"ActivePower_Total":0}

【解决方案2】：

我想这是不可能的，因为生命周期。

首先是在服务器端生成的 HTML 页面，之后您会获得 AJAX 结果，但 HTML 页面已经正常，因此您无法通过 Razor 填充您的表格，因为它运行的时间不同。

在我看来你应该使用 JavaSript 数组而不是 Session。

<table id="tbl">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
</table>

 $.ajax({
    url: '@Url.Action("ShowRealTimeValues", "RealTimeValues")',
    type: "GET",
    success: function (result) {
       var array= result
       var html='';
       for(var i = 0; i < array.length; i++)
       {
            html += '<tr><td>' + array[i].Property1+ 
                    '</td><td>' + array[i].Property2+ '</td></tr>';
       }
        $("#tbl").append(html);
    }
    });

更新

如果你有一个对象，你可以试试这个：

 $.ajax({
    url: '@Url.Action("ShowRealTimeValues", "RealTimeValues")',
    type: "GET",
    success: function (result) {
       var html='';
       html += '<tr><td>' + result.MeterNumber+'</td><td>' + result.Current_A+'</td></tr>';

        $("#tbl").append(html);
    }
    });

【讨论】：

兄弟我的页面结果是：{"Id":0,"MeterNumber":"EMREAL_1","Date":"\/Date(-62135596800000)\/","Time": "\/日期(-62135596800000)\/","Current_A":33.5,"Current_B":15.5,"Current_C":415.5,"Current_N":0.055,"Current_G":0,"Current_Avg":4456.5,"Voltage_A_B ":0,"Voltage_B_C":0,"Voltage_C_A":0,"Voltage_L_L_Avg":0,"Voltage_A_N":0,"Voltage_B_N":0,"Voltage_C_N":0,"Voltage_N_G":0,"Voltage_L_N_Avg": 0,"ActivePower_A":0,"ActivePower_B":0,"ActivePower_C":0,"ActivePower_Total":0}
没问题，如您所见，这是一个 JSON 对象，因此您不必使用 for 循环。所以 -> html += ' ' + array[i].MeterNumber + ' ' + array[i].Current_A + ' '; ...等
对不起，我完全愚蠢，你可以试试这个 -> html += ' ' + result.MeterNumber + ' ' + result.Current_A + ' '; ...等
我不知道为什么它不起作用.....我尝试了所有方法并尝试了 youtube 上的教程，但仍然注意到很好。控制台没有任何错误
你能链接一张关于问题的图片吗？