MVC 5自动刷新局部视图

时间:2014-05-31 22:32:46

标签: asp.net-mvc partial-views partial-page-refresh

我有一个局部视图,在_Layout中显示为网站的页脚。控制器每秒计算一个值 - 计算机犯罪的受害者数量。

控制器代码:

namespace EUWebRole.Controllers
{
public partial class PartialFooterStatisticsController : Controller
    {

    [OutputCache(NoStore = true, Location = OutputCacheLocation.Client, Duration = 1)]
    public ActionResult Index()
        {
        // 14 victims per second.
        // what second is it
        int hrs = DateTime.Now.Hour;
        int min = DateTime.Now.Minute;
        int sec = DateTime.Now.Second;

        int totalSeconds = sec + (min * 60) + (hrs * 3600);
        int totalVictims = totalSeconds * 14;
        ViewData["TotalVictims"] = totalVictims.ToString("N0");

        return PartialView("_PartialFooterStatistics");
        }
    }
}

部分视图看起来像这样 - 没有格式化或任何东西 - 我只想要现在的值:P

@ViewData["TotalVictims"]

最后,_Layout部分就在这里:

  @Html.Partial("_PartialFooterStatistics")

如何在_Layout中显示值并在不刷新整个页面的情况下每秒更新一次 - 我猜这是部分视图会阻止但不确定的。

很抱歉这么简单的问题,但我们都从某个地方开始。

由于

更新1

好的,我现在更进一步。 GetVictimCount只被调用一次。 Developer tools output

这是我当前的控制器代码:

 public partial class PartialFooterStatisticsController : Controller
{


    public ActionResult Index()
    {
        return PartialView("_PartialFooterStatistics");

    }

    public JsonResult GetVictimCount()
    {

        int hrs = DateTime.Now.Hour;
        int min = DateTime.Now.Minute;
        int sec = DateTime.Now.Second;

        int totalSeconds = sec + (min * 60) + (hrs * 3600);
        int totalVictims = totalSeconds * 14;

        //logic here for getting your count
        var victimCount = totalVictims;

        return Json(victimCount, JsonRequestBehavior.AllowGet);
    }

}

我的部分查看代码:

<script src="~/Scripts/jquery-1.10.2.js"></script>
<div id="victimCountId">
    Result
</div>


<script type="text/javascript">

var timeoutId;
$(document).ready(function () {
    timeoutId = window.setTimeout(UpdateCount, 1000);
});

function UpdateCount() {
    $.getJSON("PartialFooterStatistics/GetVictimCount", function (dataResponse) {
        var div = $('#victimCountId').html(dataResponse);

        printResult(div, item);

    });
}

function printResult(div, item) {
    div.append("Result " + item.Line1);
}
</script>

和我的_Layout代码

     <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        @Html.Partial("_PartialFooterStatistics")
    </footer>
</div>



@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)


</body>
</html>

<script type="text/javascript">

$(function () {

    setInterval(function () { $('#_PartialFooterStatistics').load('GetVictimStatistics'); }, 1000); // every 3 sec

});

</script>

function printResult(div, item) {
    div.append("Result " + item.Line1);
}
</script>

如上所述,Partial视图每秒都没有被调用,并且输出也不正确...我期待“结果”和一个格式化为100,000的数字,它在控制器中,但我得到的只是100000。

1 个答案:

答案 0 :(得分:4)

正如Jeremy West在评论中所说的那样......你需要使用javascript来实现这一目标。

您的MVC控制器操作在服务器上,因此只有在对该操作有请求时才会运行。

你可以用javascript(你在后台发送请求)来实现这一点。

因此,一个可能适合您的解决方案是执行一个返回一些JSON的操作。一个动作可能看起来像这样。

public class VictimController : Controller 
{
    public JsonResult GetVictimCount()
    {
        //logic here for getting your count
        var victimCount = ...

        return JsonResult(victimCount, JsonRequestBehavior.AllowGet);
    }
}

现在您已经掌握了继续更新计数的逻辑,您可以随意使用javascript调用它。使用jquery,解决方案看起来像

<script type='text/javascript'>
    function updateCount() {
        $.getJSON("/Victim/GetVictimCount", function (dataResponse) {
            //dataResponse will be whatever we returned from our action
            //so now we can just populate whatever dom element we want with the value
            //for example we'll just replace all the html in the dom element with id 'victimCountId'
            $('#victimCountId').html(dataResponse);
        });
    }
</script>

然后,因为您希望每秒运行一次,所以可以使用window.setTimeout

<script type="text/javascript">
    var timeoutId;
    $(document).ready(function () {
        timeoutId = window.setTimeout(updateCount, 1000);
    });
</script>

因此,使用此解决方案,您将每秒向服务器发送请求。我不确切地知道你在服务器上做了什么,或者它是否需要,但如果你可以将整个解决方案移动到只是javascript,这将更快,可能更好,因为你的服务器不必处理这么多请求。

同样,这只是获得你所追求的行为的一种方式。