SimpleModal rompe las devoluciones de datos de ASP.Net

Question

Estoy usando jQuery y SimpleModal en un proyecto ASP.Net para crear algunos diálogos interesantes para una aplicación web.Desafortunadamente, los botones en un cuadro de diálogo modal ya no pueden ejecutar sus devoluciones de datos, lo cual no es realmente aceptable.

Hay una fuente que he encontrado con un solución alterna, pero por mi vida no puedo hacer que funcione, principalmente porque no entiendo completamente todos los pasos necesarios.

También tengo una solución alternativa, que consiste en reemplazar las devoluciones de datos, pero es fea y probablemente no sea la más confiable.Realmente me gustaría que las devoluciones de datos vuelvan a funcionar.¿Algunas ideas?

ACTUALIZAR:Debo aclarar que las devoluciones de datos no funcionan porque el Javascript utilizado para ejecutar las devoluciones de publicaciones se ha roto de alguna manera, por lo que no sucede nada cuando se hace clic en el botón.

Answer 1

Ambos estaban en el camino correcto.Lo que me di cuenta es que SimpleModal agrega el cuadro de diálogo al cuerpo, que está fuera de ASP.Net. <form>, lo que rompe la funcionalidad, ya que no puede encontrar los elementos.

Para solucionarlo, simplemente modifiqué la fuente SimpleModal para agregar todo a 'form' en lugar de 'body'.Cuando creo el diálogo, también uso el persist: true opción, para asegurarse de que los botones permanezcan durante la apertura y el cierre.

¡Gracias a todos por las sugerencias!

ACTUALIZAR: La versión 1.3 agrega un appendTo opción en la configuración para especificar a qué elemento se debe agregar el diálogo modal. Aquí están los documentos..

Answer 2

Todas las devoluciones de datos estándar de ASP.NET funcionan llamando a un método javascript __doPostBack en la página.Esa función envía el formulario (a ASP.NET solo le gusta un formulario por página) que incluye un campo de entrada oculto en el que reside todo el estado de visualización y otras bondades.

A primera vista, no veo nada en SimpalModal que pueda estropear el formulario de su página o cualquiera de las entradas ocultas estándar, a menos que el contenido de ese modal provenga de un HTTP GET a una página ASP.NET.Eso daría como resultado que dos formularios ASP.NET se representaran en un DOM y casi con seguridad arruinaría la función __doPostBack.

¿Ha considerado utilizar el Control emergente modal ASP.NET AJAX?

Answer 3

Los navegadores web no PUBLICARÁN ningún elemento de formulario deshabilitado u oculto.

Entonces lo que está pasando es:

1. El usuario hace clic en un botón en su cuadro de diálogo.
2. El botón llama al método close() de SimpleModal, ocultando el cuadro de diálogo y el botón.
3. El cliente PUBLICA el formulario (sin el ID del botón)
4. El marco ASP.NET no puede determinar en qué botón se hizo clic
5. Su código del lado del servidor no se ejecuta.

La solución es hacer lo que sea necesario en el cliente (cerrar el cuadro de diálogo en este caso) y luego llamar a __doPostback() usted mismo.

Por ejemplo (donde "dlg" es la referencia del diálogo SimpleModal del lado del cliente):

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

Eso debería ocultar el cuadro de diálogo, enviar el formulario y llamar a cualquier evento del lado del servidor que tenga para ese botón.

@dan

Todas las devoluciones de datos estándar de ASP.NET funcionan llamando a un método javascript __doPostBack en la página.

asp:Los botones no llaman a __doPostback() porque los controles de entrada HTML ya envían el formulario.

Answer 4

Me sorprendió este: muchas gracias a tghw y a todos los demás contribuyentes en el formulario adjunto en lugar de la corrección del cuerpo.(resuelto por atributos en la versión 1.3)

por cierto:Si alguien necesita cerrar el cuadro de diálogo mediante programación desde .net, puede utilizar este tipo de sintaxis.

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

donde el javascript de closedialog es así....

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

Answer 5

He encontrado los siguientes trabajos sin modificar 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();
    });
}          

Entonces, en lugar de usar los botones en el cuadro de diálogo para provocar la devolución de datos, evita su envío y luego busca un botón oculto en el formulario y llama a su evento de clic.

Answer 6

FWIW, he actualizado el publicación de blog que señalaste con una aclaración, publicada nuevamente aquí; el razonamiento y otros detalles se encuentran en la publicación del blog:

La solución (a partir de mi último registro antes del almuerzo):

1. Anule el evento onClose del cuadro de diálogo y haga lo siguiente:
   1. Llame a la función Cerrar predeterminada del cuadro de diálogo
   2. Establezca el HTML interno del div de diálogo en un solo
   3. Secuestra __doPostBack, apuntándolo a una nueva función, newDoPostBack

Según algunos comentarios que he visto en la web, el punto 1 necesita alguna aclaración.Desafortunadamente, ya no trabajo con el mismo empleador y no tengo acceso al código que usé, pero haré lo que pueda.En primer lugar, debe anular la función onClose del cuadro de diálogo definiendo una nueva función y apuntándola en el cuadro de diálogo, así:

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

• Llame a la función Cerrar predeterminada del cuadro de diálogo.En la función que defina, primero debe llamar a la funcionalidad predeterminada (una práctica recomendada para casi cualquier cosa que generalmente anule):
• Establezca el HTML interno del div de diálogo en un solo– Este no es un paso obligatorio, así que omítelo si no lo entiendes.
• Secuestra __doPostBack, apuntándolo a una nueva función, newDoPostBack

function myNewClose (dialog)

{

    dialog.close();

    __doPostBack = newDoPostBack;

}

1. Escribe la función 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

El nuevo Jquery.simplemodal-1.3.js tiene una opción llamada appendTo.Entonces agregue una opción llamada appendTo:'form' porque el valor predeterminado es appendTo:'body' que no funciona en asp.net.

Answer 8

Tuve el mismo problema, pero {appendTo:'form'} provocó que la ventana emergente modal se mostrara completamente incorrecta (como si tuviera un problema de CSS).

Resulta que la plantilla sobre la que estoy creando incluye elementos que colocan otros formularios en la página.Una vez que puse {appendTo:'#aspnetForm'} (el ID de formulario predeterminado de Asp.net), todo funcionó muy bien (incluida la devolución de datos).

Answer 9

Además de la respuesta de tghw, esta excelente publicación de blog me ayudó: jQuery:Arregle sus devoluciones de datos en formularios modales - específicamente el comentario de BtnMike:"Tampoco debe tener cssclass =" simplemodal-close "establecido en su botón ASP:". Quitar eso de la clase era la solución no obvia.

-John

Answer 10

si no desea modificar la fuente SimpleModal.prueba esto..

Después de llamar al método modal() agrega esto:

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

el complemento SimpleModal agrega dos esto a su marcado.

1. 'superposición modal simple' para el fondo
2. 'simplemodal-container' que contiene el div que desea como modal emergente.