带有 UpdatePanel Viewstate 问题的 JQuery BlockUI答案

【问题标题】：JQuery BlockUI with UpdatePanel Viewstate Issue带有 UpdatePanel Viewstate 问题的 JQuery BlockUI
【发布时间】：2011-01-17 04:59:33
【问题描述】：

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

<a href="javascript:$.blockUI({ message: $('#divTest') });">SHOW MODAL</a>

<div id="divTest" style="display: none;">
<asp:UpdatePanel ID="upTest" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <asp:TextBox ID="txtTestVS" runat="server" /><br />
        <asp:Button ID="cmdTest" Text="TEST" OnClick="cmdTest_Click" UseSubmitBehavior="false" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>

服务器端：

protected void cmdTest_Click(object sender, EventArgs e)

{ 字符串 x = txtTestVS.Text； }

字符串“x”总是等于“”。

【问题讨论】：

标签： asp.net jquery updatepanel viewstate blockui

【解决方案1】：

问题

根据我在这里和其他地方的阅读，显然 jQuery UI（在对话框初始化时）将您的对话框元素（连同其内容）移动到 <form 元素之外，并将其附加到 <body。推测是因为当表单不存在时，主体总是存在，并且在使用 IE 时可能会有一些 z-order 好处。

问题是微软要求所有的 ASP.NET 控件都在页面的<form 中才能参与回发并正常工作，无论它们是否是实际的 HTML 输入控件。

一种解决方案（jQuery 1.4+）*：以编程方式将对话框移动到 HTML 表单中：

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

使用 jQuery UI 1.8.7（稳定，用于 jQuery 1.3.2+）我已经成功地通过以下“技巧”derived from this forum thread 使 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 选择器对对话框元素的引用 - 例如$('#mydiv').

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

在对话框初始化时，jQuery 将构建的对话框移到 HTML 表单之外。
通过插入给定的行，您可以将所有内容移回表单中，从而使 ASP.NET 快乐。

detach jQuery 方法将其从 DOM 中删除，但保留所有 jQuery 事件和与之关联的数据。
(* 因为 detach 是在 jQuery 1.4 中引入的，所以此解决方案仅限于此版本及更高版本。我听说旧版本的 jQuery 可能会通过使用 clone 和 remove 来获得有限的成功，尽管我没有尝试过。）

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

这是我的理解。希望它可以帮助其他人。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是对话框插件的常见问题，问题是当内容放入blockUI容器时，它被附加到<body>元素，不再以提交给服务器的表单形式出现。要解决这个问题，您需要稍微编辑一下 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 ? $('form') : $(el);

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

这应该可以让您继续前进，并且文本框值会通过。

【讨论】：

谢谢！我实际上已经修改了一段时间，但后来升级了脚本，所以它丢失了更改。现在效果很好！
@Chris - 太棒了！很高兴你重新开始运行
相关SO链接：stackoverflow.com/questions/757232/…

【解决方案4】：

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

<a href="javascript:$.blockUI({ message: $('#divTest').val() });">SHOW MODAL</a>

或

<a href="javascript:$.blockUI({ message: $('#divTest').text() });">SHOW MODAL</a>

【讨论】：

不，那行代码只是告诉 BlockUI 模态 div。它不是在检索值或文本。
明白了。我不使用该插件，但它要求显示实际消息似乎是合乎逻辑的。