SimpleModal ломает обратные передачи ASP.Net

Question

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

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

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

ОБНОВЛЯТЬ:Я должен уточнить, обратные передачи не работают, потому что Javascript, используемый для выполнения обратных сообщений, каким-то образом сломался, поэтому при нажатии кнопки вообще ничего не происходит.

Answer 1

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

Например (где «dlg» — это ссылка на диалог SimpleModal на стороне клиента):

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

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

@Дэн

Все стандартные обратные передачи ASP.NET работают путем вызова метода javascript __doPostBack на странице.

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

Answer 4

был пойман на этом - большое спасибо tghw и всем остальным участникам формы добавления вместо исправления тела.(решено атрибутами в версии 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();
    }

Answer 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();
    });
}          

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

Answer 6

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

Решение (по состоянию на мою последнюю проверку перед обедом):

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

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

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

• Вызовите функцию закрытия диалогового окна по умолчанию.В определяемой вами функции вам следует сначала вызвать функцию по умолчанию (рекомендуется практически для всего, что вы обычно переопределяете):
• Установите для внутреннегоHTML диалогового элемента div одно значение.– Это не обязательный шаг, поэтому пропустите его, если вы этого не понимаете.
• Взломать __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 7

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

Answer 8

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

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

Answer 9

В дополнение к ответу tghw мне помог этот отличный пост в блоге: jQuery:Исправьте ваши постбеки в модальных формах -- в частности комментарий BtnMike:«Вы также не должны иметь CSSClass =» SimpleModal-Close », установленная на кнопке ASP:». Взятие этого из класса было нечевидным решением.

-Джон

Answer 10

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

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

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

Плагин SimpleModal добавит два this в вашу разметку.

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