Question

我在更新面板中有以下代码。当屏幕加载时，SignalR代码工作正常。但是，在我第一次点击一个按钮后，SignalR代码不会再触发，直到我重定向回到页面。

基本上我正在做的是当用户点击预览按钮时，它会触发报告过程。将显示一个Ajax模式弹出窗口，其中包含进度指示器和取消按钮。如果用户单击取消按钮，则设置取消令牌，并取消报告。通过使用SignalR技术，ui线程不会被阻止，用户可以单击取消按钮。这在第一次工作正常。但是，在单击取消按钮后，下次单击取消按钮时它不起作用。但是，当我再次重定向到页面时，它可以工作。

如果我将链接按钮移到更新面板之外，它每次都有效。

        <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');
            });
        });
});

如果我在更新面板之外移动LinkButtonPreview，它每次都可以正常工作。我需要在更新面板中有这个linkbutton，但是每次使用SignalR都需要它。我知道它与更新面板及其处理回发的方式有关。但是，我无法弄清楚我需要做什么才能让它每次都能正常工作。就像我说的那样，它第一次起作用，但之后却没有。

Answer 1

如您所料，问题与更新面板有关。您正在向#LinkButtonPreview按钮添加单击事件处理程序，但该按钮元素仅在更新面板刷新之前存在。更新面板更新时，会创建一个具有相同ID但没有附加到旧按钮的事件处理程序的新按钮。

解决方案是将您的click事件处理程序附加到一个永远不会更新/替换的元素，这样就不会删除事件处理程序。您仍然可以让事件处理程序仅回复#LinkButtonPreview次点击，而无需使用.on()直接将事件附加到#LinkButtonPreview：

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

由于document是#LinkButtonPreview的祖先元素，因此源自#LinkButtonPreview的点击事件会一直冒出document。如果您未指定#LinkButtonPreview作为.on()的第二个参数，则页面上的任何点击都会触发事件处理程序。

您还应该以{{1}}的相同方式附加点击事件处理程序。

SignalR更新面板仅适用于第一次

1 个答案: