SimpleModal прерывает обратную передачу ASP.Net

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

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

Вы рассматривали возможность использования Элемент управления ASP.NET AJAX ModalPopup?

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

Итак, что происходит:

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

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

Например (где "dlg" - ссылка на диалоговое окно SimpleModal на стороне клиента):

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

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

@Dan

All standard ASP.NET postbacks work by calling a __doPostBack javascript method on the page.

asp: кнопки не вызывают __doPostback (), потому что элементы управления вводом HTML уже отправляют форму.

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

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

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

ОБНОВИТЬ: Версия 1.3 добавляет в конфигурацию параметр appendTo для указания, к какому элементу должен быть добавлен модальный диалог. Вот документы.

Я нашел следующие работы без изменения 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();
    });
}          

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

FWIW, я обновил сообщение в блоге, на которое вы указали, добавив разъяснения, репосты здесь - рассуждения и другие подробности в сообщении в блоге:

Решение (на момент моей последней регистрации перед обедом):

1. Переопределите событие onClose диалогового окна и выполните следующие действия:
   1. Вызов функции закрытия диалогового окна по умолчанию
   2. Установите для тега innerHTML диалогового окна один
   3. Перехватите __doPostBack, указав его на новую функцию newDoPostBack

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

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

• Вызвать функцию закрытия диалогового окна по умолчанию. В определяемой вами функции вы должны сначала вызвать функциональность по умолчанию (лучшая практика практически для всего, что вы обычно переопределяете):
• Задайте для innerHTML диалогового блока значение single - это необязательный шаг, поэтому пропустите его, если вы этого не понимаете.
• Перехватите __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();

    }
}
    

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

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

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

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

кстати: если кому-то нужно программно закрыть диалоговое окно из .net - вы можете использовать этот тип синтаксиса

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

где javascript для closedialog выглядит так ....

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

В дополнение к ответу tghw мне помогло это отличное сообщение в блоге: jQuery: исправьте ваши постбэки в модальных формах - в частности, комментарий BtnMike: «У вас также не должно быть CssClass =” simplemodal-close ”, установленного на кнопке asp :.» Убрать это из класса было неочевидным для меня решением.

-Джон

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

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

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

плагин SimpleModal добавляет два таких файла в вашу разметку.

1. 'simplemodal-overlay' для фона
2. 'simplemodal-container' содержит div, который вы хотите использовать как всплывающее модальное окно.