jquery - 如何自动更新局部 View ？

Question

我正在尝试转换我的 MVC 页面之一，以便它每 10 秒自动更新一次数据。这是调用“主” View 的方法。

    public ActionResult Index()
    {
        return View("SomeView", new SomeViewModel { Rows = GetSomeInfo() });
    }

这是一些 View

@Html.Partial("SomeView",Model)

并且部分 View 消耗模型

@model DatabaseConnectionMonitor.Models.TestDbModel
@foreach(var row in @Model.Rows)......

现在我该如何连接这一切以便部分 View 自动刷新？有很多(似乎已经过时的)方法可以实现这一点，我想遵循当前的最佳实践。我的研究告诉我我应该使用 jquery 不引人注目的 ajax 来做到这一点。

Answer 1

您的问题含糊/宽泛，因此您可能会得到含糊/宽泛的答案。

如果您想要代码示例，那么我建议您提供您尝试过的代码，以便我们可以修复它。 Stack Overflow 通常不是一个“我如何做这个复杂的事情？给我看代码”的好地方。有很多可能的解决方案。

我将向您展示三种(可能是多种)可能的技术。

• 难度:我认为对于刚接触该技术的人来说有多困难。
• 耐用性:(可能是一个坏名字)维护/扩展/修改的容易程度。它的可重用性如何以及如何粗略估计SOLID确实如此。

1。使用 SignalR

难度:高，耐久度:高

SignalR是一个 .NET 库，非常适合集成到 ASP.NET MVC 应用程序中。它允许您将信息从服务器端代码实时发送到一个或多个客户端。这意味着页面的一部分不会根据时间刷新，而是根据某些任意事件刷新。

这种技术在 Facebook 等现代复杂的 Web 应用程序中非常流行。在此类示例中，当新数据传入时，页面通常会进行小刷新或更新。

2。使用 Javascript 和 jQuery

难度:低，耐久度:低

Javascript 已经有 setInterval()功能。只需给这个函数一个回调和一个超时时间(以毫秒为单位)作为参数，它就会每 X 毫秒调用您的函数。

您可以将其与 jQuery's 结合使用AJAX API这样每隔 X 秒，jQuery 就会异步调用 MVC 部分 View ，并用指定的部分 View 替换页面的一部分。例如:

setInterval(function() {
    $.ajax({
        url: "@Url.Action("Action", Controller)"
    }).success(function(data) {
        $("#someElement").html(data);
    });
}, 10000);

3。使用 Web 应用程序 Javascript 框架

难度:中，耐久度:高

Web application frameworks如AngularJS (我的选择)，Backbone.js , Knockout等等都是比 jQuery 更好的实现这一目标的方法。基本思想与 jQuery 类似，但解决方案更加健壮。

您需要创建负责将某些任意数据(例如部分 View 中的 HTML)与用户页面上的数据同步的逻辑(通常在 View 模型或 Controller 中)。这可以通过计时器轻松完成 - 计时器通常包含在框架中。