Запретить элемент управления в заголовке аккордеона запускать поведение сворачивания / опускания аккордеона

Question

При наличии аккордеона Ajax Control Toolkit:

<ajaxToolkit:Accordion runat="server"
    SelectedIndex="0"
    HeaderCssClass="accordionHeader"
    HeaderSelectedCssClass="accordionHeaderSelected"
    ContentCssClass="accordionContent"
    AutoSize="None"
    FadeTransitions="true"
    TransitionDuration="250"
    FramesPerSecond="40"
    RequireOpenedPane="false"
    SuppressHeaderPostbacks="true">

с кнопкой в ​​паре с ConfirmButtonExtender в шаблоне Header:

    <HeaderTemplate>
        <asp:Button 
            ID="PushPlanButton" 
            Text="Push" 
            runat="server" 
            OnClick="PushPlanButtonPressed" />

        <ajaxToolkit:ConfirmButtonExtender 
            ID="ConfirmButtonExtender1" 
            runat="server" 
            TargetControlID="PushPlanButton" 
            ConfirmText="Please confirm" />
    </HeaderTemplate>

При нажатии кнопки появляется модальное сообщение, «Пожалуйста, подтвердите», как и ожидалось.

Когда пользователь отклоняет его, Аккордеон думает, что на него нажали, и закрывает активную панель, что нежелательно.

Любой способ подавить этоповедение?

Answer 1

На мой взгляд, лучший выбор - настроить источники AjaxControlToolkit в соответствии с вашими потребностями. В этом случае вам просто нужно внести изменения в файл confirmButtonBehavior.pre.js. Перепишите _onClick метод, как показано ниже:

_onClick: function (e) {
    /// <summary>
    /// Button's click handler to display the confirmation dialog
    /// </summary>
    /// <param name="e" type="Sys.UI.DomEvent">
    /// Event info
    /// </param>

    if (this.get_element() && !this.get_element().disabled) {
        if (this._ConfirmOnFormSubmit) {
            // Note that this behavior was triggered (for later)
            Sys.Extended.UI.ConfirmButtonBehavior._clickedBehavior = this;
        } else {
            // Display the dialog and cancel the click if necessary
            if (!this._displayConfirmDialog()) {
                e.preventDefault();
                e.stopPropagation(); // added to prevent event bubbling
                return false;
            }
            else if (this._oldScript) {

                if (String.isInstanceOfType(this._oldScript)) {
                    eval(this._oldScript);
                }
                else if (typeof (this._oldScript) == 'function') {
                    this._oldScript();
                }
            }
        }
    }
}

Но если вы не можете настроить источники библиотек по каким-либо причинам, вы можете применить другой подход. Добавьте скрипт ниже на страницу:

function pageLoad()
{
     var extender = $find("<%= ConfirmButtonExtender1.ClientID %>");
     $removeHandler(extender.get_element(), "click", extender._clickHandler);

     extender._clickHandler = Function.createDelegate(extender, function (e) {
          if (this.get_element() && !this.get_element().disabled) {
               if (this._ConfirmOnFormSubmit) {
                    // Note that this behavior was triggered (for later)
                    Sys.Extended.UI.ConfirmButtonBehavior._clickedBehavior = this;
               } else {
                    // Display the dialog and cancel the click if necessary
                    if (!this._displayConfirmDialog()) {
                         e.preventDefault();
                         e.stopPropagation();
                         return false;
                    }
                    else if (this._oldScript) {

                         if (String.isInstanceOfType(this._oldScript)) {
                              eval(this._oldScript);
                         }
                         else if (typeof (this._oldScript) == 'function') {
                              this._oldScript();
                         }
                    }
               }
          }
     });
     $addHandler(extender.get_element(), "click", extender._clickHandler);
}