SimpleModal 破坏了 ASP.Net 回发

StackOverflow https://stackoverflow.com/questions/29174

题

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

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

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

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

有帮助吗？

解决方案

你们俩都走在正确的轨道上。我意识到 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 浏览器不会发布任何禁用或隐藏的表单元素。

所以发生的事情是：

  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 输入控件已提交表单。

被这个问题抓住了 - 非常感谢 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，我已经更新了 您指向的博客文章 随着澄清，重新发布在这里 - 推理和其他细节在博客文章中：

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

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

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

$('#myJQselector').modal({onClose: mynewClose});
  • 调用对话框的默认关闭函数。在您定义的函数中，您应该首先调用默认功能（这是您通常覆盖的任何内容的最佳实践）：
  • 将对话框div的innerHTML设置为单个– 这不是必需的步骤，因此如果您不明白，请跳过它。
  • 劫持 __doPostBack，将其指向一个新函数 newDoPostBack 
function myNewClose (dialog)
{
    dialog.close();
    __doPostBack = newDoPostBack;
}
  1. 编写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 添加到您的标记中。

  1. 背景为“simplemodal-overlay”
  2. 'simplemodal-container' 包含您想要作为弹出模式的 div。
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top