应用 SignalR 更新 gridview

如何解决应用 SignalR 更新 gridview

所以当使用signalR时。我按照这个例子让它在一个测试网络表单上工作，在那里我打开同一页面的 2 个标签并测试它：

SignalR Tutorial

现在我试着稍微修改一下，尝试让 1 个页面作为发送者，另一个作为接收者，

带有用于发送消息的按钮的页面：

   <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub. 
            var msg = $.connection.myHub1;   //change MyHub1.cs should be in camel myHub
            // Create a function that the hub can call to broadcast messages.
            msg.client.broadcastMessage = function (name,message) {
                // $("[id*=btnRefresh]").click();
            };
            // Start the connection.
            $.connection.hub.start().done(function () {
                function RefreshData() {
                    // Call the Send method on the hub. 
                    msg.server.send('admin','Refresh Grid');


                };
            });
        });
    </script>

  protected void btnSendMsg_Click(object sender,EventArgs e)
    {
         ClientScript.RegisterStartupScript(GetType(),"SigalRFunction","RefreshData()",true);
    }

带有网格视图的页面：

 <asp:Button runat="server" ID="btnRefresh" OnClick="btnRefresh_Click" Style="display: none" />
 <script type="text/javascript">
        $(function () {
            // Declare a proxy to reference the hub. 
            var msg = $.connection.myHub1;   //change MyHub1.cs should be in camel myHub
            // Create a function that the hub can call to broadcast messages.
            msg.client.broadcastMessage = function (name,message) {

                $("[id=btnRefresh]").click();
                

            };
            // Start the connection.
            $.connection.hub.start().done(function () {
                function RefreshData() {
                    // Call the Send method on the hub. 
                    //msg.server.send('admin','Refresh Grid');


                };
            });
        });
    </script>
 protected void btnRefresh_Click(object sender,EventArgs e)
    {
        grdview.DataSource = grdviewData();
        grdview.DataBind();
    }

我的想法是每次收到消息时，网格视图/页面都应该自动刷新。 grdviewDatasource 和 Databind 工作，即将它放在页面加载中。遗憾的是什么也没发生。

script src="assets/js/app.min.js"></script>
    <script src="assets/js/scripts.js"></script>
    <script src="assets/js/custom.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <!--Script references. -->
    <!--Reference the jQuery library. -->
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <!--Reference the SignalR library. -->
    <script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
    <!--Reference the autogenerated SignalR hub script. -->
    <script src="signalr/hubs"></script>
    <!--Add script to update the page and send messages.-->



  

解决方法

首先让我说您可以从客户端或代码隐藏代码调用集线器的方法。由于不清楚您想要哪种方式，我将两者都涵盖。

您的中心 MyHub1 应定​​义 Send 方法，您将在单击按钮时调用该方法：

MyHub1.cs

public class MyHub1 : Hub
{
    public void Send(string name,string message)
    {
        var hubContext = GlobalHost.ConnectionManager.GetHubContext<MyHub1>();

        hubContext.Clients.All.broadcastMessage(name,message);
    }
}

请注意，Send 方法调用 broadcastMessage javascript 函数（以通知客户端），您应该在 Receiver 中定义该函数。您应该在该函数中添加刷新网格所需的任何代码。

Receiver.aspx

<script type="text/javascript">
    $(function () {
        var msg = $.connection.myHub1;

        // Create a function that the hub can call to broadcast messages.
        msg.client.broadcastMessage = function (name,message) {
            console.log(name + "," + message);
            // do whatever you have to do to refresh the grid
        };

        // Start the connection.
        $.connection.hub.start().done(function () {
        });

    });
</script>

Sender 包含两个按钮：btnSendMsg 将从代码隐藏中调用集线器的 Send 方法； btnSendMsg2 将从 javascript 执行相同的调用。您可以根据自己的需要进行选择。

Sender.aspx

<form id="form1" runat="server">
    <div>
        <asp:Button ID="btnSendMsg" runat="server" Text="Server-Side" OnClick="btnSendMsg_Click" />
        <input type="button" id="btnSendMsg2" value="Client-Side" />
    </div>
</form>

<script type="text/javascript">
    $(function () {
        // Declare a proxy to reference the hub. 
        var msg = $.connection.myHub1;  

        // Start the connection.
        $.connection.hub.start().done(function () {
            $('#btnSendMsg2').click(function () {
                // Call the Send method on the hub. 
                msg.server.send('admin','Refresh Grid');
            });
        });
    });
</script>

Sender.aspx.cs

protected void btnSendMsg_Click(object sender,EventArgs e)
{
    var myHub1 = new MyHub1();

    myHub1.Send("admin","Refresh Grid");
}

最后但并非最不重要的一点是，确保发送方和接收方页面都引用了必要的 jQuery 和 SignalR 脚本以及自动生成的 SignalR 集线器脚本。