JQuery BlockUI с UpdatePanel Viewstate Проблема - PullRequest
Новая
       64

JQuery BlockUI с UpdatePanel Viewstate Проблема

4 голосов
/ 16 февраля 2010

Я использую 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" всегда равна "".

Ответы [ 4 ]

5 голосов
/ 16 февраля 2010

Это обычная проблема с подключаемыми модулями диалога, проблема в том, что контент помещается в контейнер 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');

Это должно помочь вам начать работу, и значения текстовых полей будут проходить.

1 голос
/ 09 января 2011

Проблема

Из моего прочтения, здесь и в других местах, по-видимому, пользовательский интерфейс jQuery (при диалоге инициализации) перемещает ваш элемент диалога (вместе с его содержимым) за пределы элемента <form и присоединяет его к <body. Предположение заключается в том, что тело всегда присутствует, когда форма отсутствует, и при использовании IE могут быть некоторые преимущества z-порядка.

Проблема в том, что все элементы управления ASP.NET требуются от Microsoft, чтобы они находились на <form страницы, чтобы участвовать в обратной передаче и работать правильно, независимо от того, являются ли они фактическими элементами управления вводом HTML.

Решение (jQuery 1.4 +) *: программно переместить диалоговое окно внутри HTML-формы:

(Есть другие ответы, подобные этому. Это самый короткий из всех, что я видел, он занимает только одну строку кода и не требует изменения исходного кода jQuery.)

С jQuery UI 1.8.7 (Stable, для jQuery 1.3.2+) мне удалось добиться того, чтобы элементы управления 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 оборачивает ваш элемент диалога во внешний div с именем класса ui-dialog , который всегда находится на самом внешнем элементе диалога и является уникальным среди всех других имен классов, используемых в диалоге. Это означает, что ваш фактический диалог состоит не только из HTML-элемента, который вы указали для него, и вам нужно воздействовать на весь диалог.

После инициализации диалога jQuery перемещает построенный диалог за пределы формы HTML.
Вставляя данную строку, вы перемещаете все обратно в форму, делая ASP.NET счастливым.

Метод detach jQuery вырезает его из DOM, но поддерживает все события jQuery и связанные с ним данные.
(* Поскольку detach был представлен в jQuery 1.4, это решение ограничено этой версией и выше. Я слышал, что более старые версии jQuery могут достичь ограниченного успеха, используя вместо этого клон и удаление, хотя я не пробовал ит.)

Метод appendTo jQuery вставляет его в HTML-форму.

Это то, что я понимаю. Надеюсь, это поможет кому-то еще.

0 голосов
/ 18 марта 2010

Убедитесь, что все содержимое, которое вы хотите обновить, находится на панели обновления

0 голосов
/ 16 февраля 2010

Если ваша первая строка кода будет такой: 

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

или 

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