ASP.NET:ModalPopupExtender 阻止按钮单击事件触发
这是我想要做的: 单击页面上的按钮,这反过来会使 (2) 件事发生:
- 显示 ModalPopup 以防止用户按下任何按钮或更改值
- 调用我的代码隐藏方法,隐藏 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 或其 BehaviourID 的句柄。这是行不通的:
function showOverlay() {
var popup = $find('modalPopup');
popup.show();
}
popup 总是等于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();
}
Here is what I'm trying to do: Click a button on my page, which in turn makes (2) things happen:
- Display a ModalPopup to prevent the user from pressing any buttons or changing values
- Call my code behind method, hiding the ModalPopup when finished
Here is the ASP markup:
<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>
Now, here is my code behind C# code:
protected void btnSaveData_Click(object sender, EventArgs e)
{
UpdateUserData(GetLoggedInUser());
modalPopup.Enabled = false;
}
Why doesn't this work? The ModalPopup displays perfectly, but the btnSaveData_Click event NEVER fires.
UPDATE: The first suggestion did not work for me. I also tried your second suggestion (insofar as it applied to me). One minor difference on my end is that there is no button on my modal panel (pnlHidden) -- it's just a message. I did try using Javascript events on the client side, which at least did fire concurrently with my server-side event. This was good news, but I can't seem to find or grab a handle on the ModalPopupExtender or its BehaviorID. This doesn't work:
function showOverlay() {
var popup = $find('modalPopup');
popup.show();
}
popup is ALWAYS equal to null.
FINAL UPDATE: This is my final solution for getting this to work (Take specific note of the use of 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>
Using this Javascript function:
function showModal() { $find('ShowModal').show(); }
... And this code behind:
protected void btnSaveData_Click(object sender, EventArgs e)
{
UpdateUserData(GetLoggedInUser());
modalPopup.hide();
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
从这个示例中,您可以轻松地根据条件显示控制面板,而不是单击按钮后立即显示面板。
From this example you can easily control panel show up depends on conditions instead of just immediately show up panel once you click button.
在后面的代码中,您可以执行以下操作:
更改此“behavoirIDModal”
In code behind, you can do this:
Change this 'behavoirIDModal'
第一次尝试:尝试将 ButtonID 设置为 OkControlID 标签,然后重试
或
第二次尝试:通过 javascript 调用您的事件,点击事件似乎存在一些问题
First attempt: Try to set your ButtonID into OkControlID Tag and try again
OR
Second attempt: Call your event over javascript there seems to be some problems with click events
试试这个。这是 100% 有效的
服务器端代码
Try this. It is 100% working
Server side code
试试这个。
创建一个虚拟隐藏字段:
在模态弹出窗口声明中设置 TargetcontrolID = "hdnField"。
在 btnSaveData_Click 事件中,执行以下操作:
Try this.
Create a dummy hidden field:
Set the TargetcontrolID = "hdnField" in your Modal Popup declaration.
In your btnSaveData_Click event, do this: