c# - 使用 Asp.Net MVC 和 SignalR 创建可更新的项目列表

Question

我已经创建了一个 ASP.NET MVC 5 Web 应用程序并安装了 SignalR 包。

我创建了两个简单的模型类(它们现在很简单，但稍后会对其进行扩展): Item其中仅包含一个字符串属性:

public string Name { get; set; }

和一个ItemList其中包含 Item 的列表作为属性(property):

public List<Item> Items{ get; set; }

我创建了一个新的 Razor View (Items.cshtml) 用于与 ItemList 进行交互，我向其中添加了一些静态文本并将其连接到导航菜单。

我创建了一个名为 ItemHub 的新 SignalR hub，它是从 Hub 扩展而来的(但它上面还没有任何方法)。

到目前为止一切都很好。

我想要做的是拥有我的页面，以便它可以列出当前的 ItemList，但也可以添加和删除项目。但我希望使用 SignalR(通过套接字)发生这种情况，以便在连接到页面的所有客户端上立即看到更改，任何客户端也可以添加/删除项目。

请问我该怎么做？

Answer 1

您应该使用常规的 Controller 通过操作在您的列表中添加/删除项目。在两种操作方法(用于添加/删除)中，您在保存更改后调用 SignalR Hub:

public class ItemsController : Controller
{
    public ActionResult Add()
    {
        // add item and save changes
        // ...
        // then invoke the hub
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<ItemHub>();
        hubContext.Clients.Invoke("ItemsUpdated", itemsList);
    }
}

你应该有一个 javascript 连接到同一个集线器，所以当调用 ItemsUpdated 时，你只需更新 GUI:

var connection = $.hubConnection();
var itemHubProxy = connection.createHubProxy('ItemHub');
itemHubProxy.on('ItemsUpdated', function(items) {
    console.log(items);
    // update GUI
});

您将如何更新 GUI，有不同的选项:

• 您可以使用 ajax 对局部 View 进行 GET 调用，并在适当的 DOM 元素(首先呈现局部 View 的地方)中替换整个生成的 HTML
• 您可以只通过信号器消息传递项目列表(使用上面的 Invoke 方法)，然后手动重新创建菜单
• 您可以重新加载整个页面(我真的不推荐这样做，只是说您可以这样做)

如果您已经有了带有 Controller 操作的分部 View ，其中包含使用 Razor 创建菜单的逻辑，那么第一个选项就可以了，因为您可以在那里隔离呈现逻辑。

第二个选项具有更好的性能，尽管您会在菜单部分 View 中以及在您的 javascript 中使用 signalr 来呈现逻辑。

第三个选项是最简单的，但不推荐这样做，因为您会重新渲染整个页面，消耗比必要更多的带宽，花费更多的时间，而您可以只更新菜单而不是整个页面(还有其他客户端)可能有未保存的更改，具体取决于他们在做什么)。