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

Question

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

})

该代码有效，并且在启动时会显示标题日记条目。

我还有一个按钮可以打开剑道窗口作为模态，并带有使用此功能添加新日记条目的表单：

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'

如何调用该函数？ 关闭模态窗口之前应该调用函数吗？

Answer 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(); 小写“ p”