带有UpdatePanel Viewstate问题的JQuery BlockUI

我正在使用BlockUI来显示模态。 在阻止模式中,我有一个更新面板。 在更新面板中,我有一个文本框和一个按钮,可以将内容提交回服务器。 到目前为止一切正常(调用blockUI,出现模态,按钮执行回发)。 但是,当按钮的click事件被触发时,即使输入了文本,文本框的值也始终为空。 更新面板更新时,文本框显示为空白。 看来这可能是某种viewstate问题,我没有关闭viewstate。

SHOW MODAL 

服务器端:

 protected void cmdTest_Click(object sender, EventArgs e) 

{string x = txtTestVS.Text; }

字符串“x”始终等于“”。

这是对话框插件的常见问题,问题是当内容放在blockUI容器中时,它会附加到元素,而不再是提交给服务器的表单。 要解决这个问题,您需要稍微编辑一下blockUI代码:

以下是来源: http : //github.com/malsup/blockui/blob/master/jquery.blockUI.js

改变这个:
第262行: var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el); var layers = [lyr1,lyr2,lyr3], $par = full ? $('body') : $(el);
to: var layers = [lyr1,lyr2,lyr3], $par = full ? $('form') : $(el); var layers = [lyr1,lyr2,lyr3], $par = full ? $('form') : $(el);

还有这个:
第382行: els = $('body').children().filter('.blockUI').add('body > .blockUI');
to: els = $('form').children().filter('.blockUI').add('form > .blockUI');

这应该让你去,文本框值得通过。

问题

从我的阅读,在这里和其他地方,显然jQuery UI(在对话框初始化)将对话框元素(及其内容)移动到元素之外并将其附加到 。 推测是因为当表单不存在时总是存在主体,并且当使用IE时可能存在一些z顺序优势。

问题是,Microsoft要求所有ASP.NET控件都在页面的中参与回发和正常工作,无论它们是否是实际的HTML输入控件。

解决方案(jQuery 1.4 +)*:以编程方式移动HTML表单内的对话框:

(还有其他类似的答案。这是我见过的最短的,只需要一行代码,不需要修改jQuery源代码。)

使用jQuery UI 1.8.7(稳定,对于jQuery 1.3.2+)我已成功通过以下来自此论坛post的 “技巧”使ASP.NET控件维护PostBack行为:

 // As is customary, call $mydialog.dialog(..) to initialize it. // Init all your dialog boxes before continuing. // After init, TYPE THIS LINE to move all dialog boxes back into the form element $('.ui-dialog').detach().appendTo('form'); 

要使用修复程序仅定位一个对话框,请使用此行:

 $mydialog.closest('.ui-dialog').detach().appendTo('form'); 

其中$ mydialog是jQuery选择器-eg $('#mydiv')对对话框元素的引用。

使用类.ui-dialog的原因是因为jQuery UI将对话框元素包装在具有类名ui-dialog的外部div中,该对象始终位于对话框的最外层元素上,并且在整个使用的所有其他类名中是唯一的。对话。 这意味着您的实际对话框不仅仅是为您指定的html元素构成,而且还需要影响整个对话框。

在init init对话框中,jQuery将构造的对话框移到HTML表单之外。
通过插入给定的行,您可以将所有内容移回到表单中,从而使ASP.NET变得愉快。

detach jQuery方法将其从DOM中删除,但维护所有jQuery事件和与之关联的数据。
(*因为随jQuery 1.4引入了detach ,这个解决方案仅限于该版本和更高版本。我听说旧版本的jQuery可能通过使用克隆和删除而取得了有限的成功,尽管我还没有尝试过。)

appendTo jQuery方法将其粘贴到html表单中。

这就是我的理解。 希望它能帮助别人。

你的第一行代码应该是这样的:

 SHOW MODAL 

要么

 SHOW MODAL 

确保您要更新的所有内容都在更新面板内