ASP.NET MVC幻灯片 - 不同的视图

时间:2017-07-17 14:20:49

标签: javascript jquery asp.net angularjs asp.net-mvc

我正在研究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>

0 个答案:

没有答案