应用 SignalR 更新 gridview

Question

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

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

包含发送消息按钮的页面：

   <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();
    }

我的想法是每次收到消息时，网格 view/page 应该自动刷新。 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 函数（以通知客户端），您应该在 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 hub 脚本。

应用 SignalR 更新 gridview

Applying SignalR to update gridview

javascript

webforms

signalr