SimpleModal打破了ASP.Net Postbacks

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

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

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

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

Answer 1

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

，这会破坏function，因为它无法找到元素。

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

谢谢大家的建议！

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

Answer 2

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

从表面上看，我在SimpalModal中看不到任何会搞砸页面forms或任何标准隐藏输入的内容，除非该模式的内容恰好来自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和其他所有其他贡献者在附加forms而不是身体修复。 （由1.3版本的属性解决）

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

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

在哪里，closeialog的javascript就像这样….

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

Answer 5

我在没有修改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 6

FWIW，我已经更新了您指向的博客文章，并在此处重新发布 – 推理和其他详细信息在博文中：

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

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

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

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

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

 function myNewClose (dialog) 

 { 

  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

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

Answer 8

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

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

Answer 9

除了tghw的答案之外，这篇优秀的博客post帮助了我： jQuery：修复你的模态forms的回发 – 特别是BtnMike的评论：“你也不能在你的asp：按钮上设置CssClass =”simplemodal-close“。” 从课堂上拿下这个对我来说是不明显的解决方案。

-约翰

Answer 10

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

调用modal（）方法后添加：

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

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

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