Question

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

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

public string Name { get; set; }

和ItemList，其中包含Item列表作为属性：

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

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

我创建了一个名为ItemHub的新SignalR中心，它从Hub扩展（但它还没有任何方法）。

到目前为止一切都很顺利。

我想要做的是拥有我的页面，以便它可以列出当前的ItemList，还可以列出添加和删除项目。但我希望使用SignalR（通过套接字）来实现这一点，以便在连接到页面的所有客户端上立即看到更改，任何客户端也可以添加/删除项目。

我该怎么办呢？

Answer 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中使用。

第三个选项是最简单的，但不推荐使用，因为您需要重新渲染整个页面，消耗的带宽超出必要的限制，花费更多时间，只需更新菜单而不是整个页面（其他客户也可以根据他们的工作进行未保存的更改。）

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

1 个答案: