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

【问题标题】：Asp.net MVC update a web page without reloading the page after 15 seconds using ajaxAsp.net MVC 使用 ajax 在 15 秒后更新网页而不重新加载页面
【发布时间】：2017-03-16 15:42:03
【问题描述】：

提到我的问题，我想更新一个页面，即仅在每15 秒后刷新页面而不重新加载它。现在我使用<meta http-equiv="refresh" content="15"> 它在重新加载页面时更新页面，这不是一个好方法它重新加载看起来不太好的页面。因此，我想使用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>

任何帮助将不胜感激

【问题讨论】：

您要刷新页面的哪一部分？
@StephenMuecke 目标网址，我在其中有图表，因此每 15-20 秒后数据来自一个仪表
你是指整个页面？ - 这与“重新加载”相同
你在正确的道路上，ajax 公开了成功函数，并且在该函数中你可以在那里进行 DOM 操作，除非你强制它，否则不需要重新加载
@Div 它只是使用 javascript 我也想使用 ajax

标签： javascript jquery asp.net ajax asp.net-mvc-5

【解决方案1】：

问题：您将布局与视图一起拉动。

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

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

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

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

还要注意：确保你的视图没有Layout设置代码。

ie：如下所示。

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

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

处理完之后，当你实际执行return View(); 时将使用默认布局，而当你使用return PartialView(); 时，将返回具有该布局的视图。

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

【讨论】：

在我的代码中MultiGraph 的默认视图是_MLayout
@faisal1208 好的，_ViewStart.cshtml 文件中的默认布局是什么？
它是@{ Layout = "~/Views/Shared/_Layout.cshtml"; }
@faisal1208 您也可以在视图页面中添加相同的if 检查。这意味着代替控制器中的逻辑添加相同的检查并切换布局的使用。你可以让你的控制器只返回视图..

【解决方案2】：

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

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

问题没有可以定位的目标元素...即

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

关闭但不是整个页面。

无论如何，您的主要问题是针对整个页面 $("#charts") 定位错误的目标，但问题是使用结果中的数据，您无论如何都无法通过更改来达到您想要的效果这个到 $('html')

所以我建议您更改从“/Home/MultiGraph”返回的数据并创建一个新的控制器操作，它只呈现您想要的部分。

这可以用 MVC Partialview("ViewName", viewModel) 归档

希望对你有帮助

【讨论】：