使用 WebSocket 使用来自 AJAX 调用的数据显示和更新表

Question

我试图在 PartialView 的表中显示和更新数据。我的解决方案不起作用。

这是我的视图废料 Index.cshtml

@model IEnumerable<Exchange.WebUI.Models.Item>
@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript">
    var webSocket;
    function webSocketResults() {
        webSocket = new WebSocket("ws://....");
        webSocket.onmessage = function (event) {
            showCurrenciesData(event.data);
            $("#webSocketValue").text(event.data);
        };
    }
    function showCurrenciesData(data) {
        $.ajax({
            type: 'POST',
            url: "@Url.Action("getWebSocketResults", "Home")",
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: data,
            success: function(data) {
                $("#currenciesTable").html(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(thrownError, xhr, ajaxOptions);
            }
        });
    }
    window.onload = webSocketResults;
</script>
<div class="row">
    <div class="col-md-6 well well-sm">
        <h2>Currencies</h2>
        <hr>
            @Html.Partial("_CurrenciesTable", Model)
    </div>....

部分视图_CurrenciesTable.cshtml

@model IEnumerable<Exchange.WebUI.Models.Item>
@{
    ViewBag.Title = "_CurrenciesTable";
}
<div id="currenciesTable">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.code)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.unit)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.purchasePrice)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.sellPrice)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.averagePrice)
            </th>
        </tr>
        </thead>
            @if (Model != null)
            {
                foreach (var item in Model)
                {
                    <tbody>
                        <tr>
                            <td>
                                @Html.DisplayFor(modelItem => item.name)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.code)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.unit)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.purchasePrice)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.sellPrice)
                            </td>
                            <td>
                                @Html.DisplayFor(modelItem => item.averagePrice)
                            </td>
                        </tr>
                    </tbody>
                }
            }
            else
            {
                <tbody>
                <tr>
                    <td>
                        No Connection:
                    </td>
                </tr>
                </tbody>
            }
</table>
</div>

还有Controller HomeController.cs

        public ActionResult getWebSocketResults(CurrenciesViewModel currencies)
        {
            if (Request.IsAjaxRequest())
            {
            return PartialView("_CurrenciesTable", currencies.items);
            }
            else
            {
                return View(currencies.items);
            }
        }
        public ActionResult Index()
        {
            return View();
        }

在调试过程中，我在控制器和部分视图中看到来自 ajax 的数据，但表仍然是空的。

测试画面

首先是调试局部视图，其次是表格，第三是来自 ajax 错误函数的错误 - 我不明白这个错误

Answer 1

尝试在 ajax 调用中将 dataType: 'json' 替换为 dataType: 'html'。