SimpleModal breaks ASP.Net Postbacks

Question

Я использую jQuery и SimpleModal в проекте ASP.Net, чтобы сделать несколько приятных диалогов для веб-приложения. К сожалению, любые кнопки в модальном диалоге больше не могут выполнять свои обратные вызовы, что на самом деле неприемлемо.

Существует один источник, который я нашел с workaround, но для жизни меня я не могу заставить его работать, главным образом потому, что я не полностью понимаю все необходимые шаги.

У меня также есть обходное решение, которое должно заменить postbacks, но оно уродливое и, вероятно, не самое надежное. Я бы очень хотел, чтобы ретрансляторы снова работали. Есть идеи?

UPDATE: Я должен уточнить, что postbacks не работают, потому что Javascript, используемый для выполнения почтовых сообщений, сломался каким-то образом, поэтому ничего не происходит при нажатии кнопки.

Answer 1

Оба вы были на правильном пути. Я понял, что SimpleModal добавляет диалог к ​​телу, который находится за пределами ASP.Net <form>, что нарушает функциональность, поскольку не может найти элементы.

Чтобы исправить это, я просто изменил источник SimpleModal, чтобы добавить eveything в 'form' вместо 'body'. Когда я создаю диалог, я также использую опцию persist: true, чтобы убедиться, что кнопки остаются открытыми и закрывающимися.

Спасибо всем за предложения!

UPDATE: Версия 1.3 добавляет в конфигурацию опцию appendTo для указания того, к какому элементу должен быть добавлен модальный диалог. Here are the docs.

Answer 2

Все стандартные обратные копии ASP.NET работают, вызывая метод javascript __doPostBack на странице. Эта функция представляет форму (ASP.NET действительно любит только одну форму на странице), которая включает в себя какое-то скрытое поле ввода, в котором живет весь мир представлений и другая доброта.

На первый взгляд я ничего не вижу в SimpalModal, который бы испортил форму вашей страницы или любой из стандартных скрытых входов, если только содержимое этого модала не произошло из HTTP GET в ASP.NET стр. Это приведет к тому, что две формы ASP.NET будут переданы в один DOM и почти наверняка испортили бы функцию __doPostBack.

Считаете ли вы использование ASP.NET AJAX ModalPopup control?

Answer 3

Веб-браузеры не будут отправлять любые заблокированные или скрытые элементы формы.

Так что же происходит,:

1. Пользователь нажимает на кнопку в вашем диалоге.
2. Кнопка вызывает метод близкого SimpleModal (в), скрытии диалогового окна и кнопки
3. Клиента Посылает форму (без ID данной кнопки)
4. Рамка ASP.NET не может понять, какая кнопка была нажата
5. Ваш код на стороне сервера не выполняется.

Решение состоит в том, чтобы делать все, что вам нужно делать на клиенте (закрыв диалог в этом случае), а затем вызывать __doPostback() самостоятельно.

Например (где «DLG» является на стороне клиента SimpleModal диалог ссылка):

btn.OnClientClick = string.Format("{0}; dlg.close();", 
         ClientScript.GetPostBackEventReference(btn, null)); 

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

@Dan

Все стандартные постбэки ASP.NET работает путем вызова __doPostBack Javascript метод на этой странице.

жерех: Кнопки не называют __doPostBack(), так как HTML элементы управления вводом уже отправить форму.

Answer 4

Я нашел следующие работы без модифицирующих 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.

Answer 5

FWIW, я обновил blog post you pointed to с приходят уточнения, здесь повторно отправил - мотивировочной & другие детали в блоге:

Решение (как моего последнего оформленного до обеда):

1. Override OnClose событие в диалоговом окне, и выполните следующие действия:
   1. вызовов по умолчанию Закрыть функцию Диалог
   2. Установите внутренний диалог диалогового окна divHTML на один & nbsp;
   3. Hijack __doPostBack, направляя его на новую функцию, newDoPostBack

Из некоторых комментариев, которые я видел в Интернете, пункт 1 нуждается некоторые разъяснения.   К сожалению, я больше не работаю с одним и тем же работодателем и не имею доступа к используемому мне коду, но я сделаю все, что в моих силах.   Во-первых, вам необходимо переопределить OnClose функцию DIALOG, определив новую функцию, и указав ваш диалог с ним, как это:

$('#myJQselector').modal({onClose: mynewClose});

• вызова по умолчанию Закрыть функцию диалога.  В функции, которую вы определяете, вы должны сначала вызвать функциональность по умолчанию (наилучшая практика практически для всего, что вы обычно переопределяете):
• Установить внутренний диалог диалогового окна divHTML на один & nbsp; - Это не необходимый шаг, поэтому пропустите его, если вы этого не понимаете.
• Hijack __doPostBack, направляя его на новую функцию, newDoPostBack

function myNewClose (dialog)

{

dialog.close();

__doPostBack = newDoPostBack;

}

1. Написать функцию 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();

 } 
} 

Answer 6

Новый JQuery.simplemodal-1.3.js имеет опцию appendTo. Поэтому добавьте параметр appendTo: 'form', потому что по умолчанию используется appendTo: 'body', который не работает в asp.net.

Answer 7

Имел ту же проблему, но {appendTo:'form'} заставлял модальное всплывающее окно отображаться полностью неправильно (как если бы у меня была проблема с CSS).

Выключает шаблон, на котором я строил сверху, включает в себя другие формы на странице. Как только я установил {appendTo:'#aspnetForm'} (идентификатор формы Asp.net по умолчанию), все работало отлично (включая обратную передачу).

Answer 8

был пойман этим - большое спасибо tghw и всем другим вкладчикам в форме appendto вместо исправления тела. (Разрешаться атрибутами версии 1.3)

КСТАТИ: Если кому-то нужно, чтобы закрыть диалоговое окно программно из .net - вы можете использовать этот тип синтаксиса

private void CloseDialog() 
{ 
    string script = string.Format(@"closeDialog()"); 
    ScriptManager.RegisterClientScriptBlock(this, typeof(Page), UniqueID, script, true); 
} 

где Javasсript-CloseDialog, как это. ответ ...

function closeDialog() { 
     $.modal.close(); 
    } 

Answer 9

в дополнение к tghw, это отличный блог помог мне: jQuery: Fix your postbacks in Modal forms - специфически комментарий BtnMike в: «Вы также не должны иметь CssClass =»-близко SimpleModal»установлен на вашем жерех: кнопка. " Снятие этого класса было не очевидным для меня решением.

-John

Answer 10

, если вы не хотите изменить источник SimpleModal. попробуйте это ..

После вызова метода() модальный добавить следующее:

$("#simplemodal-overlay").appendTo('form'); 
$("#simplemodal-container").appendTo('form'); 

плагин SimpleModal добавить два это в разметке.

1. 'SimpleModal-Перекрытие для фона
2. 'SimpleModal-контейнера' containig ДИВ, что вы whant, как всплывающее окно модальным.