SimpleModal 破坏了 ASP.Net 回发

Question

我正在使用 jQuery 和 SimpleModal 在 ASP.Net 项目中为 Web 应用程序制作一些漂亮的对话框。 不幸的是，模式对话框中的任何按钮都无法再执行其回发，这是不可接受的。

我发现了一个 解决方法，但在我的一生中，我无法让它发挥作用，主要是因为我没有完全理解所有必要的步骤。

我还有一个解决方法，那就是替换回发，但它很丑陋，而且可能不是最可靠的。 我真的很想让回发再次正常工作。 有任何想法吗？

更新：我应该澄清一下，回发不起作用，因为用于执行回发的 JavaScript 已以某种方式损坏，因此单击按钮时什么也不会发生。

Answer 1

你们俩都走在正确的轨道上。 我意识到 SimpleModal 将对话框附加到正文，该正文位于 ASP.Net 的

之外，这会破坏功能，因为它找不到元素。

为了解决这个问题，我只是修改了 SimpleModal 源代码，将所有内容附加到 'form' 而不是 'body'。 创建对话框时，我还使用 persist: true 选项，以确保按钮在打开和关闭时保持不变。

谢谢大家的建议！

更新：版本 1.3 在配置中添加了一个 appendTo 选项，用于指定模式对话框应附加到哪个元素。 这里是文档。

Answer 2

所有标准 ASP.NET 回发都是通过调用页面上的 __doPostBack javascript 方法来工作的。 该函数提交表单（ASP.NET 实际上只喜欢每页一个表单），其中包含一些隐藏的输入字段，其中包含所有视图状态和其他优点。

从表面上看，我在 SimpalModal 中看不到任何会破坏页面表单或任何标准隐藏输入的内容，除非该模式的内容恰好来自 HTTP GET 到 ASP.NET 页面。 这将导致两个 ASP.NET 表单被呈现到一个 DOM 中，并且几乎肯定会搞砸 __doPostBack 函数。

您是否考虑过使用 ASP.NET AJAX ModalPopup 控件？

Answer 3

我发现以下工作无需修改 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();
    });
}          

因此，不要使用对话框中的按钮来导致回发，而是阻止它们的提交，然后在表单中找到一个隐藏的按钮并调用其单击事件。

Answer 4

被这个问题抓住了 - 非常感谢 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();
    }

Answer 5

Web 浏览器不会发布任何禁用或隐藏的表单元素。

所以发生的事情是：

1. 用户单击对话框中的按钮。
2. 按钮调用 SimpleModal 的 close() 方法，隐藏对话框和按钮
3. 客户端 POST 表单（没有按钮的 ID）
4. ASP.NET 框架无法确定单击了哪个按钮
5. 您的服务器端代码不会被执行。

解决方案是在客户端执行您需要执行的操作（在本例中关闭对话框），然后自己调用 __doPostback()。

例如（其中“dlg”是客户端 SimpleModal 对话框引用）：

btn.OnClientClick = string.Format("{0}; dlg.close();",
                        ClientScript.GetPostBackEventReference(btn, null));

这应该隐藏对话框，提交表单，并调用该按钮的任何服务器端事件。

@担

<块引用>

所有标准 ASP.NET 回发都是通过调用页面上的 __doPostBack javascript 方法来工作的。

asp:Buttons 不会调用 __doPostback()，因为 HTML 输入控件已提交表单。

Answer 6

FWIW，我已经更新了 您指向的博客文章 带有澄清，重新发布到此处 - 推理和解释 其他详细信息位于博客文章中：

解决方案（截至午餐前最后一次签入）：

1. 覆盖对话框的 onClose 事件，然后执行以下操作：
   1. 调用对话框的默认关闭函数
   2. 将对话框 div 的 innerHTML 设置为单个  
   3. 劫持 __doPostBack，将其指向一个新函数 newDoPostBack

从我在网上看到的一些评论来看，第 1 点需要一些澄清。 不幸的是，我不再为同一个雇主工作，也无法访问我使用的代码，但我会尽力而为。 首先，您需要通过定义一个新函数并将对话框指向它来覆盖对话框的 onClose 函数，如下所示：

$('#myJQselector').modal({onClose: mynewClose});

• 调用对话框的默认关闭函数。 在您定义的函数中，您应该首先调用默认功能（这是您通常覆盖的任何内容的最佳实践）：
• 将对话框 div 的 innerHTML 设置为单个   – 这不是必需的步骤，因此如果您不明白这一点，请跳过它。
• 劫持 __doPostBack，将其指向一个新函数 newDoPostBack

函数 myNewClose（对话框）

<前><代码>{

dialog.close();

  __doPostBack = newDoPostBack;

<前><代码><代码>}

1. 编写newDoPostBack函数：

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

  }

      

Answer 7

如果您不想修改 SimpleModal 源。
尝试这个..

调用 modal() 方法后添加此内容：

$("#simplemodal-overlay").appendTo('form');
$("#simplemodal-container").appendTo('form');

SimpleModal 插件将两个此内容添加到您的标记中。

1. 背景的“simplemodal-overlay”
2. “simplemodal-container”包含您想要作为弹出模式的 div。

Answer 8

除了 tghw 的回答之外，这篇优秀的博客文章还帮助了我： jQuery：修复模态表单中的回发 - 特别是 BtnMike 的评论：“您也不能在您的 asp:button 上设置 CssClass=”simplemodal-close”。 对我来说，将其从课堂上取消并不是一个显而易见的解决方案。

-约翰

Answer 9

有同样的问题，但是 {appendTo:'form'} 导致模式弹出窗口呈现完全错误（好像我遇到了 CSS 问题）。

事实证明，我正在构建的模板包含将其他表单放在页面上的内容。 一旦我设置了 {appendTo:'#aspnetForm'} （默认的 Asp.net 表单 ID），一切都运行良好（包括回发）。

Answer 10

新的 Jquery.simplemodal-1.3.js 有一个名为appendTo 的选项。 因此添加一个名为appendTo:'form'的选项，因为默认值是appendTo:'body'，它在asp.net中不起作用。