应用 SignalR 更新 gridview

Question

所以在使用 signalR 时。 我按照这个例子，让它在一个测试 web 表单上工作，在其中我打开同一页面的 2 个选项卡并对其进行了测试：

SignalR 教程

现在我尝试对其进行一些修改，并尝试将 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);
    }

带有 gridview 的页面：

 <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 工作，即把它放在pageload.Sadly 没有任何反应。

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.-->



  

Answer 1

首先让我说您可以从客户端或代码隐藏代码调用集线器的方法。 由于尚不清楚您想要哪种方式，我将同时介绍这两种方式。

您的集线器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 function（通知客户端），您应该在Receiver中定义它。 您应该在 function 中添加刷新网格所需的任何代码。

接收器.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 执行相同的调用。 您可以根据自己的需要进行选择。

发件人.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>

发件人.aspx.cs

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

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

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