Asp.net MVC使用ajax在15秒后更新网页而不重新加载页面

Question

参考我的问题我想更新一个页面，即只在每15秒之后刷新页面而不重新加载它。现在我正在使用<meta http-equiv="refresh" content="15">它更新页面，同时重新加载它＆＃＆＃ 39;这不是一个好方法，因为它重新加载看起来不太好的页面。因此，我想使用ajax来更新/刷新我的页面，而不是每15秒后重新加载一次。

我的目标url是http://localhost:17104/Home/MultiGraph

我搜索过很多文章，发现ajax正在使用他的数据来更新页面。我只想更新/刷新页面而不重新加载

更新代码：

我使用了setInterval并且在其中我已经将我的ajax调用放在了下面

setInterval(function () {
    $.ajax({
        url: '/Home/MultiGraph',
        type: "POST",
        success: function (result) {
            $("#charts").html(result);
            alert(result);
        }
    });
    //chart1.redraw();
    //alert("hello");
}, 8000);

在我的警报中，它向我展示了一些可怕的数据

按ok后，我得到了以下结果

另外在ajax电话charts中，我的div是我的图表放置

 <div id="charts">
    <div id="container1" style="height: 400px; width:auto"></div>


    <div id="container2" style="height: 400px; width:auto"></div>


    <div id="container3" style="height: 400px; width:auto"></div>


    <div id="container4" style="height: 400px; width:auto"></div>
</div>

任何帮助都将受到高度赞赏

Answer 1

问题：您正在将视图与视图一起拉出。

解决方案：您需要在从Ajax调用请求时返回部分视图，否则服务器将传递enitre HTML和您的布局页面

要检查请求是否来自Ajax，您可以执行以下操作。这只是一个伪代码。

if (Request.IsAjaxRequest())
{
   return PartialView(); //you can pass in some data into view as PartialView(myModel)
}
 return View();

因此，您可以在其中使用相同的ActionResult和所有其他逻辑，并在末尾添加此if检查以在完整视图和部分视图之间切换。

另请注意：确保您的视图没有布局设置代码。

即：如下所示。

@{
   Layout = "~/Views/Shared/_Layout.cshtml";
}

如果你有这个并尝试做return PartialView();它将无效，它仍然会返回你的布局。因此，请确保删除布局设置行代码。

在您实际执行return View();之后，将使用默认布局。当您使用return PartialView();时，将返回包含布局的视图。

您的默认视图是哪个？如果您查看“视图”文件夹中的文件_ViewStart.cshtml，则可以获取该信息。

Answer 2

success: function (result) {
            $("#charts").html(result);
            alert(result);
        }

其中上面的“result”是一个表示整个页面的字符串...所以它与重定向到同一个url以刷新页面相同。

问题没有目标元素你可以做到这一点......即

$('html').replaceWith(result); 

已关闭，但不是整页。

无论如何，你的主要问题是针对整个页面$（“＃charts”）的错误目标，但问题是，结果中的数据无论如何都无法实现你想要的效果这到$（'html'）

所以我建议您更改从'/ Home / MultiGraph'返回的数据并创建一个新的控制器操作，该操作只会渲染您想要的部分。

这可以使用MVC Partialview（“ViewName”，viewModel）

进行存档

希望这有帮助