SimpleModal rompe las devoluciones de ASP.Net

javascript jquery

Question

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

Hay una fuente que encontré con una solución alternativa , 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: Debería 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

Todas las devoluciones de ASP.NET estándar funcionan llamando a un método de 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 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 una página ASP.NET. 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 control ASP.NET AJAX ModalPopup ?

Answer 2

Los navegadores web NO PUBLICARÁN elementos de formularios ocultos u ocultos.

Entonces, ¿qué está pasando es:

1. El usuario hace clic en un botón en su diálogo.
2. El botón llama al método close () de SimpleModal, ocultando el diálogo y el botón
3. El cliente PUBLICA el formulario (sin la ID del botón)
4. El marco de 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 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 la referencia de diálogo SimpleModal del lado del cliente):

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 tenga para ese botón.

@Dan

Todas las devoluciones de ASP.NET estándar funcionan llamando a un método de 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 3

FWIW, he actualizado la publicación del blog que mencionaste con la aclaración de venir, publicada aquí - el razonamiento y otros detalles están en la publicación del blog:

La solución (a partir de mi última comprobación antes del almuerzo):

1. Anule el evento onClose del diálogo y haga lo siguiente:
   1. Llamar a la función de cierre predeterminada del cuadro de diálogo
   2. Establezca el innerHTML del cuadro de diálogo div en un único & nbsp;
   3. Secuestrar __doPostBack, apuntarlo a una nueva función, newDoPostBack

De algunos comentarios que he visto en la web, el punto 1 necesita algunas aclaraciones. 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, debe anular la función onClose del diálogo definiendo una nueva función y apuntando su diálogo hacia ella, de esta manera:

$(''#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 anule habitualmente):
• Establezca el innerHTML del cuadro de diálogo div en un único & nbsp; - Este no es un paso obligatorio, saltealo si no entiendes esto.
• Secuestrar __doPostBack, apuntarlo a una nueva función, newDoPostBack

function myNewClose (dialog)

{

 dialog.close();

 __doPostBack = newDoPostBack;

}

1. Escriba la nueva función 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 4

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 5

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'' 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!

ACTUALIZACIÓN: la versión 1.3 agrega una opción appendTo en la configuración para especificar a qué elemento debe appendTo el cuadro de diálogo modal. Aquí están los documentos .

Answer 6

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

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

Answer 7

se quedó atrapado por este - muchas gracias a tghw y a todos los demás contribuyentes en el formulario de apéndice en lugar de corrección corporal. (resuelto por atributos en la versión 1.3)

Por cierto: si alguien necesita cerrar el diálogo programáticamente desde .net, puede usar 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 8

Además de la respuesta de tghw, esta excelente publicación de blog me ayudó: jQuery: arregle sus devoluciones en formularios Modal , específicamente el comentario de BtnMike: "Tampoco debe tener CssClass =" simplemodal-close "configurado en su asp: botón". Sacar eso de la clase fue la solución no obvia para mí.

-John

Answer 9

si no quiere modificar la fuente de SimpleModal. prueba esto..

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

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

el complemento SimpleModal agrega dos esto a tu marcado.

1. ''simplemodal-overlay'' para el fondo
2. ''simplemodal-container'' que contiene el div que ves como modal emergente.

Answer 10

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

Por lo tanto, en lugar de utilizar los botones en el cuadro de diálogo para generar la devolución de datos, evita que los envíe y luego encuentra un botón oculto en el formulario y llama a su evento de clic.