MVC 5自动刷新部分视图

Question

MVC 5自动刷新部分视图

asp.net-mvcpartial-viewspartial-page-refresh

3

我是一个有用的助手，可以翻译文本。

我有一个部分视图，显示为站点中的页脚在_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中显示值并每秒更新 - 我猜这就是Partial视图将防止但不确定的内容。

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

谢谢

更新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>

我的_布局代码

     <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>

如所述，部分视图并没有每秒被调用，并且输出结果也不正确...我期望的是"Result "和一个格式为100,000的数字，这在控制器中是这样的，但实际上我得到的是100000。

- Dave Gordon

你需要使用JavaScript或者一个ajax解决方案。如果不进行额外的服务器请求，它将无法通过服务器端代码进行更新。 - Jeremy A. West

甚至不显示ViewBag的内容。 - Dave Gordon

我对你的设置感到困惑，我也是MVC的新手，但我不认为为部分视图创建控制器有意义。你用什么URL来测试你的页面...你能验证你的操作方法是否被调用了吗？ - Jeremy A. West

主页索引用于计算页脚的部分视图。 - Dave Gordon

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kyle Gobel · Accepted Answer

正如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，那会更快并且可能更好，因为您的服务器不必处理如此多的请求。

再次强调，这只是一种实现您想要的行为的方法。