SimpleModal прерывает обратные копии ASP.Net
Я использую jQuery и SimpleModal в проекте ASP.Net, чтобы сделать несколько приятных диалогов для веб-приложения. К сожалению, любые кнопки в модальном диалоге больше не могут выполнять свои обратные вызовы, что на самом деле не приемлемо.
Есть один источник, который я нашел с помощью обходной путь, но для жизни я не могу заставить его работать, в основном потому что я не полностью понимаю все необходимые шаги.
У меня также есть обходное решение, которое заключается в замене postbacks, но оно уродливое и, вероятно, не самое надежное. Я бы очень хотел, чтобы ретрансляторы снова работали. Любые идеи?
UPDATE: я должен уточнить, что postbacks не работают, потому что Javascript, используемый для выполнения почтовых сообщений, сломался каким-то образом, поэтому при нажатии кнопки ничего не происходит.
Ответы
Ответ 1
Оба вы были на правильном пути. Я понял, что SimpleModal добавляет диалог в тело, находящееся за пределами ASP.Net <form>
, что нарушает функциональность, так как не может найти элементы.
Чтобы исправить это, я просто изменил источник SimpleModal, чтобы добавить eveything в 'form'
вместо 'body'
. Когда я создаю диалог, я также использую параметр persist: true
, чтобы убедиться, что кнопки остаются открытыми и закрывающимися.
Спасибо всем за предложения!
UPDATE: версия 1.3 добавляет параметр appendTo
в настройке для указания того, к какому элементу должен присоединяться модальный диалог. Вот документы.
Ответ 2
Все стандартные обратные копии ASP.NET работают, вызывая метод javascript __doPostBack на странице. Эта функция представляет форму (ASP.NET действительно любит только одну форму на странице), которая включает в себя некоторое скрытое поле ввода, в котором живет все состояние просмотра и другая доброта.
На первый взгляд, я не вижу ничего в SimpalModal, который бы испортил вашу страницу или любой из стандартных скрытых входов, если только содержимое этого модала не произошло из HTTP GET на страницу ASP.NET, Это приведет к тому, что две формы ASP.NET будут переданы в одну DOM и почти наверняка испортили бы функцию __doPostBack.
Рассматривали ли вы использование ASP.NET AJAX ModalPopup control?
Ответ 3
Веб-браузеры не будут отправлять любые отключенные или скрытые элементы формы.
Итак, что происходит:
- Пользователь нажимает кнопку в диалоговом окне.
- Кнопка вызывает метод SimpleModal close(), скрывая диалоговое окно и кнопку
- Клиент отправляет форму (без идентификатора кнопки)
- Структура ASP.NET не может определить, какая кнопка была нажата
- Код вашей серверной части не выполняется.
Решение состоит в том, чтобы делать все, что вам нужно делать на клиенте (в этом случае закрытие диалогового окна), а затем самостоятельно вызвать __doPostback().
Например (где "dlg" - это ссылка на диалог SimpleModal на стороне клиента):
btn.OnClientClick = string.Format("{0}; dlg.close();",
ClientScript.GetPostBackEventReference(btn, null));
Это должно скрыть диалог, отправить форму и вызвать любое серверное событие, которое у вас есть для этой кнопки.
@Dan
Все стандартные обратные копии ASP.NET работают, вызывая метод javascript __doPostBack на странице.
asp: Кнопки не вызывают __doPostback(), поскольку элементы управления вводами HTML уже отправляют форму.
Ответ 4
был пойман этим - большое спасибо tghw и всем другим вкладчикам в форме appendto вместо исправления тела. (разрешено атрибутами версии 1.3)
btw: Если кому-то нужно программно закрыть диалоговое окно из .net - вы можете использовать этот тип синтаксиса
private void CloseDialog()
{
string script = string.Format(@"closeDialog()");
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true);
}
где javascript closedialog похож на это....
function closeDialog() {
$.modal.close();
}
Ответ 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.
Ответ 6
FWIW, я обновил сообщение в блоге, на которое вы указали, пришло разъяснение, перепродано здесь - аргументы и другие подробности находятся в сообщении в блоге:
Решение (с моей последней проверки перед обедом):
- Отмените диалог onClose event и выполните следующие действия:
-
- Вызов функции по умолчанию по умолчанию
- Установите диалоговое окно div innerHTML на один & nbsp;
- Hijack __doPostBack, указывая на новую функцию, newDoPostBack
Из некоторых комментариев, которые я видел в Интернете, в пункте 1 требуется некоторое разъяснение. К сожалению, я уже не с тем же работодателем и не имею доступа к используемому мной коду, но я делаю все, что могу. Во-первых, вам нужно переопределить диалоги onClose, указав новую функцию и указав на нее свой диалог:
$('#myJQselector').modal({onClose: mynewClose});
- Вызвать функцию закрытия по умолчанию в диалоговом окне. В функции, которую вы определяете, вы должны сначала вызвать функциональность по умолчанию (наилучшая практика практически для всего, что вы обычно переопределяете):
- Установите диалоговое окно div innerHTML на один & nbsp; - Это не необходимый шаг, поэтому пропустите его, если вы этого не понимаете.
- Hijack __doPostBack, указывая на новую функцию, newDoPostBack
function myNewClose (dialog)
{
dialog.close();
__doPostBack = newDoPostBack;
}
- Записать функцию newDoPostBack:
function 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();
}
}
Ответ 7
Новый JQuery.simplemodal-1.3.js имеет опцию appendTo. Поэтому добавьте параметр appendTo: 'form', потому что по умолчанию используется appendTo: 'body', который не работает в asp.net.
Ответ 8
Имел ту же проблему, но {appendTo:'form'}
заставил модальное всплывающее окно отображаться полностью неправильно (как будто у меня была проблема с CSS).
Оказывается, что в шаблоне, который я строю сверху, есть и другие страницы. Как только я установил {appendTo:'#aspnetForm'}
(ID формы по умолчанию Asp.net), все отлично работало (включая обратную передачу).
Ответ 9
В дополнение к ответу tghw это отличное сообщение в блоге помогло мне: jQuery: исправить ваши обратные копии в модальных формах - в частности, комментарий BtnMike: Вы также не должны иметь Cssclass= "simplemodal-close", установленный на вашей asp: button. " Взятие этого класса было неочевидным для меня решением.
-Джон
Ответ 10
если вы не хотите изменять источник SimpleModal.
попробуйте это.
После вызова метода modal() добавьте следующее:
$("#simplemodal-overlay").appendTo('form');
$("#simplemodal-container").appendTo('form');
Плагин SimpleModal добавляет два к вашей разметке.
- 'simplemodal-overlay' для фона
- 'simplemodal-container' содержит div, который вы считаете всплывающим модальным.