Javascript 无法使用Signal实时更新带有数据库通知的网页_Javascript_Html_Asp.net Mvc 4_Signalr

Javascript 无法使用Signal实时更新带有数据库通知的网页

javascript html asp.net-mvc-4 signalr

Javascript 无法使用Signal实时更新带有数据库通知的网页,javascript,html,asp.net-mvc-4,signalr,Javascript,Html,Asp.net Mvc 4,Signalr,我正在开发一个使用Asp.NETMVC开发的web应用程序，其中有一个页面，每当数据库中的数据被修改时，该页面上的数据都会实时更新。我在网上有一些源代码，并试图实现这个功能，但它在网页上造成了巨大的无效数据我使用SQL依赖项和信号器来实现这一点，如下所示在Global.asax中，我有以下内容 protected void Application_Start() { SqlDependency.Start(ConfigurationManager.ConnectionStrings[

我正在开发一个使用Asp.NETMVC开发的web应用程序，其中有一个页面，每当数据库中的数据被修改时，该页面上的数据都会实时更新。我在网上有一些源代码，并试图实现这个功能，但它在网页上造成了巨大的无效数据

我使用SQL依赖项和信号器来实现这一点，如下所示

在

Global.asax

中，我有以下内容

protected void Application_Start()
{
    SqlDependency.Start(ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); 
}
protected void Application_End()
{
    SqlDependency.Stop(ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString); 
}

在模型部分，我有以下几节课

public class JobInfo 
{
    public int JobID { get; set; }
    public string Name { get; set; }
    public DateTime LastExecutionDate { get; set; }
    public string Status { get; set; }
}

 public class JobInfoRepository 
 {
    public IEnumerable<JobInfo> GetData()
    {
        using (var connection = new SqlConnection(ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString))
        {
            connection.Open();
            using (SqlCommand command = new SqlCommand(@"SELECT [JobID],[Name],[LastExecutionDate],[Status]
               FROM [dbo].[JobInfo]", connection))
            {
                // Make sure the command object does not already have
                // a notification object associated with it.
                command.Notification = null;

                SqlDependency dependency = new SqlDependency(command);
                dependency.OnChange += new OnChangeEventHandler(dependency_OnChange);

                if (connection.State == ConnectionState.Closed)
                    connection.Open();

                using (var reader = command.ExecuteReader())
                    return reader.Cast<IDataRecord>()
                        .Select(x => new JobInfo(){ 
                            JobID = x.GetInt32(0), 
                            Name = x.GetString(1), 
                            LastExecutionDate = x.GetDateTime(2),  
                            Status  = x.GetString(3) }).ToList();         
            }
        }        
    }
    private void dependency_OnChange(object sender, SqlNotificationEventArgs e)
    {            
        JobHub.Show(); 
    }
}

我有一个控制器，在其中调用

JobInfoRepository

类中定义的

GetData（）

方法

 public class JobInfoController : Controller
{

    // GET: /JobInfo/
    JobInfoRepository objRepo = new JobInfoRepository();

    public IEnumerable<JobInfo> Get()
    {
        return objRepo.GetData();
    }
}

公共类JobInfoController:控制器
{
//获取：/JobInfo/
JobInfoRepository objRepo=新的JobInfoRepository（）；
公共IEnumerable Get（）
{
返回objRepo.GetData（）；
}
}

我在HomeController中创建了一个名为JobInfo的操作，并返回了以下视图

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>JobStatus</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
</head>
<body>
    <div>
        <table id="tblJobInfo" class="clientTable" style="text-align:center;margin-left:10px"></table>
    </div>
</body>
</html>

@section scripts {
    <script src="~/Scripts/jquery.signalR-2.0.1.min.js"></script>
    <script src="/signalr/hubs"></script>
    <script src="~/App/JobInfo.js"></script>
}


工作状态
@节脚本{
}

要检索数据并将其提供给上述html中的tblJobInfo id，需要使用java脚本函数

$(function () {
    // Proxy created on the fly
    var job = $.connection.jobHub;

    // Declare a function on the job hub so the server can invoke it
    job.client.displayStatus = function () {
        getData();
    };

    // Start the connection
    $.connection.hub.start();
    getData();
});

function getData() {
    var $tbl = $('#tblJobInfo');
    $.ajax({
        url: '../JobInfo/',
        type: 'GET',
        datatype: 'json',
        success: function (data) {
            if (data.length > 0) {
                $tbl.empty();
                $tbl.append(' <tr><th>ID</th><th>Name</th><th>Status</th></tr>');
                var rows = [];
                for (var i = 0; i < data.length; i++) {
                    rows.push(' <tr><td>' + data[i].JobID + '</td><td>' + data[i].Name + '</td><td>' + data[i].Status + '</td></tr>');
                }
                $tbl.append(rows.join(''));
            }
        }
    });
}

$（函数（）{
//动态创建的代理
var job=$.connection.jobHub；
//在作业中心上声明一个函数，以便服务器可以调用它
job.client.displayStatus=函数（）{
getData（）；
};
//启动连接
$.connection.hub.start（）；
getData（）；
});
函数getData（）{
变量$tbl=$（“#tblJobInfo”）；
$.ajax({
url:“../JobInfo/”，
键入：“GET”，
数据类型：“json”，
成功：功能（数据）{
如果（data.length>0）{
$tbl.empty（）；
$tbl.append（'IDNameStatus'）；
var行=[]；
对于（变量i=0；i


正如在演示中一样，我发现它工作正常，但当我转到http://localhost:57044/Home/JobInfo/除了未获得下图所示的实时通知外，我在页面上还获得了无效数据

我在网上找到的源代码是，我意识到我不能用断点点击我的控制器。不太清楚为什么你可以发布一个更简洁的问题来说明你的问题？这是非常乏味的阅读我只是试图将数据从数据库发布到网页，每当数据库中的数据发生更改时，更新都应推送到网页上。更简洁地说，我正试图做的正是视频中所做的
$(function () {
    // Proxy created on the fly
    var job = $.connection.jobHub;

    // Declare a function on the job hub so the server can invoke it
    job.client.displayStatus = function () {
        getData();
    };

    // Start the connection
    $.connection.hub.start();
    getData();
});

function getData() {
    var $tbl = $('#tblJobInfo');
    $.ajax({
        url: '../JobInfo/',
        type: 'GET',
        datatype: 'json',
        success: function (data) {
            if (data.length > 0) {
                $tbl.empty();
                $tbl.append(' <tr><th>ID</th><th>Name</th><th>Status</th></tr>');
                var rows = [];
                for (var i = 0; i < data.length; i++) {
                    rows.push(' <tr><td>' + data[i].JobID + '</td><td>' + data[i].Name + '</td><td>' + data[i].Status + '</td></tr>');
                }
                $tbl.append(rows.join(''));
            }
        }
    });
}