如何自动更新局部视图？

Question

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

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

这是SomeView

@Html.Partial("SomeView",Model)

并且局部视图使用模型

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

现在我如何连接所有这些以便局部视图自动刷新？有很多（似乎已经过时）的方法可以接受这个，我希望遵循当前的最佳实践。我的研究告诉我，我应该使用jquery unobtrusive ajax来做到这一点。

Answer 1

您的问题含糊不清，因此您可能会得到模糊/广泛的答案。

如果您需要代码示例，我建议您提供您已尝试过的代码，以便我们进行修复。 Stack Overflow通常不是一个好去处＃34;我如何做这个复杂的事情？告诉我代码。＆＃34;有很多可能的解决方案。

我将向您展示三种（可能很多）可能的技术。

• 难度：我认为对于熟悉该技术的人来说有多难。
• 耐久性：（可能是一个坏名称）维护/扩展/修改是多么容易。它是如何可重复使用的，以及对SOLID的概率的粗略估计。

1。使用SignalR

难度：高，耐久性：高

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

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

2。使用Javascript和jQuery

难度：低，耐久性：低

Javascript已经有setInterval()功能。简单地给这个函数一个回调和一个超时周期（以毫秒为单位）作为参数，它将每隔X毫秒调用你的函数。

您可以将此与jQuery's AJAX API结合使用，以便每隔X秒，jQuery将异步调用MVC 部分视图，并将页面的一部分替换为指定的局部视图。例如：

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类似，但解决方案更加健壮。

您需要创建逻辑（通常在视图模型或控制器中），该逻辑将负责将某些任意数据（例如部分视图中的HTML）与用户页面上的内容同步。这可以通过计时器轻松完成 - 通常包含在框架中。

Answer 2

我个人使用jQuery AJAX调用来满足此类要求。它允许您从服务器查询新数据而无需刷新页面。

这篇文章中接受的答案是一个很好的存根来帮助你入门： jQuery/AJAX call with a timer

重新发布代码以便于查看：

$("button").click(function refreshText(){
    $.ajax({
        url:"http://127.0.0.1:8080/",
        success:function(result){
            $("#text").val(result);
            setTimeout(refreshText, 5000);
        }
    });
});

另外一个选项是SignalR，可以将更新推送到客户端，但它涉及的更多：http://signalr.net