从模态弹出窗口调用SignalR Javascript函数

时间:2016-01-26 11:32:28

标签: javascript jquery signalr

My DiaryHub.vb具有以下内容:

Imports Microsoft.AspNet.SignalR
Imports Microsoft.AspNet.SignalR.Hubs

Namespace UIS

    <HubName("DiaryHub")>
    Public Class DiaryHub
        Inherits Hub

        Public Sub PostDiaryHeadline()
            ' Call the addNewMessageToPage method to update clients. 
            Clients.All.addNewDiaryHeadlineToPage()
        End Sub

    End Class

End Namespace

我的主页/索引窗口具有以下代码来启动/配置SignalR。

$(function () {

    // Save the reference to the SignalR hub
    var dHub = $.connection.DiaryHub;

    // Invoke the function to be called back from the server
    // when changes are detected
    // Create a function that the hub can call back to display new diary Headline entry.
    dHub.client.addNewDiaryHeadlineToPage = function () {
        // refresh the Headline Entries to the page.
        outputHLDiaryEntries();
    };

    // Start the SignalR client-side listener
    $.connection.hub.start().done(function () {
        // Do here any initialization work you may need
        outputHLDiaryEntries();
    });

})

代码正常运行,并在启动时显示标题日记条目。

我还有一个按钮,可以打开一个Kendo窗口作为模态,其中包含使用此功能添加新日记条目的表单:

function openAddWindow() {
    var addWindow = $("#window").data("kendoWindow");
    addWindow.refresh({
        url: "Home/AddDiaryEntry/"
    });
    addWindow.open();
    addWindow.center();
}

然后我在AddDiaryEntry页面中有以下Javascript:

function createDiaryEntry() {

    var validFlag = true;
    var errorMsg = "";

    //Validate New Diary Entry
    // removed for brevity...

    if (validFlag) {
        //data is valid

        //get value of checkbox
        var cbValue = ($("#addNew_dHeadline").is(':checked')) ? true : false;

        //clear error area
        $('#errorArea').html("");

        var response = ''
        $.ajax({
            url: 'Home/SaveDiaryEntry',
            type: 'POST',
            data: {
                dDate: $("#addNew_dDate").text(),
                dCreatedBy: $("#addNew_dCreatedBy").text(),
                dName: '@AppShort',
                dTeam: teamValue.value(),
                dType: typeValue.value(),
                dRef: $("#addNew_dREF").val(),
                dHeadline: cbValue,
                dServer: multiSelect.value(),
                dComment: editor.value()
            },
            success: function (result) {
                response = result;
                alert(response);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                response = "err--" + XMLHttpRequest.status + " -- " + XMLHttpRequest.statusText + " -- " + errorThrown;
                alert(response);
            }
        });

        //close window
        var addWindow = $("#window").data("kendoWindow");
        addWindow.close();

        //if headline entry call SignalR post function to refresh diary entries
        if (cbValue) {

            // reference to the SignalR hub
            var dHub = $.connection.DiaryHub;
            // function to update all clients
            dHub.client.PostDiaryHeadline(); //THIS IS A FUNCTION IN DiaryHub.vb
        }

    } else {
        //error in data
        var out = '<ul class="error">' + errorMsg + '</ul>';
        // display errors
        $('#errorArea').html(out);
    }

}

代码工作正常 - 验证数据,将数据保存到数据库。我遇到的问题是当我尝试调用dHub.client.PostDiaryHeadline()来调用SignalR函数时。我收到错误:JavaScript runtime error: Object doesn't support property or method 'PostDiaryHeadline'

如何调用此功能?我应该在关闭模态窗口之前调用该函数吗?

1 个答案:

答案 0 :(得分:1)

从我可以看到你实际上期待的是响应而不是服务器调用。 添加server会触发请求。

    if (cbValue) {

        // reference to the SignalR hub
        var dHub = $.connection.DiaryHub;
        // function to update all clients
        dHub.server.PostDiaryHeadline(); //THIS IS A FUNCTION IN DiaryHub.vb
    }

您已在此处收到回复:

dHub.client.addNewDiaryHeadlineToPage = function () {
        // refresh the Headline Entries to the page.
        outputHLDiaryEntries();
    };

<强> //修改

除了以上(需要修复)之外,似乎还有一些小问题。

在集线器名称(后端)上替换为:<HubName("diaryHub")>

在你的JS替换为:var dHub = $.connection.diaryHub;

最后,您的createDiaryEntry();正文应该如此:

$.connection.hub.start().done(function () {
        // Do here any initialization work you may need
     if (cbValue) {
        // reference to the SignalR hub
        var dHub = $.connection.diaryHub;
        // function to update all clients
        dHub.server.postDiaryHeadline(); //THIS IS A FUNCTION IN DiaryHub.vb
      }
    });

有一些SignalR问题,但这应该让你走上正确的道路。

大多数SignalR问题源于区分大小写和结构化。一切都很常见。

应该是最后一期,请替换为:dHub.server.postDiaryHeadline(); 小写&#34; p&#34;