web-dev-qa-db-ja.com

ASP.NET：ModalPopupExtenderはボタンクリックイベントが発生しないようにします

これが私がやろうとしていることです：ページのボタンをクリックすると、次に（2）のことが起こります。

  1. ModalPopupを表示して、ユーザーがボタンを押したり値を変更したりできないようにします
  2. コードビハインドメソッドを呼び出し、完了時にModalPopupを非表示にする

ASPマークアップ：

<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
    UpdateMode="Always">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
    </Triggers>
    <ContentTemplate>
        <asp:Panel ID="pnlHidden" runat="server" style="display: none;">
            <div>
            <h1>Saving...</h1>
            </div>
        </asp:Panel>
        <cc1:ModalPopupExtender ID="modalPopup"
            BackgroundCssClass="modalBackground" runat="server"
            TargetControlID="btnSaveData" PopupControlID="pnlHidden"
            BehaviorID="ShowModal">
        </cc1:ModalPopupExtender>
        <asp:Button ID="btnSaveData" runat="server" Text="Save Data"
            OnClick="btnSaveData_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

これが、C＃コードの背後にある私のコードです。

protected void btnSaveData_Click(object sender, EventArgs e)
{
   UpdateUserData(GetLoggedInUser());
   modalPopup.Enabled = false;
}

なぜこれが機能しないのですか？ ModalPopupは完全に表示されますが、btnSaveData_Clickイベントは発生しません。

PDATE：最初の提案は私にはうまくいきませんでした。私はあなたの2番目の提案も試してみました（それは私に適用されたのと同じくらいです）。私の最後の小さな違いの1つは、モーダルパネル（pnlHidden）にボタンがないことです。これは単なるメッセージです。私はクライアント側でJavascriptイベントを使用してみましたが、少なくともサーバー側イベントと同時に発生しました。これは朗報でしたが、ModalPopupExtenderまたはそのBehaviorIDのハンドルを見つけたり、取得したりすることはできません。これは機能しません：

function showOverlay() {
    var popup = $find('modalPopup');
    popup.show();
}

ポップアップは常にnullです。

最終更新：これが機能するための私の最終的な解決策です（OnClientClick AND OnClickの使用について具体的にメモしてください）。

<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="true"
UpdateMode="Always">
<Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnSaveData" EventName="Click" />
</Triggers>
<ContentTemplate>
    <asp:Panel ID="pnlHidden" runat="server" style="display: none;">
        <div>
        <h1>Saving...</h1>
        </div>
    </asp:Panel>
    <cc1:ModalPopupExtender ID="modalPopup"
        BackgroundCssClass="modalBackground" runat="server"
        TargetControlID="hdnField" PopupControlID="pnlHidden"
        BehaviorID="ShowModal">
    <asp:HiddenField ID="hdnField" runat="server" />
    </cc1:ModalPopupExtender>
    <asp:Button ID="btnSaveData" runat="server" Text="Save Data"
        OnClientClick="showModal();" OnClick="btnSaveData_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

このJavaScript関数を使用する：

function showModal() { $find('ShowModal').show(); }

...そして背後にあるこのコード：

protected void btnSaveData_Click(object sender, EventArgs e)
{
   UpdateUserData(GetLoggedInUser());
   modalPopup.hide();
}
c#asp.netajaxmodalpopupextender
15
C. Griffin

これを試して。

ダミーの非表示フィールドを作成します。

<asp:HiddenField ID="hdnField" runat="server" />

モーダルポップアップ宣言でTargetcontrolID = "hdnField"を設定します。

BtnSaveData_Clickイベントで、次のようにします。

modalPopup.Show();
15
Jack Marchetti

これを試して。それは100％働いています

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button ID="Btnshow" runat="server" Text="Show" OnClick="Btnshow_Click" />
        <asp:Button ID="BtnTarget" runat="server" Text="Target" Style="display: none" />
        <asp:TextBox ID="TextBox1" runat="server">
        </asp:TextBox>
        <input type="button" value="Get" onclick="abc()" />
        <asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="BtnTarget"
            PopupControlID="Panel1">
        </asp:ModalPopupExtender>
        <asp:Panel ID="Panel1" runat="server" BackColor="Black" Width="300px" Height="300px">
            <asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Button ID="BtnHide" runat="server" Text="Hide Button" OnClick="BtnHide_Click" />
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="BtnHide" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
        </asp:Panel>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Btnshow" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

サーバーサイドコード

protected void Btnshow_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.Show();
}
protected void BtnHide_Click(object sender, EventArgs e)
{
    ModalPopupExtender1.Hide();
}
3
Shaikh Sohail

この例から、ボタンをクリックするとすぐにパネルが表示されるのではなく、条件に応じてパネルの表示を簡単に制御できます。

<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click"/>
<asp:HiddenField ID="hdnField" runat="server" />
<ajaxToolkit:ModalPopupExtender runat="server" 
  TargetControlID="hdnField" 
  ID="btnAdd_ModalPopupExtender"
  PopupControlID="pnlPrintName">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPrintName" runat="server">
.
.
</asp:Panel>

//Server side code:
protected void btnAdd_Click(object sender, EventArgs e)
{
  if( dt.Rows.Count == 0 )
  {
     btnAdd_ModalPopupExtender.Show();
  }
  else
  {
     add();
  }
}
1
Lisa

最初の試行：ButtonIDをOkControlIDタグに設定して、再試行してください

OR

2番目の試み：JavaScriptでイベントを呼び出すクリックイベントに問題があるようです

<div> 
    <cc1:ModalPopupExtender PopupControlID="Panel1"  
         ID="ModalPopupExtender1" 
         runat="server" TargetControlID="LinkButton1" OkControlID="Ok"  
         OnOkScript="__doPostBack('Ok','')"> 
    </cc1:ModalPopupExtender> 
    <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>  
</div>         

<asp:Panel ID="Panel1" runat="server"> 
    <asp:Button ID="Ok" runat="server" Text="Ok" onclick="Ok_Click" />             
</asp:Panel>
1
MUG4N

コードビハインドでは、これを行うことができます。

if (true)
{
    var script = @"Sys.Application.add_load(function() { $find('behavoirIDModal').show(); });";
    ScriptManager.RegisterStartupScript(this, GetType(), "Show", script, true);
}

この「behavoirIDModal」を変更

1
Diego Venâncio