Question

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

<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)

{ string x = txtTestVS.Text; }

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

Answer 1

这是对话框插件的常见问题，问题是当内容放在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');

这应该让你去，文本框值将通过。

Answer 2

问题

从我的阅读，在这里和其他地方，显然jQuery UI（在对话框初始化时）将对话框元素（及其内容）移动到<form元素之外，并将其附加到<body。推测是因为当形式不存在时，身体总是存在，并且当使用IE时可能存在一些z次序的好处。

问题是，Microsoft要求所有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选择器-e.g对对话框元素的引用。 $('#mydiv')。

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

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

detach jQuery方法将其从DOM中删除，但维护所有jQuery事件和与之关联的数据。
（*因为detach是随jQuery 1.4引入的，所以此解决方案仅限于该版本及更高版本。我听说旧版本的jQuery可能通过使用克隆和删除而取得了有限的成功，尽管我没有'试了一下。）

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

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

Answer 3

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

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

或

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

Answer 4

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

中

带有UpdatePanel Viewstate问题的JQuery BlockUI

4 个答案:

问题

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