如何使用信号器更新页面上的数据控件？

Question

我正在使用 Visual Studio 2012 Ultimate，我一直在寻找有关使用 asp.net Signalr 实时推送数据的信息 进入网络表单。我所拥有的只是聊天应用程序和实时移动网页中的对象。 但是如果我想用数据控件更新页面，我几乎不知道如何应用他们使用的代码 就像通过 sqldatasource 控件与我的数据库绑定的（gridview 或 listview）一样。 请给我一个视频教程或任何文章，演示如何使用绑定了数据控制的信号器更新页面 与数据库一起显示数据。

谢谢...

到目前为止，这是我试图提出的 我的课程文件：

using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
/// <summary>
/// Summary description for RefreshHub
/// </summary>
namespace mytestSignalR
{
    [HubName("refresh")]
    public class RefreshHub : Hub
    {
        string filename;

        [HubMethodName("update")]
        public void UpdatePage()
        {

            string conn = @"Server=(LocalDb)\v11.0;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\Windblow.mdf";
            SqlConnection connection = new SqlConnection(conn);
            SqlDataReader dr;

            connection.Open();
            // string sql = "INSERT INTO [ProfileTab]([ID],[Name],[Address],[Age],[Occupation],[Nationality]) Values('" + TextBox1.Text + "','" + TextBox2.Text + "','" + TextBox3.Text + "','" + TextBox4.Text + "','" + TextBox5.Text + "','" + TextBox6.Text + "' ) ";
            string sql = "Select * From [ImageTab] ";
            SqlCommand cmd = new SqlCommand(sql, connection);
            cmd.CommandType = CommandType.Text;
            dr = cmd.ExecuteReader();

            while (dr.Read())
            {
                filename = dr.GetString(0);

            }
            dr.Close();
            connection.Close();

            IHubContext context = GlobalHost.ConnectionManager.GetHubContext<RefreshHub>();
            context.Clients.All.Databind(filename);
        }


    }
}

页面上要更新的JS代码：

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="~/Scripts/jquery-1.6.4-vsdoc.js"></script>
    <script src="~/Scripts/jquery-1.6.4.js"></script>
    <script src="~/Scripts/jquery-1.6.4.min.js"></script>
    <script src="~/Scripts/jquery.signalR-2.0.3.js"></script>
    <script src="~/Scripts/jquery.signalR-2.0.3.min.js"></script>
    <script type="text/javascript" src="~/signalr/hubs"></script>
    <script type ="text/javascript" >

        $(function () {

            var page = $.connection.refreshHub;

            // $lview = $("#ListView1");
            page.client.databind = function (filename) {
                //  $lview = $("#ListView1");
                $("#ListView1").bind(filename);
                // $lview.bind(filename);
            };
            $.connection.hub.start().done(function () {
                page.server.updatePage();
            });
        });

    </script>

但运行时仍然出现运行时错误。它说 行：21 错误：无法获取未定义或空引用的属性“refreshHub”

它在这行代码上突出显示var page = $.connection.refreshHub; 我哪里做错了？我在这里想念什么？谢谢。

Answer 1

首先，您似乎从未编写过客户端代码。

所以，这里有一个提示：在尝试使用 SignalR 之前，请尝试学习大量 javascript，如果可以的话，还可以学习 jQuery。

您将无法像以前那样使用 SignalR 绑定服务器控件。您需要将您从数据库中获取的数据转换为 JSON 字符串，然后将此信息传递给网络表单。

因此，您将获取此信息并将此 JSON 字符串转换为 Javascript 对象，并动态创建您想要的 HTML 内容。

例如，一个 GridView 控件只不过是一个 HTML“表格”标签。

因此，您需要获取该对象，循环进入它以创建该表的所有子元素。使用 jQuery 会容易得多。

一些代码示例：

HTML：

<button id="btnGridPopulator">Bind grid</button>

<table id="myClientGridView">
    <colgroup>
        <col width="100px" />
        <col width="200px" />
    </colgroup>
    <tr>
        <th>ID</th>
        <th>Title</th>
    </tr>
</table>

JS：

$(function() {
    $("#btnGridPopulator").click(bindGrid);
});

function bindGrid() {
    // here I'll simulate a message, as if it came from your SignalR
    onmessage('[{"id":0,"title":"My videos"},{"id":1,"title":"My images"},{"id":2,"title":"My documents"}]');
}

function onmessage(msg)
{
    var arr = JSON.parse(msg);

    for(var i = 0; i < arr.length; i++) {
        $("#myClientGridView").append("<tr><td>" + arr[i].id + "</td><td>" + arr[i].title + "</td></tr>");
    }
}

Fiddle with a example of what you'll need to do

Answer 2

改变你的代码，像这样

// var page = $.connection.refreshHub;
var page = $.connection.refresh;

和

// page.server.updatePage();
page.server.update();

因为你通过 HubName 属性和 HubMethodName 属性更改了类名和方法名