1

同じサーバー側呼び出し内で、1 つの ModalPopupExtender を非表示にし、別の ModalPopupExtender を表示するのに問題があります。

私のアプリでは、いくつかの検証条件についてユーザー入力が必要です。これらの条件は順番に評価され、特定の条件が真の場合、ユーザーは ModalPopupExtender ウィンドウを介して確認 ([はい] または [いいえ] をクリック) する必要があります。ユーザーが [はい] をクリックすると、評価が続行されます。別の条件でユーザー入力が必要な場合は、すべての条件が渡されるまで、モーダル ダイアログも開きます。

入力が必要な条件が 1 つだけの場合は問題ありませんが、入力が必要な条件が複数ある場合は、最初のモーダルのみが表示され、理由がわかりません。コードをトレースすると、最初のポップアップの Hide() がヒットし、2 番目のポップアップの Show() がヒットしたことは明らかですが、2 番目のポップアップは表示されません。

ここでは、関連するコード ブロックを極端に単純化して抜き出そうとしました。これは非常に複雑なプロジェクトであり、何かを見逃している可能性がありますが、私の問題を説明するのに十分であることを願っています.

問題のあるプロセス フロー:

  1. ユーザーが [続行] をクリックします -> DoContinue が呼び出されます -> 条件フラグを設定します -> 最初のモーダル ポップアップを表示します -> ユーザーに戻ります

  2. ユーザーが「はい」をクリック -> 条件 1 を呼び出します (処理済みフラグを設定し、モーダル ポップアップを非表示にする) -> DoContinue を呼び出します -> 条件フラグを再評価します -> 2 番目のモーダル ポップアップを表示しようとします -> ユーザーに戻ります。

最初のポップアップは消えますが、2 番目のポップアップは表示されません。

Show() が 2 番目に呼び出されているのと同じリクエストの最初のモーダルで Hide() が呼び出されている場合にのみ問題になります。

MyContainerControl.ascx:

<%@ Control Language="C#" AutoEventWireup="true" Inherits="MyContainerControl" %>
 <input Type="Submit"
          id="btnContinue"
          Name="btnContinue"
          Value="Continue"
          OnServerClick="Continue_Click"
          runat="server"/>

<asp:UpdatePanel 
        ID="updateCondition1" 
        runat="server" 
        ChildrenAsTriggers="false" UpdateMode="Conditional">
    <ContentTemplate>
        <ajaxToolkit:ModalPopupExtender 
                    ID="modalCondition1" 
                    runat="server" 
                    BehaviorID="dlgCondition1"
                    TargetControlID="btnFakeInvokeModalCondition1" 
                    PopupControlID="divCondition1" 
                    BackgroundCssClass="modalBackground"
                    DropShadow="true" 
                    PopupDragHandleControlID="divDragCondition1"
                    RepositionMode="RepositionOnWindowResize" 
                    CancelControlID="btnCondition1No" />
        <input type="button" 
                        id="btnFakeInvokeModalCondition1" 
                        runat="server" 
                        style="display: none" />
        <div id="divCondition1" 
                runat="server" 
                class="modalPopup">
            <custom:Condition1Control id="condition1" runat="server" visible="false" />
            <div id="divDragCondition1"></div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel 
        ID="updateCondition2" 
        runat="server" 
        ChildrenAsTriggers="false" UpdateMode="Conditional">
    <ContentTemplate>
        <ajaxToolkit:ModalPopupExtender 
                    ID="modalCondition2" 
                    runat="server" 
                    BehaviorID="dlgCondition2"
                    TargetControlID="btnFakeInvokeModalCondition2" 
                    PopupControlID="divCondition2" 
                    BackgroundCssClass="modalBackground"
                    DropShadow="true" 
                    PopupDragHandleControlID="divDragCondition2"
                    RepositionMode="RepositionOnWindowResize" 
                    CancelControlID="btnCondition2No" />
        <input type="button" 
                        id="btnFakeInvokeModalCondition2" 
                        runat="server" 
                        style="display: none" />
        <div id="divCondition2" 
                runat="server" 
                class="modalPopup">
            <custom:Condition2Control id="condition2" runat="server" visible="false" />
            <div id="divDragCondition2"></div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

MyContainerControl.cs:

public class MyContainerControl : System.Web.UI.UserControl
{
    protected HtmlInputImage btnContinue;

    //Condition1
    protected AjaxControlToolkit.ModalPopupExtender modalCondition1;
    protected UpdatePanel updateCondition1;
    protected HtmlGenericControl divCondition1;
    protected Condition1Control condition1;

    //Condition2
    protected AjaxControlToolkit.ModalPopupExtender modalCondition2;
    protected UpdatePanel updateCondition2;
    protected HtmlGenericControl divCondition2;
    protected Condition2Control condition2;        

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        condition1.Condition1RaisedEvent += HandleCondition1Event;
        condition2.Condition2RaisedEvent += HandleCondition2Event;
        btnContinue.ServerClick += btnContinue_ServerClick;
    }

    protected void HandleCondition1Event(object sender, Condition1EventArgs e)
    {
        // use ship to store
        ViewState["Condition1Yes"] = true;
        ViewState["Condition1Value"] = e.Condition1Value;
        modalCondition1.Hide();
        DoContinue(sender);
    }

    protected void HandleCondition2Event(object sender, Condition2EventArgs e)
    {
        // use ship to store
        ViewState["Condition2Yes"] = true;
        ViewState["Condition2Value"] = e.Condition2Value;
        modalCondition2.Hide();
        DoContinue(sender);
    }

    protected void btnContinue_ServerClick(object sender, EventArgs e)
    {
        DoContinue(sender);
    }

    protected void DoContinue(object sender)
    {
        // test for conditions - just plug to true for demonstration

        bool throwCondition1 !(ViewState["Condition1Yes"] == null ? false : (bool)ViewState["Condition1Yes"])
        bool throwCondition2 = !(ViewState["Condition2Yes"] == null ? false : (bool)ViewState["Condition2Yes"])

        // analyze conditions

        if (throwCondition1)
        {
            var condition1Yes = ViewState["Condition1Yes"] == null ? false : (bool)ViewState["Condition1Yes"];
            if (!condition1Yes)
            {
                divCondition1.Visible = true;
                modalCondition1.Show();
                return;
            }
        }

        if (throwCondition2)
        {
            var condition2Yes = ViewState["Condition2Yes"] == null ? false : (bool)ViewState["Condition2Yes"];
            if (!condition2Yes)
            {
                divCondition2.Visible = true;
                modalCondition1.Show();
                return;
            }
        }

        // do other work
    }
}

Condition1UI.ascx - Condition2UI.ascx は非常に似ています。

<%@ Control Language="C#" AutoEventWireup="true" Inherits="Condition1Control" %>
<div id="divCondition1Container" runat="server">        
    <input id="hdnCondition1Value" type="hidden" runat="server" value="<%# this.Condition1Value %>" />
    <asp:Panel ID="pnlCondition1UI" runat="server">
        <br />
        <h2>
            Warning!</h2>
        <hr />
        <br />
        <div>
            <p>Condition1 has been met.</p>
            <br />
            <br />
            <p>Would you like to continue?</p>
        </div>
        <br />
        <br />
    </asp:Panel>
    <div>
    <table>
        <tr>
            <td align="center">
                <asp:Button ID="btnCondition1Yes" runat="server" class="green" Text="Yes" style="padding: 3px 7px;" OnClick="DoCondition1YesClick" OnClientClick="$find('dlgCondition1').hide();" />
            </td>
            <td align="center">
                <button id="btnCondition1No" class="red">No</button>
            </td>
        </tr>
    </table>
      <br />
    </div>
    <br />
</div>

Condition1Control.cs - Condition2Control.cs はほぼ同じです。

public class Condition1EventArgs : EventArgs
{
    public string Condition1Value { get; set; }
}

public class Condition1Control : System.Web.UI.UserControl
{
    public HtmlInputHidden Condition1Value;

    public event EventHandler<Condition1EventArgs> Condition1RaisedEvent;

    protected virtual void RaiseCondition1Event(Condition1EventArgs e)
    {
        EventHandler<Condition1EventArgs> handler = Condition1RaisedEvent;

        if (handler == null)
        {
            return;
        }

        handler(this, e);
    }

    public void DoCondition1ButtonYesClick(object sender, EventArgs e)
    {
        RaiseCondition1Event(new Condition1EventArgs{
            Condition1Value = Condition1Value.Value
        });
    }
}
4

1 に答える 1

2

UpdatePanel の UpdateMode プロパティを「Always」に変更するか、別の UpdatePanel から発生したポストバックの結果として更新する UI の UpdatePanel の「Update」メソッドを呼び出すことを忘れないでください。したがって、コード内の modalCondition2.Show メソッドの後に updateCondition2.Update メソッド呼び出しを追加してみてください。

于 2012-08-13T20:08:51.140 に答える