SimpleModal 破坏了 ASP.Net 回发
-
09-06-2019 - |
解决方案
你们俩都走在正确的轨道上。我意识到 SimpleModal 将对话框附加到正文,该正文位于 ASP.Net 之外 <form>
, ,这会破坏功能,因为它找不到元素。
为了解决这个问题,我只是修改了 SimpleModal 源代码以将所有内容附加到 'form'
代替 'body'
. 。当我创建对话框时,我还使用 persist: true
选项,以确保按钮在打开和关闭时保持不变。
谢谢大家的建议!
更新: 1.3版本增加了一个 appendTo
配置中的选项,用于指定模式对话框应附加到哪个元素。 这是文档.
其他提示
所有标准 ASP.NET 回发都是通过调用页面上的 __doPostBack javascript 方法来工作的。该函数提交表单(ASP.NET 实际上只喜欢每页一个表单),其中包含一些隐藏的输入字段,其中包含所有视图状态和其他优点。
从表面上看,我在 SimpalModal 中看不到任何会破坏页面表单或任何标准隐藏输入的内容,除非该模式的内容恰好来自 HTTP GET 到 ASP.NET 页面。这将导致两个 ASP.NET 表单被呈现到一个 DOM 中,并且几乎肯定会搞砸 __doPostBack 函数。
您是否考虑过使用 ASP.NET AJAX ModalPopup 控件?
Web 浏览器不会发布任何禁用或隐藏的表单元素。
所以发生的事情是:
- 用户单击对话框中的按钮。
- 按钮调用SimpleModal的close()方法,隐藏对话框和按钮
- 客户端 POST 表单(不带按钮 ID)
- ASP.NET 框架无法确定单击了哪个按钮
- 您的服务器端代码不会被执行。
解决方案是在客户端执行您需要执行的操作(在本例中关闭对话框),然后自己调用 __doPostback()。
例如(其中“dlg”是客户端 SimpleModal 对话框参考):
btn.OnClientClick = string.Format("{0}; dlg.close();",
ClientScript.GetPostBackEventReference(btn, null));
这应该隐藏对话框,提交表单,并调用该按钮的任何服务器端事件。
@担
所有标准 ASP.NET 回发都是通过调用页面上的 __doPostBack javascript 方法来工作的。
asp:Buttons 不会调用 __doPostback(),因为 HTML 输入控件已提交表单。
被这个问题抓住了 - 非常感谢 tghw 和附录表单上的所有其他贡献者,而不是正文修复。(1.3版本通过属性解决)
顺便提一句:如果有人需要从 .net 以编程方式关闭对话框 - 您可以使用这种类型的语法
private void CloseDialog()
{
string script = string.Format(@"closeDialog()");
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}
CloseDialog 的 javascript 是这样的......
function closeDialog() {
$.modal.close();
}
我在不修改 simplemodal.js 的情况下发现了以下作品:
function modalShow(dialog) {
// if the user clicks "Save" in dialog
dialog.data.find('#ButtonSave').click(function(ev) {
ev.preventDefault();
//Perfom validation
// close the dialog
$.modal.close();
//Fire the click event of the hidden button to cause a postback
dialog.data.find('#ButtonSaveTask').click();
});
dialog.data.find("#ButtonCancel").click(function(ev) {
ev.preventDefault();
$.modal.close();
});
}
因此,不要使用对话框中的按钮来导致回发,而是阻止它们的提交,然后在表单中找到隐藏的按钮并调用其单击事件。
FWIW,我已经更新了 您指向的博客文章 随着澄清,重新发布在这里 - 推理和其他细节在博客文章中:
解决方案(截至我午餐前最后一次签到):
- 覆盖对话框的 onClose 事件,并执行以下操作:
- 调用对话框的默认关闭函数
- 将对话框div的innerHTML设置为单个
- 劫持 __doPostBack,将其指向一个新函数 newDoPostBack
从我在网上看到的一些评论来看,第一点需要一些澄清。不幸的是,我不再为同一个雇主工作,也无法访问我使用的代码,但我会尽力而为。首先,您需要通过定义一个新函数并将对话框指向它来覆盖对话框的 onClose 函数,如下所示:
$('#myJQselector').modal({onClose: mynewClose});
- 调用对话框的默认关闭函数。在您定义的函数中,您应该首先调用默认功能(这是您通常覆盖的任何内容的最佳实践):
- 将对话框div的innerHTML设置为单个– 这不是必需的步骤,因此如果您不明白,请跳过它。
- 劫持 __doPostBack,将其指向一个新函数 newDoPostBack
function myNewClose (dialog)
{
dialog.close();
__doPostBack = newDoPostBack;
}
- 编写newDoPostBack函数:
function newDoPostBack(eventTarget, eventArgument) {var theForm = document.forms[0];if (!theForm){theForm = document.aspnetForm;}if (!theForm.onsubmit || (theForm.onsubmit() != false)){document.getElementById("__EVENTTARGET").value = eventTarget;document.getElementById("__EVENTARGUMENT").value = eventArgument;theForm.submit();} }
新的 Jquery.simplemodal-1.3.js 有一个名为appendTo 的选项。因此添加一个名为appendTo:'form'的选项,因为默认值是appendTo:'body',它在asp.net中不起作用。
有同样的问题,但是 {appendTo:'form'}
导致模态弹出窗口渲染完全错误(就好像我遇到了 CSS 问题一样)。
事实证明,我正在构建的模板包含将其他表单放在页面上的内容。一旦我设置 {appendTo:'#aspnetForm'}
(默认的 Asp.net 表单 ID),一切都运行良好(包括回发)。
除了 tghw 的回答之外,这篇优秀的博客文章还帮助了我: jQuery:修复模态表单中的回发 ——特别是 BtnMike 的评论:“您也必须在ASP:按钮上设置SimpleModal-close”。脱下班级的是我的解决方案。
-约翰
如果您不想修改 SimpleModal 源。尝试这个..
调用 modal() 方法后添加以下内容:
$("#simplemodal-overlay").appendTo('form');
$("#simplemodal-container").appendTo('form');
SimpleModal 插件将两个 this 添加到您的标记中。
- 背景为“simplemodal-overlay”
- 'simplemodal-container' 包含您想要作为弹出模式的 div。