C# AJAX Toolkit Modal Popup 不会出现

AJAX Toolkit Modal Popup won't appear

提问by

I'm having some trouble calling a modal popup from server side. So, I set the modalpopupextender's targetcontrolID to a hidden label. Then in the codebehind from a button's click, I try to add this.modalpopup.show(); Unfortunately, the modal popup doesn't appear when this happens. I can see the code get executed, but nothing shows.

我在从服务器端调用模式弹出窗口时遇到了一些麻烦。因此，我将 modalpopupextender 的 targetcontrolID 设置为隐藏标签。然后在按钮单击的代码隐藏中，我尝试添加 this.modalpopup.show(); 不幸的是，发生这种情况时不会出现模态弹出窗口。我可以看到代码被执行，但没有显示。

Here's my ASP. minus the opening < for the button and popupextender, because for some reason those lines won't display.

这是我的 ASP。减去按钮和 popupextender 的开头 <，因为由于某种原因这些行不会显示。

<asp:Button CssClass="Button" ID="button" runat="server" Text="Button" AccessKey="m" meta:resourcekey="buttonResource1" OnClick="button_Click" /> 

<ajaxToolkit:ModalPopupExtender ID="mpe" runat="server" TargetControlID="forpopup"
            PopupControlID="PopupPanel" BackgroundCssClass="modalBackground" />

       <asp:Label ID="forpopup" runat="server" Visible="False"></asp:Label>

        <asp:panel id="PopupPanel" runat="server" BorderStyle="Groove" BorderColor="black" BorderWidth="3px" BackColor="AliceBlue" Height="200px" Width="200px" style="display: none">

            <asp:Label ID="lblPopup" runat="server" Text="popup!"></asp:Label><br />
            <br />
            <asp:DropDownList ID="ddlData" runat="server">
            </asp:DropDownList><br />
            <br />

            <asp:Button ID="btnPopupOK" runat="server" Text="Ok" />
            <asp:Button ID="btnPopupCancel" runat="server" Text="Cancel" />
        </asp:panel>    

and here is my codebehind

这是我的代码隐藏

    protected void button_Click(object sender, EventArgs e)
    {
        this.mpe.Show();
    }

回答by Dillie-O

I typically add any kind of extenders after the buttons/panels/controls they are going to modify. I haven't seen anything directly in the guides about the controls that state they have to go this way, but I've run into too many issues when I put the extenders before the controls.

我通常在他们要修改的按钮/面板/控件之后添加任何类型的扩展器。我没有在指南中直接看到任何关于控件的内容，说明它们必须这样做，但是当我将扩展器放在控件之前时，我遇到了太多问题。

Try putting the extender after the panel and button(s) in question and see if that fixes things.

尝试将扩展器放在有问题的面板和按钮之后，看看是否能解决问题。

回答by Russ Cam

According to the ASP.NET AJAX ModalPopup documentation

根据ASP.NET AJAX ModalPopup 文档

TargetControlIDis the ID of the element that activates the modal popup.

TargetControlID是激活模态弹出窗口的元素的 ID。

In your sample code, TargetControlIDis set to a Label ID="forpopup", yet in the code-behind you are attempting to show the ModalPopup using a click event handler for Button ID="button".

在您的示例代码中，TargetControlID设置为 a Label ID="forpopup"，但在代码隐藏中，您尝试使用 的单击事件处理程序显示 ModalPopup Button ID="button"。

Have you tried changing the TargetControlIDto "button"and seeing if the ModalPopup appears?

您是否尝试过更改TargetControlID为"button"并查看 ModalPopup 是否出现？

A couple of notes

一些注意事项

• What is the purpose of using Label ID="forpopup"for the TargetControlID?
• Label ID="forpopup"will not be rendered in HTML on the client.

• 使用Label ID="forpopup"for 的目的是什么TargetControlID？
• Label ID="forpopup"不会在客户端以 HTML 格式呈现。

EDIT:

编辑：

Demo code to show use-

演示代码以显示使用-

aspx content page

aspx内容页面

<asp:Content ID="Content1" ContentPlaceHolderID="Main" runat="server">    
  <asp:Button ID="btnShow" runat="server" Text="Open ModalPopup" />     

  <ajaxToolkit:ModalPopupExtender runat="server" ID="modal" BackgroundCssClass="darken" 
  CancelControlID="btnCancel" PopupControlID="pnl" TargetControlID="btnShow" />

  <asp:Panel ID="pnl" runat="server" style="width:55%;display:none;">
        <h1>You can now see me!</h1>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
        culpa qui officia deserunt mollit anim id est laborum."</p>
        <asp:Button ID="btnCancel" runat="server" Text="Close" />
  </asp:Panel>
</asp:Content>

code-behind

代码隐藏

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        btnShow.Click += new EventHandler(btnShow_Click);
    }

    protected void btnShow_Click(object sender, EventArgs e)
    {
        modal.Show();
    }

回答by Brendan Kowitz

I agree with Dillie-O, I think you will need an update panel in there if you are invoking it from the Serverside:

我同意 Dillie-O，我认为如果您从服务器端调用它，您将需要一个更新面板：

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
  <asp:panel id="PopupPanel" runat="server" BorderStyle="Groove" BorderColor="black" BorderWidth="3px" BackColor="AliceBlue" Height="200px" Width="200px" style="display: none">
    ...
  </asp:panel>
</ContentTemplate>
</asp:UpdatePanel>

then

然后

protected void button_Click(object sender, EventArgs e)
{
    this.mpe.Show();
    UpdatePanel1.Update();
}

回答by Brendan Kowitz

I had a similar problem.. I was setting the targetcontrolid of the extender to a hidden button and trying to fire the Show() event in server side code. It wasn't being displayed even though the code was getting hit. I discovered that the problem was that I was hiding the hidden button using "visible = false" which doesn't render the control to the page. I changed it to "style='display:none'" and it started working. Try changing your target control to a hidden button and make sure it's getting rendered (just not shown) and maybe it will work.

我有一个类似的问题..我将扩展器的 targetcontrolid 设置为隐藏按钮并尝试在服务器端代码中触发 Show() 事件。即使代码被击中，它也没有显示。我发现问题在于我使用“visible = false”隐藏隐藏按钮，这不会将控件呈现给页面。我将其更改为“style='display:none'”并开始工作。尝试将目标控件更改为隐藏按钮并确保它正在呈现（只是未显示），也许它会起作用。

回答by Sachin Gaur

Please set the BehaviourID attribute of ModalPopupExtender to some value, then you will be able to show and hide the modal popup.

请将 ModalPopupExtender 的 BehaviourID 属性设置为某个值，然后您将能够显示和隐藏模态弹出窗口。

回答by MoMo

I had issues with the Modal Popup not displaying when the TargetControlID button had

当 TargetControlID 按钮显示时，我遇到了 Modal Popup 不显示的问题

UseSubmitBehavior="false"

Set it to "true" and see if that resolves your issue. If that works, and assuming you didn't want the button to submit, then you might need to stop the button from submitting the form when you don't want it to.

将其设置为“true”，看看是否能解决您的问题。如果可行，并且假设您不希望按钮提交，那么您可能需要在您不希望提交表单时停止按钮提交。