我正在研究Health&监控具有多个仪表板的应用程序。致力于在所有仪表板上逐个显示幻灯片。这样我们就可以在没有人工干预的情况下了解系统的健康状
这就是我所做的。开发了幻灯片Slideshow.cshtml的视图,其中有jquery代码连接到控制器,这些控制器返回部分视图,部分视图有代码连接到服务器并显示数据。部分视图是不同的仪表板。试图用尽可能简单的代码。对不起冗长的代码。
我看到仪表板在某段时间后没有显示任何数据。我正在寻找建议和最佳实践,以及如何以更好的方式做到这一点。我们可以使用任何开源插件吗?
Slideshow.cshtml
<div id="partialContainer"></div>
$(function () {
getData();
setInterval(getData, 60000); // Iterate all pages 20 sec each page
});
function getData() {
getData1();
setTimeout(getData2, 20000); //20 Sec
setTimeout(getData3, 40000); //20 Sec
}
function getData1() {
$.ajax({
url: "@Url.Action("GetData1", "Dashboard")",
dataType: 'html',
success: function (data) {
$('#partialContainer').html(data);
}
});
}
function getData2() {
$.ajax({
url: "@Url.Action("GetData2", "Dashboard")",
dataType: 'html',
success: function (data) {
$('#partialContainer').html(data);
}
});
}
function getData3() {
$.ajax({
url: "@Url.Action("GetData3", "Dashboard")",
dataType: 'html',
success: function (data) {
$('#partialContainer').html(data);
}
});
}
****Controller:****
public class DashboardController : Controller
{
public ActionResult GetData1()
{
return PartialView("_Data1");
}
public ActionResult GetData2()
{
return PartialView("_Data2");
}
public ActionResult GetData3()
{
return PartialView("_Data3");
}
}
****One of the Dashboards(partial view): _Data1.cshtml****
<script>
$.ajaxSetup({
// Disable caching of AJAX responses */
cache: false
});
getDataP1();
function getDataP1() {
$("#tblErrors > tbody").html("");
$.ajax({
url: '@Url.Action("GetSummary", "Dashboard")',
data: {},
type: 'GET',
error: function () {
},
success: function (res) {
for (i = 0; i < res.Errors.length; i++) {
var data = res.Errors[i];
var rowClass = 'alt';
if (i % 2 == 0)
rowClass = '';
var row = "<tr class='" + rowClass + "'>";
//Appn Name
row = row + "<td>" + data.AppnName + "</td>";
//Application Type
row = row + "<td>" + data.ApplicationType + "</td>";
//Status
row = row + "<td>" + data.Status + "</td>";
row = row + "</tr>";
$("#tblErrors").append(row);
}
$("label[for='refreshTime']").html(res.LastRefreshTime);
}
});
}
</script>