Question

我正在尝试使用ModalPopupExtender和动画gif来创建一种“处理...”窗口。

此页面打开可能需要一段时间来处理请求...目前没有办法加快速度。最后，我可以将它切换到幕后运行在DB上的作业，并在完成后通过电子邮件发送它们。但是现在我只需要显示一个弹出模式处理窗口。

modalpopup工作并显示我附加的面板......问题是按钮回发永远不会触发。这不是AJAX调用，而是完整的回发。通过使用JavaScript打开面板，我在其他页面上做了类似的事情，但在这个页面上我想使用一个模态面板，这样他们就不会搞乱任何控件。

这可能吗？

这是我的代码：

服务器端按钮处理程序：

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
'do stuff here
Dim str As String = ""
End Sub

客户端：

...
<asp:Button ID="Button1" runat="server" Text="Button" />
...
<asp:Panel ID="pnlProgress" runat="server" style="display:none">
<div class="borderPanel">Hello!!</div>
</asp:Panel>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="pnlProgress" backgroundcssclass="ModalPopupBG" BehaviorID="modalpopup" >
</asp:ModalPopupExtender>
...

因此，当我单击Button1时，模式会显示，但回发永远不会命中服务器端方法。有任何想法吗？（顺便说一下，这些控件通常被命名，因为这只是一个测试。）

谢谢，乔治

这是我的新代码...... HEAD中的JS代码：

function ShowPopup() {
  $find('modalpopup').show();
  return true;
}

按钮，面板MPE代码：

<asp:Button ID="Button1" runat="server" Text="login" OnClientClick="ShowPopup();" OnClick="Button1_Click" />

<asp:ModalPopupExtender runat="server" ID="programmaticModalPopup" BehaviorID="modalpopup" TargetControlID="loginButton" PopupControlID="programmaticPopup" BackgroundCssClass="modalBackground" DropShadow="True" RepositionMode="RepositionOnWindowScroll"></asp:ModalPopupExtender>

<asp:Panel runat="server" CssClass="ModalPopupBG" ID="programmaticPopup" Style="background-color: #FFFFCC; display: none; height: 25px; width: 85px; padding: 10px">
    <div id='messagediv' style="text-align: center">
    Loading...</div>
</asp:Panel>

服务器端代码：

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs) Handles Button1.Click
    'do stuff here
    Dim str As String = ""
End Sub

Answer 1

您需要在按钮标记中添加单击事件（OnClick =“Button1_Click”）。

<asp:Button ID="Button1" runat="server" Text="Button"  OnClick="Button1_Click" />

您的问题是ModalPopup正在显示客户端。

您需要触发回发到服务器。

为ModalPopup添加虚拟目标

< asp:Button runat="server" ID="HiddenTargetControlForModalPopup" style="display:none" />

设置TargetControlID =“HiddenTargetControlForModalPopup”

在Button1_Click事件中调用ModalPopupExtender1.show（）。

Button1现在将触发服务器端事件。

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .ModalPopupBG
        {
            background-color: #666699;
            filter: alpha(opacity=50);
            opacity: 0.7;
        }

        .HellowWorldPopup
        {
            min-width: 200px;
            min-height: 150px;
            background: white;
        }
        .hide
        {
            display: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:Button ID="Button1" runat="server" Text="click" />
        <asp:Button ID="Button2" runat="server" Text="Button" CssClass="hide" />
        <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
            TargetControlID="Button2" PopupControlID="Panel1" PopupDragHandleControlID="messagediv"
            Drag="true" BackgroundCssClass="ModalPopupBG">
        </cc1:ModalPopupExtender>

        <asp:Panel ID="Panel1" Style="display: none" runat="server">
            <div id='messagediv' style="text-align: center"  class="HellowWorldPopup">
                Loading...

            </div>
        </asp:Panel>
    </div>
    </form>
</body>
</html>

代码背后的页面

 Protected Sub Button1_Click(sender As Object, e As System.EventArgs) Handles Button1.Click
        ModalPopupExtender1.Show()

    End Sub

您可以使用

隐藏ModalPopup

ModalPopupExtender1.Hide() ;

我希望它能帮到你

Answer 2

您是否查看过UpdateProgress控件？您是否有特殊原因要进行ModalPopup？

编辑：您是否尝试过使用Button的OnClientClick属性？这将使您能够通过JavaScript显示模式弹出窗口，然后进入服务器端并运行耗时的操作。

确保从您的javascript方法return true;，以便完整的PostBack将启动到服务器。

ModalPopupExtender和Progress GIF没有在Post-Back上点击Button_Click

2 个答案: