SimpleModal打破了ASP.Net Postbacks

Question

我在ASP.Net项目中使用jQuery和SimpleModal来为Web应用程序创建一些不错的对话框。 不幸的是，模态对话框中的任何按钮都不能再执行回发，这是不可接受的。

我找到了一个解决方法的来源 ，但对于我的生活，我无法让它工作，主要是因为我没有完全理解所有必要的步骤。

我也有一个解决方法，即替换回发，但它很难看，可能不是最可靠的。 我真的想让回发再次运作。 有任何想法吗？

更新：我应该澄清，回发不起作用，因为用于执行回发的Javascript在某种程度上已经破坏，所以当点击按钮时根本没有任何反应。

Answer 1

你们两个都在正确的轨道上。 我意识到SimpleModal将对话框附加到正文，该正文位于ASP.Net的<form> ，这会破坏功能，因为它无法找到元素。

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

谢谢大家的建议！

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

Answer 2

所有标准的ASP.NET回发都可以通过在页面上调用__doPostBack javascript方法来工作。 该函数提交表单（ASP.NET每页真的只喜欢一个表单），其中包含一些隐藏的输入字段，其中所有的viewstate和其他善良都存在。

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

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

Answer 3

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

所以发生的事情是：

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：按钮不调用__doPostback（），因为HTML输入控件已经提交了表单。

Answer 4

被这一个抓住了 - 非常感谢tghw和其他贡献者在附加形式而不是身体修复。 （由1.3版本的属性解决）

顺便说一句：如果有人需要以编程方式从.net关闭对话框 - 您可以使用这种类型的语法

private void CloseDialog()
{
    string script = string.Format(@"closeDialog()");
    ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}

在哪里，闭路的javascript是这样的....

    function closeDialog() {
        $.modal.close();
    }

Answer 5

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

Answer 6

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

原来我正在建立的模板包括在页面上放置其他表单。 一旦我设置{appendTo:'#aspnetForm'} （默认的Asp.net表单ID），一切都很好（包括回发）。

Answer 7

除了tghw的答案之外，这篇优秀的博客帖子帮助了我： jQuery：用模态形式修复你的回发 - 特别是BtnMike的评论：“你也不能在你的asp：按钮上设置CssClass =”simplemodal-close“。” 在课堂上取消这一点对我来说是不明显的解决方案。

-约翰

Answer 8

我没有修改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();
    });
}          

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

Answer 9

FWIW，我已经更新了您指向的博客文章，并进行了澄清，转贴在此处 - 推理和其他详细信息在博文中：

解决方案（截至我午餐前的最后一次检查）：

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

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

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

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

 function myNewClose (dialog) 

 { 

  dialog.close(); 

   __doPostBack = newDoPostBack; 

 } 

1. 编写newDoPostBack函数：

  function newDoPostBack（eventTarget，eventArgument）\n { 

  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（）; 

  }\n }\n    

Answer 10

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

调用modal（）方法后添加：

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

SimpleModal插件将两个加到你的标记中。

1. 'simplemodal-overlay'用于背景
2. 'simplemodal-container'包含你作为弹出模式的div。