-->

SignalR更新面板只工作第一次(SignalR Update Panel Only Works

2019-10-17 22:27发布

我有一个更新面板内的下面的代码。 当屏幕上的负荷,SignalR代码工作正常。 然而,在第一时间之后,一旦我点击一个按钮,直到我造成一个重定向页面的SignalR代码不火了。

基本上,我做的是,当用户点击预览按钮,它触发关闭的报告程序。 一个AJAX模式弹出显示有进度指示器和一个取消按钮。 如果用户点击取消按钮,取消该标记设置,该报告被取消。 通过使用SignalR技术,用户界面线程没有被阻塞,并且用户可以点击取消按钮。 这工作正常,在第一时间,但是,点击取消按钮,当你点击取消按钮它不工作的下一个时间之后。 然而,当我重定向页面再次它的工作原理。

如果我移动的LinkBut​​ton更新面板之外也屡试不爽。

        <asp:updatepanel runat="server" id="UpdatePanelFooter" rendermode="Inline" updatemode="Conditional">                    
            <contenttemplate>
                  <table width="100%">
                    <tr>
                        <td>
                            <div id="divBottomBanner">
                                <asp:label id="LabelHelpID" runat="server" text="" visible="false"></asp:label>&nbsp;    
                                <asp:linkbutton id="LinkButtonPreview" runat="server" OnClick="LinkButtonPreview_Click">Preview</asp:linkbutton>  
                                <asp:linkbutton id="LinkButtonSaveAs" runat="server" onclick="LinkButtonSaveAs_Click">Save Prompts As</asp:linkbutton>
                                <asp:linkbutton id="LinkButtonGenerateSP" runat="server" onclick="LinkButtonGenerateSP_Click"><<<< GENERATE SP >>>></asp:linkbutton>
                                <asp:linkbutton id="LinkButtonInvisibleTargetControlIDSAVEAS" runat="server" causesvalidation="false" height="0" text="" width="0"></asp:linkbutton>
                                <asp:linkbutton id="LinkButtonInvisibleTargetControlIDPROGRESS" runat="server" causesvalidation="false" height="0" text="" width="0"></asp:linkbutton>
                            </div>
                        </td>
                    </tr>
                </table>
                    <ajaxtoolkit:modalpopupextender id="ModalPopupExtenderPROGRESS" runat="server" targetcontrolid="LinkButtonInvisibleTargetControlIDPROGRESS" behaviorid="PROGRESS" popupcontrolid="PanelPROGRESS" backgroundcssclass="ModalBackground" dropshadow="true">
                    </ajaxtoolkit:modalpopupextender>
                    <asp:panel id="PanelPROGRESS" runat="server" cssclass="ModalPopup" style="display: none;" width="75em">
                        <table id="TablePROGRESS" width="95%">
                            <tr>
                                <td style="width: 10%"></td>
                                <td style="width: 30%"></td>
                                <td style="width: 50%"></td>
                                <td style="width: 10%"></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td colspan="2" align="center">Processing Please Wait
                                <br />
                                    <br />
                                    <hr />
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td colspan="2" align="center">
                                    <img src="../Images/moving_lights.gif" alt="Processing..." />
                                    <hr />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <br />
                                    <br />
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td align="center" colspan="2">
                                    <asp:linkbutton id="LinkButtonCancelPROGRESSXD" runat="server" height="100%" cssclass="Button" causesvalidation="false" tabindex="6">&nbsp;&nbsp;&nbsp;Cancel Preview Report&nbsp;&nbsp;&nbsp;</asp:linkbutton>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <br />
                                    <br />
                                </td>
                            </tr>
                        </table>
                    </asp:panel>
            </contenttemplate>
        </asp:updatepanel>

然后我在在SignalR部分使用的脚本下面的代码。

/// <reference path="../scripts/jquery-1.8.3.js" />
/// <reference path="../scripts/jquery.signalR-1.0.0.js" />

/*!
    ASP.NET SignalR Report Processing
*/

// Crockford's supplant method 
if (!String.prototype.supplant) {
    String.prototype.supplant = function (o) {
        return this.replace(/{([^{}]*)}/g,
            function (a, b) {
                var r = o[b];
                return typeof r === 'string' || typeof r === 'number' ? r : a;
            }
        );
    };
}

// A simple background color flash effect that uses jQuery Color plugin
jQuery.fn.flash = function (color, duration) {
    var current = this.css('backgroundColor');
    this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration / 2)
        .animate({ backgroundColor: current }, duration / 2);
}

$(function () {

    var RPT = $.connection.ReportProcessing;

    function stopRPT() {
        //$ReportProcessingUl.stop();
    }

    function init() {
        return RPT.server.waitForReportToBeReady().done(function () {
            //   Add Code Here
        });
    }

    //function jsFireThePreviewClick() {
    //    var ctrl = $("#ImageButtonRUNTHEREPORTXD");
    //    if (ctrl != null) {
    //        ctrl.click();
    //    }
    //}

    // Add client-side hub methods that the server will call
    $.extend(RPT.client, {
        updateReportProgress: function () {

        },

        ReportOpened: function () {
            //scrollRPT();
        },

        ReportClosed: function () {
            stopRPT();
        },

        ReportCancel: function () {
            return init();
        }
    });

    // Start the connection
    $.connection.hub.start()
        .pipe(init)
        .pipe(function () {
            return RPT.server.waitForReportToBeReady();
        })
        .done(function (state) {
            if (state === 'Open') {
                RPT.client.ReportOpened();
            } else {
                RPT.client.ReportClosed();
            }

            // Wire up the buttons
            $("#LinkButtonPreview").click(function () {
                RPT.server.openReport();
            });

            $("#close").click(function () {
                RPT.server.closeReport();
            });

            $("#LinkButtonCancelPROGRESSXD").click(function () {
                RPT.server.cancelReport();
                alert('Report Canceled By User');
            });
        });
});

如果我移动LinkBut​​tonPreview更新面板之外,它工作正常,每次。 我需要有更新面板这里面的LinkBut​​ton,但需要使用SignalR工作每次。 我知道它是与更新面板,它处理回发的方式。 但是,我想不出什么,我需要为了得到这个每次都正常工作要做。 就像我说的,它的工作是第一次,但之后它没有。

Answer 1:

当你怀疑,这个问题是关系到更新面板。 您要添加一个点击事件处理程序#LinkButtonPreview按钮,但只存在按钮元素,直到更新面板刷新。 当更新面板的更新,新的按钮具有相同ID,但没有说是装在旧的按钮事件处理程序创建的。

解决的办法是点击事件处理程序附加到永远不会被更新/更换,因此事件处理函数不是曾经删除的元素。 你仍然可以有事件处理程序只响应#LinkButtonPreview点击不附加该事件#LinkButtonPreview直接使用。对() :

$(document).on("click", "#LinkButtonPreview", function(){
    RPT.server.openReport();
});

由于document是的祖先元素#LinkButtonPreview ,单击事件源自#LinkButtonPreview将泡涨一路攀升至document 。 如果不指定#LinkButtonPreview作为第二个参数.on()事件处理程序将通过在页面上任意点击触发。

你还应该附上你的点击事件处理同样的方式#LinkButtonCancelPROGRESSXD



文章来源: SignalR Update Panel Only Works First Time