当激活相同的 TargetControlID 时，ModalPopupExtender 卡在 Show 中

Question

我有一个与 RadListBox 绑定的 ModalPopupExtender，因此当从列表框中选择一个项目时，我需要一个“请稍候”消息，而后面的页面将数据加载到 RadCharts 中。加载完成后，Modal 会隐藏。我遇到的问题是，如果再次选择相同的列表项，模态弹出窗口会再次显示，但永远不会消失。我已经尝试了几乎所有东西，但是在 RadListBox 中单击/选择列表项会立即显示模态，我似乎无法找到一种方法来检查项目是否相同，然后什么也不做.

这是我的面板和模态代码 (ASPX)

<asp:Panel ID="pnlProgress" runat="server" Height="50px" Width="50px" >
     <div>
        <div class="popupbody">
            <table width="50%">
                <tr>
                    <td align="center">
                    <asp:Image ID="imgProgress" runat="server" ImageUrl="~/_images/ajax-loader.gif" />
                    <br />
                    <br />
                    <asp:Label ID="lblLoading" runat="server" Text='Please wait...'
                         Font-Bold="true"></asp:Label>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</asp:Panel>

<ajaxToolKit:ModalPopupExtender ID="mpeProgress" runat="server" TargetControlID="lboxTestedMachines" PopupDragHandleControlID="pnlProgress" `enter code here`
X="1000" Y="500" PopupControlID="pnlProgress" BackgroundCssClass="modalBackground" RepositionMode="RepositionOnWindowResize" BehaviorID="lboxTestedMachines">
</ajaxToolKit:ModalPopupExtender>

这是我的 ASPX.CS 代码

        protected void lboxTestedMachines_SelectedIndexChanged(object sender, EventArgs e)
    {
        int iResultID = Convert.ToInt32(lboxTestedMachines.SelectedValue);

        if (tbl_charts.Style.Value != "display:normal")
            tbl_charts.Style.Value = "display:normal";

        GetMachineName(iResultID);

        RdListView_Chart.DataSource = LoadCassetteForFoodChart(iResultID);

        GetApprovalRejectionStatus(iResultID);

    }

Answer 1

RadListBox 在单击项目时有一个内部逻辑，以确定项目是否已被选中。如果是，则不会触发 OnClientSelectedIndexChanging 事件，因此在单击选定项目时不会回发。

另一方面，ModalPopupBehavior 对 TargetControlID 控件元素内的任何点击事件作出反应。以下是使用浏览器的 DevTools 获得的一些代码 sn-ps（按照Get IntelliSense for the client-side object 中的步骤搜索Sys.Extended.UI.ModalPopupBehavior.prototype.initialize）

initialize: function() {
    Sys.Extended.UI.ModalPopupBehavior.callBaseMethod(this, "initialize"),
        this._isIE6 = Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7,
        this._popupDragHandleControlID && (this._dragHandleElement = $get(this._popupDragHandleControlID)),
        this._popupElement = $get(this._popupControlID),
        this._createDomElements(),
        this._showHandler = Function.createDelegate(this, this._onShow),
        $addHandler(this.get_element(), "click", this._showHandler),
        this._okControlID && (this._okHandler = Function.createDelegate(this, this._onOk),
            $addHandler($get(this._okControlID), "click", this._okHandler)),
        this._cancelControlID && (this._cancelHandler = Function.createDelegate(this, this._onCancel),
            $addHandler($get(this._cancelControlID), "click", this._cancelHandler)),
        this._scrollHandler = Function.createDelegate(this, this._onLayout),
        this._resizeHandler = Function.createDelegate(this, this._onLayout),
        this.registerPartialUpdateEvents(),
        this._resetAnimationsTarget(),
        this._onHiding.get_animation() && (this._hidingAnimationEndedHandler = Function.createDelegate(this, function () {
            this._isAnimationJustEnded = !0,
                this.hide()
        }),
            this._onHiding.get_animation().add_ended(this._hidingAnimationEndedHandler)),
        this._onShowing.get_animation() && (this._showingAnimationEndedHandler = Function.createDelegate(this, function () {
            this._isAnimationJustEnded = !0,
                this.show()
        }),
            this._onShowing.get_animation().add_ended(this._showingAnimationEndedHandler))
},
_onShow: function(e) {
    if (!this.get_element().disabled)
        return this.show(),
        e.preventDefault(),
        !1
},

解决方案 1： 订阅 ModalPopupBehavior 的 Showing 事件，并允许它仅在您从 OnClientSelectedIndexChanging 事件设置标志时显示。下面的示例将标志作为扩展属性存储在 RadListBox 客户端对象中：

<telerik:RadCodeBlock runat="server" ID="rdbScripts">
    <script type='text/javascript'> 
        function pageLoadHandler() {
            var modalPopupExtenderClientObject = $find("<%= mpeProgress.ClientID %>")
            modalPopupExtenderClientObject.add_showing(function (sender, args) {
                // "sender" argument represents the Modal popup control client-side object
                // sender.get_element() returns the DOM element of the RadListBox
                // sender.get_element().control return the client-side object of the RadListBox where we stored the expando property __allowModalPopupShow 
                if (sender.get_element().control.__allowModalPopupShow !== true) {
                    args.set_cancel(true);
                }
            })

        }

        function OnClientSelectedIndexChanging(sender, args) {
            // sender in this context is the RadListBox client-side object
            sender.__allowModalPopupShow = true;
        }

        Sys.Application.add_load(pageLoadHandler);
    </script>
</telerik:RadCodeBlock>

解决方案 2： 使用 RadAjaxLoading 面板并在 OnClientSelectedIndexChanging 中以编程方式显示它：

• https://docs.telerik.com/devtools/aspnet-ajax/controls/ajaxloadingpanel/how-to/show-and-hide-ajaxloadingpanel-explicitly
• https://demos.telerik.com/aspnet-ajax/ajaxloadingpanel/functionality/transparency/defaultcs.aspx