ASP.Net + + jQuery jQuery plugin de validación + + UpdatePanel nyroModal - éxito a disparar sobre cada campo!

Question

Tengo una forma que contiene una lista de campos de entrada que el usuario se llena con precios (números). He puesto sus clases CSS a "necesarios" y "Número", por lo que la validación plugin de jQuery los valida en consecuencia. Todo lo que está funcionando perfectamente bien. Los errores se muestran cuando cada campo o bien no es un número o el valor que falta, etc.

Esta forma entera es en realidad dentro de una ventana emergente modelo nyroModal (jQuery plugin). Pero eso no debería importar, es sólo una forma de la tela .aspx independientemente. Dentro de eso, también he utilizado un UpdatePanel y poner todo dentro de él, porque mi forma es esencialmente un proceso de 2 etapas. Hay algunos pasos básicos que el usuario debe completar en la primera página de 'de la forma. Cuando eso valida y funciona, acabo de ocultar / mostrar algunos elementos dentro del UpdatePanel para mostrar al usuario la siguiente 'página' de la forma, que es todos los campos de entrada de cuadro de texto el precio como se ha descrito anteriormente.

Estoy utilizando un ImageButton como el punto de disparo para validar el formulario. Por defecto, si acaba de salir de una ImageButton la manera que es, .Net disparar una devolución de datos, la devolución de datos AJAX en mi caso, porque su todo ocurre dentro de un UpdatePanel. Que a su vez, se desea. No quiero una devolución de datos completa fea por razones obvias.

Después de un montón de lectura, necesitaba una manera de unir a PageRequestManager de .Net en javascript para que pudiera interceptar cuando .Net quería hacer una devolución de datos, basado en jQuery si había validado correctamente el formulario o no. Así que mi lógica dice: Por defecto, no permita que las devoluciones de datos, pero cuando jQuery valida correctamente el formulario, establecer una variable que dice que las devoluciones de datos están ahora autorizados, entonces la próxima vez que una devolución de datos intenta pasar, va a pasar. Y por lo tanto el éxito mostrar al usuario.

Esta es la clase de todos los que trabajan razonablemente bien, pero hay un problema final.

validar la validación del plugin de jQuery opción ({} éxito) parece estar disparando erróneamente después de la validación es exitosa en cada campo individual, no todo el formulario. Es decir. si entro en un número en cualquiera de los campos de entrada de precios, esta opción se disparará el éxito y establecer mi variable de cancelPostback a falso, que a su vez significa que la forma se somete ahora a pesar de que no ha sido validado, sólo porque era un campo válido. Lo que habría esperado esta opción Validar ({} éxito) a sólo el fuego una vez que el formulario completo fue validado.

¿He interpretado de forma incorrecta, y de hecho su hacer lo que va a ser? Si es así, ¿cómo puedo simplemente poner mi variable de cancelPostback a true sólo cuando se valida el formulario completo?

Gracias montones de alguna idea o cabezas para arriba.

Mi código jQuery para implementar la validación y también interceptar el evento .Net devolución de datos es el siguiente:

<script type="text/javascript">
    // By default, don't allow Postback until we've successfully validated our form on the client-side.
    var cancelPostback=true;

    // Every single time the page loads, including every single AJAX partial postback
    function pageLoad()
    {
        // Reset the value to say that "We don't allow Postbacks at this stage"..
        cancelPostback=true;

        // Attach client-side validation to the main form
        $("#<%= form1.ClientID %>").validate({ success: function() { alert('validation succeeded!'); cancelPostback = false; } });

        // Grab a reference to the Page Request Manager
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(onEachRequest);

        alert("Page Load");
    }

    // Our own custom method to be attached to each new/future page request..
    function onEachRequest(sender, args)
    {
        alert("About to cancel? " + cancelPostback);
        // Check to see if we need to Cancel this Postback based on Conditional Logic within this page..
        args.set_cancel(cancelPostback);
    }
</script>

Answer 1

Yo sugeriría mirar las opciones submitHandler y invalidHandler. Uno u otro se debe trabajar por lo que quieres. La mejor manera, creo, sería permitir que las devoluciones de datos por defecto y establecer el cancelPostback en true en el invalidHandler. Como alternativa, puede escribir su propia submitHandler que llama directamente __doPostBack y sustituye a la presentación a través de la ImageButton.

Answer 2

he tenido problemas con su solución, porque todos los navegadores excepto para IE estaban disparando la función "onEachRequest" Antes de la función del validador jQuery submitHandler (). Se me ocurrió una solución más elegante que simplemente se cancela la devolución de datos si falla la validación, en lugar de depender de una variable preestablecida.

  Sys.Application.add_init(function() {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(onEachRequest);
  }); 

  function onEachRequest(sender, args) {
    if (args.get_postBackElement().id == <%= [YourSubmitButton].ClientID %>) {
      args.set_cancel(!$('#aspnetForm').valid());
    }
  }

Answer 3

Gracias montones tvanfosson para la pronta asistencia.

Actualización Ok:

He seguido cada vez más vínculos y, finalmente encontré la documentación de "éxito". La documentación sobre la propia página del plugin es terrible y omite muchas características clave :) Pero en la página oficial de jQuery su "mejor". La opción de "éxito" tiene la intención de disparar cada vez un campo individual se valida correctamente. Así que estaba trabajando en el diseño y yo estaba suponiendo erróneamente que sólo dispara cuando todo el formulario era válido.

He intentado su idea invalidHandler. Me encantó esta idea. Una cuestión que se me ocurrió fue que contra la devolución de datos del ImageButton seguiría siendo siempre disparar en primer lugar, por lo que sería empezar a publicar la espalda antes del código invalidHandler correría. Por lo que la devolución de datos seguiría adelante, después de eso, invalidHandler podría desactivar las devoluciones de datos futuros, que estaban disparando en el orden equivocado lamentablemente. Pero aparte de eso, se mostró cada otro signo de ser la solución perfecta.

Entonces fui a la inversa el camino tratando submitHandler, es decir, el inverso. De nuevo, esto tuvo algunos problemas en orden, ya que la devolución de datos volvería a disparar primero, pero ser bloqueado, entonces submitHandler permitiría a las devoluciones de datos futuros, pero ya era demasiado tarde, por lo que esta devolución de datos se ha perdido. Habría que hacer clic en el botón de nuevo dos veces para conseguir que ir.

Así que la solución semi-kludgey final, que no es demasiado malo para ser honesto, fue la siguiente:

He cambiado a esta línea:             // Adjuntar la validación del lado del cliente al formulario principal             . $ ( "# <% =% Form1.ClientID>") validar ({submitHandler: function () {PreventPostback = false; __doPostBack ( 'UpdatePanel1', '');}});

¿Qué como se puede ver, cambia primero la variable PreventPostback, pero luego dispara una nueva devolución de datos de forma manual, ya que la primera devolución de datos ya habría sido bloqueado y murió fuera. Así que esta llamada __doPostBack Manual asegura que una nueva devolución de datos se disparó respetando el nuevo valor de PreventPostback.

He quitado los métodos de evento desde detrás de las ImageButtons, e hizo un nuevo método en el código del lado del servidor llamado "DoPostBackLogic ()", que sólo se llama cuando la página se devuelve, que sé que debe haber sido de esta lógica de validación , porque esa es la única devolución de datos que puede suceder en mi formulario. Entonces, de Ocultar / Mostrar / guardar la lógica pasa allí para mí. Lo que significa que cuando yo estoy llamando manualmente el __doPostBack, puedo simplemente usar el ID del UpdatePanel y no preocuparse por imitando un ImageButton particular, etc.

Esta forma en que funciona perfectamente. Devoluciones de datos están desactivados por defecto, y cuando el formulario es válido, las devoluciones de datos se dejan, pero entonces una devolución de datos se activan manualmente para que el nuevo valor tenga efecto.

Así que este es esencialmente su segunda solución, gracias una vez más para escuchar y compartir! :)