ASP.NET：ModalPopupExtender阻止按钮点击事件触发

Question

这是我想要做的事情：在我的页面上点击一个按钮，然后发生以下两件事情：

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 事件永远不会触发。

更新：第一个建议对我没有用。我也尝试了你的第二个建议（只要它适用于我）。我的情况有一个小区别，即我的模态面板（pnlHidden）上没有按钮，只有一条消息。我尝试在客户端使用 JavaScript 事件，至少与我的服务器端事件同时触发。这是个好消息，但我似乎找不到或抓住 ModalPopupExtender 或其 BehaviorID 的句柄。这行不通：

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

弹出窗口始终等于null。

最终更新：这是我最终解决方案，使其正常工作（特别注意使用OnClientClick和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. Griffin

Answer 1

试试这个。

创建一个假的隐藏字段：

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

在你的弹出框声明中，将TargetcontrolID = "hdnField"。

在btnSaveData_Click事件中，做如下操作:

modalPopup.Show();

- Jack Marchetti

---

你知道什么很奇怪吗？我之前尝试过这个概念，但是使用的是一个虚拟按钮而不是隐藏域。那时候（使用按钮）它并没有起作用，但现在使用隐藏域却可以了。跟进问题是：弹出窗口显示了，我的数据库调用也完成了，但是modalPopup.Hide()执行得太快了，任何尝试减缓它的操作都导致弹出窗口根本没有显示。有什么解决方法吗？ - C. Griffin

如果您只是想将模态弹出窗口用作“加载”屏幕，我建议将其放入asp:UpdateProgress中。如果它运行得很快，那就很好了，对吧？您可能希望它运行得很快。当然，您可以通过执行System.Threading.Thread.Sleep(2000)（2秒）来延迟任何操作。但我绝不建议这样做。 - Jack Marchetti

我在发表上一条评论之前尝试了System.Threading.Thread.Sleep(2000);，当我这样做时，模态窗口完全消失了（从未弹出）。我将尝试使用asp:UpdateProgress控件。 - C. Griffin

这个修复方法对我有用，但是要注意的是，在您的隐藏字段上不要额外添加visible="false"。由于某种原因，这会使您在代码后台中的modalPopup.Show();事件失效。 - Ben Barreth

Answer 2

试试这个。它百分之百可行。

 <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();
}

- Shaikh Sohail

Answer 3

第一次尝试：尝试将您的ButtonID设置为OkControlID标签，然后再试一次

或者

第二次尝试：通过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>

- MUG4N

Answer 4

从这个例子中，您可以根据条件轻松控制面板的显示，而不是仅在单击按钮后立即显示面板。

<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();
  }
}

- Lisa

Answer 5

在代码后台，你可以这样做：

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

更改此处的 'behavoirIDModal'

- Diego Venâncio