SimpleModal ломает постбэки ASP.Net

Question

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

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

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

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

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

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

@ Dan

Все стандартные постбэки ASP.NET работают, вызывая на странице javascript-метод __doPostBack.

asp: кнопки не вызывают __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. попробуйте это ..

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

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

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

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

Answer 6

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

-John

Answer 7

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

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

Answer 8

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

Answer 9

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

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

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

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

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

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

function myNewClose (dialog)

{

    dialog.close();

 </code><code>   __doPostBack = newDoPostBack;

</code><code>}

1. Напишите новую функцию DoPostBack:

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 10

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

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