1

我在更新面板中有以下代码。当屏幕加载时，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');
            });
        });
});

如果我将 LinkBut​​tonPreview 移到更新面板之外，它每次都可以正常工作。我需要在更新面板中有这个链接按钮，但每次使用 SignalR 时都需要它工作。我知道这与更新面板及其处理回发的方式有关。但是，我无法弄清楚我需要做什么才能让它每次都能正常工作。就像我说的，它第一次确实有效，但之后就不行了。

4

1 回答 1

4

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

解决方案是将单击事件处理程序附加到永远不会更新/替换的元素，因此永远不会删除事件处理程序。您仍然可以让事件处理程序仅响应#LinkButtonPreview点击，而无需#LinkButtonPreview直接使用.on()附加事件：

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

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

您还应该以与#LinkButtonCancelPROGRESSXD.

于 2013-03-28T07:04:59.190 回答