使用 Asp.Net MVC 和 SignalR 创建可更新的项目列表答案

【问题标题】：Creating an updatable list of items with Asp.Net MVC and SignalR使用 Asp.Net MVC 和 SignalR 创建可更新的项目列表
【发布时间】：2018-01-30 12:01:37
【问题描述】：

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

我创建了两个简单的模型类（它们现在很简单，但稍后会扩展它）： Item 只包含一个字符串属性：

public string Name { get; set; }

还有一个ItemList，其中包含一个Item列表作为属性：

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

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

我创建了一个名为 ItemHub 的新 SignalR 集线器，它从集线器扩展而来（但它还没有任何方法）。

到目前为止一切都很好。

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

请问我该怎么做？

【问题讨论】：

标签： c# asp.net asp.net-mvc asp.net-mvc-5 signalr

【解决方案1】：

您应该使用常规的控制器通过操作来添加/删除列表中的项目。在两种操作方法中（用于添加/删除），您在保存更改后调用 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 对局部视图进行 GET 调用，并在适当的 DOM 元素中替换整个生成的 HTML（首先呈现局部视图的位置）
您可以只传递带有信号器消息的项目列表（使用上述Invoke 方法），然后手动重新创建菜单
你可以只重新加载整个页面（我不建议这样做，只是说你可以这样做）

如果您已经有一个带有控制器操作的局部视图，其中包含使用 Razor 创建菜单的逻辑，那么第一个选项就可以了，因为您将在那里隔离渲染逻辑。

第二个选项具有更好的性能，尽管您可以在菜单部分视图中使用渲染逻辑，并在您的 javascript 中使用信号器。

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

【讨论】：