SimpleModal breaks ASP.Net Postbacks

Question

Estoy usando jQuery y SimpleModal en un proyecto ASP.Net para hacer algunos buenos cuadros de diálogo para una aplicación web. Desafortunadamente, cualquier botón en un diálogo modal ya no puede ejecutar sus devoluciones, lo que no es realmente aceptable.

Hay una fuente que he encontrado con un workaround, pero por mi vida no puedo hacer que funcione, sobre todo porque no entiendo completamente todos los pasos necesarios.

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

ACTUALIZACIÓN: Debo aclarar, las devoluciones de datos no funcionan porque el Javascript utilizado para ejecutar los respaldos de la publicación 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 diálogo al cuerpo, que está fuera de ASP.Net's <form>, que rompe la funcionalidad, ya que no puede encontrar los elementos.

Para solucionarlo, acabo de modificar la fuente de SimpleModal para agregar todo a 'form' en lugar de 'body'. Cuando creo el cuadro de diálogo, también utilizo la opción persist: true, para asegurarme de que los botones se mantienen abiertos y cerrados.

Gracias a todos por las sugerencias!

UPDATE: Version 1.3 añade una opción appendTo en la configuración para especificar qué elemento del cuadro de diálogo modal debe ser añadido a. Here are the docs.

Answer 2

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

En vista de ello no puedo ver nada en SimpalModal que arruine 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 un ASP.NET página. Eso daría como resultado que dos formularios ASP.NET se procesen en un DOM y que casi con toda seguridad arruinarían la función __doPostBack.

¿Ha considerado usar el ASP.NET AJAX ModalPopup control?

Answer 3

Los navegadores web NO PUBLICARON ningún elemento deshabilitado u oculto.

Así que lo que está sucediendo es:

1. El usuario hace clic en un botón en su diálogo.
2. El botón llama al método cerca de SimpleModal(), ocultando el diálogo y el botón
3. los puestos cliente la forma (sin identificación del botón)
4. El marco ASP.NET no puede averiguar qué botón se hizo clic
5. El código del lado del servidor no se ejecuta.

La solución es hacer todo lo que necesite hacer en el cliente (cerrando el diálogo en este caso) y luego llamar a __doPostback() usted mismo.

Por ejemplo (donde "DLG" es el lado del cliente de referencia de diálogo SimpleModal):

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

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

@ Dan

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

asp: Los botones no llaman __doPostBack() porque los controles de entrada HTML ya enviar el formulario.

Answer 4

he encontrado las siguientes obras sin simplemodal.js modificadores:

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

Así que en lugar de utilizar los botones en el cuadro de diálogo para hacer que la devolución de datos que impiden su someto y luego encontrar un botón oculto en la forma y llamar a su evento de clic.

Answer 5

Fwiw, he actualizado el blog post you pointed to con llegado aclaración, insertados aquí - los razonamientos & otros detalles se encuentran en la entrada del blog:

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

1. Sobreescribir caso onClose del diálogo, y haga lo siguiente:
   1. Close Call función por defecto del cuadro de diálogo
   2. Establezca el innerHTML del cuadro de diálogo div en un solo & nbsp;
   3. Secuestro __doPostBack, apuntando a una nueva función, newDoPostBack

De algunos comentarios que he visto en la web, punto 1 necesita alguna aclaración.   Desafortunadamente, ya no estoy con el mismo empleador, y no tengo acceso al código que utilicé, pero haré lo que pueda.   En primer lugar, es necesario reemplazar la función onClose del diálogo mediante la definición de una nueva función, y señalando su diálogo para que, de esta manera:

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

• llamada predeterminado Cerrar la función del diálogo.  En la función que defina, primero debe llamar a la funcionalidad predeterminada (una práctica recomendada para todo lo que sobrescriba generalmente):
• Establezca el innerHTML del cuadro de diálogo div en un solo & nbsp; - Este no es un paso obligatorio, saltealo si no entiendes esto.
• Secuestro __doPostBack, apuntando a una nueva función, newDoPostBack

function myNewClose (dialog)

{

dialog.close();

__doPostBack = newDoPostBack;

}

1. Escribir 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 6

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

Answer 7

Tuve el mismo problema, pero {appendTo:'form'} hizo que la ventana emergente modal se procesara por completo (como si tuviera un problema de CSS).

Resulta que la plantilla que estoy construyendo tiene incluye incluir otros formularios en la página. Una vez que configuré {appendTo:'#aspnetForm'} (el ID de formulario predeterminado de Asp.net), todo funcionó bien (incluida la devolución de datos).

Answer 8

atrapado por este - muchas gracias a tghw y todos los demás colaboradores en el formulario de apéndice en lugar de corregir el cuerpo. (Resuelto por atributos en la versión 1.3)

BTW: Si alguien necesita para cerrar el diálogo de programación .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 9

Además de tghw de respuesta, esta excelente entrada en el blog me ha ayudado: jQuery: Fix your postbacks in Modal forms - específicamente el comentario de BtnMike: "tampoco debe tener CssClass =”-cerca SimpleModal”establecido en su asp: botón. " Sacar eso de la clase fue la solución no obvia para mí.

-John

Answer 10

si no quieren modificar la fuente SimpleModal. intente esto ..

Después de llamar al método modal() añadir lo siguiente:

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

el plugin SimpleModal añadir dos esto a su margen de beneficio.

1. 'SimpleModal-overlay' para el fondo
2. 'SimpleModal-contenedor' containig el div que whant como emergente modal.