miércoles, 3 de noviembre de 2010

[ASP.NET][jQuery] Validación sin Postback

 

Introducción


Uno de los principales problemas en un desarrollo web es implementar una confirmación del usuario, especialmente cuando estas necesitas ser realizadas en el servidor.

Acciones implementadas en botones que requieren de una conformación del usuario puede ser un problema, ya que estas necesitan ir al servidor, aplicar la validación, retornar o registrar el script que mostraría al usuario el mensaje javascript de confirmación y ante la aceptación, realizar nuevamente el postback al servidor

 

Solución


El uso de jquery puede aportarnos un alivio a esta problemática, concretamente con el uso de la funcionalidad de $.ajax, el cual no permitirá invocar funcionalidad del servidor para realizar validaciones sin postback de la pagina

El resultado de la validación podrá ser validado y allí mismo mostrar el mensaje de confirmación, si este es aceptado se continua con la operación normalmente.

 

Ejemplo de código


[C#] 
 

23 comentarios:

  1. Hola buena aporte. Tu sabes como hacer desde asp.net con jequery y c# ,desde un formulario un insert a una Bd .

    ResponderEliminar
  2. Buenos Dias Leandro.
    Por favor ayúdeme con lo siguiente... Estoy usando el diseñador de informes de visual studio 2010. He colocado un textbox y he agregado información escrita directamente y mediante expresiones que toman datos de un dataset. El textbox ocupa casi toda una pagina pero... no logro controlar el interlineado. He hecho lo siguiente y no me funciona:
    a.- Elijo el texbox y voy a sus propiedad font
    b.- En su propiedad interlineado, uso la opcion custom y en la expresion escribo 24 pt
    y no me fucniona...

    ResponderEliminar
  3. hola

    no lo ahs mencionado pero imagino estas en una aplciacion web con asp.net

    has probado cambiando la propiedad TextMode="MultiLine" del TextBox, de esta forma el control se comportaria como un TextArea, la verdad no lo probe pero por ahi funcione

    saludos

    ResponderEliminar
  4. hola Josengan

    Podrias hacerlo con al ayuda de WebMethods y $.ajax

    En el webmethod tomarias la info que pasarias desde javascript por medio de JSON

    Alago como esto:
    jQuery – DropDownList anidados (nested DropDownList)

    Solo que en tu caso enviarias la info de los controles para ejedutar el INSERT en la tabla

    Como veras de esta forma no hay postback de los datos

    saludos

    ResponderEliminar
  5. Como siempre Leandro... tus aportaciones son muy buenas.... solo que tengo una duda... porque se pusa el data.d para ver el resultado del WebMetodh, por que d?

    ResponderEliminar
  6. hola Sombrerete

    simplemente porque es la forma en que se serializa en json la informacion que resulta de la invocacion

    si pones un breakpoint en el javascript, o sino la linea:

    debugger;

    al detenerse el codigo podrias inspecionar ese "data", sino recuerdo mal define otras letras para enviar info adicional sobre la operacion, y "d" imagino que es de datos

    saludos

    ResponderEliminar
  7. Hola Leandro
    Siempre leo tus aportes y es la primera vez que te posteo jejejeje
    es que me encontré con un problema
    Tengo un jquery UI de autocompletar, pero necesito validar que al momento de guardar toda la info(postback al servidor), el campo del autocompletar no este vació.
    Puse un asp validator en la pagina, pero cuando lo hago, no me funciona el autocompletar y lanza un error JS extraño .
    En definitiva realice las validaciones netamente con Javascript, ya que los validator de asp no me funcionaron en conjunto.
    Si tienes por ahí alguna recomendación seria excelente
    Gracias
    Saludos :)

    ResponderEliminar
  8. hola Giovanni

    y si usas el CustomValidator

    con este si podrias generar javascript definido por ti que actue como los demas controles de validacion de asp.net

    saludos

    ResponderEliminar
  9. Leandro y si mando a llamar desde un user control la url como iria?
    Saludos.

    ResponderEliminar
  10. hola Freddy

    el user control esta ubicado en el contexto de una pagina por lo que la invocacion al webmethod deberia realizarse a esta
    o en su defecto definir una pagina sin nada de diseño y usarla para exponer la funcionalidad que el control necesitaria

    seria una pagina para invocar webmethods pero no nadie la accederia

    saludos

    ResponderEliminar
  11. Hola leandro pero ya no esta disponible el enlace de descarga.

    ResponderEliminar
  12. hola leandro :( no puedo ver tu codigo para intertar recrear el ejemplo crees que me puedas ayudar?

    ResponderEliminar
  13. hola Sakurita

    ya esta actualizado el link


    saludos

    ResponderEliminar
  14. Leandro, buenos dias.

    Me descargue el ejemplo que me indicaste y lo he estado mirando. Parece que lanza la funcion cuando clicas sobre el botón:



    Yo necesito que se lance la funcion de validación saliendo del campo, como el customvalidatior, pero que haga una consulta del saldo sobre base de datos, y si es que sí siga y si es que no avise.

    ¿Es posible? Gracias, Jaume

    ResponderEliminar
  15. hola Jaume

    pero eso es solo cuestion de adaptar el momento en que realizas la llamada

    puedes usar el $.ajax junto a un customvalidator si lo necesitas, si conoces como definir javascript para el control de validacion, solo pones la invocacion ajax alli dentro

    solo que quizas el $.ajax debas hacerlo sincrono indincado el parametro async:false

    Check Existing Values with ASP.NET CustomValidator + jQuery $.ajax()

    saludos

    ResponderEliminar
  16. Hola Leandro: estoy recién iniciándome en .Net y tú ya eres mi maestro ..
    Mi consulta es como lo hago para validar que los datos estén una base de datos y no desde una lista..

    ResponderEliminar
    Respuestas
    1. hola
      que base de datos usas? es sql server

      podrias definir un metodo que valide si existe, como veras se usa el COUNT() y el ExecuteScalar()

      Validar si un registro ya existe en una base de datos

      saludos

      Eliminar
  17. Ciertamente, no se cuentos artículos tuyos he leído. Muy bueno, ahora, esto, es válido para aplicarlo, a un UpdatePanel, llamado desde un boton usando un ModalPopupExtension? O sea,necesito que ese UpdatePanel, valide de alguna forma 3 simples textbox antes de continuar, y poder pasar esos datos al invocador. Pareciera algo tan simple en otros viejos lenguajes como V.Fox, y sin embargo acá es tan complicado. Desde ya, agradeceré cualquier pista. Muchas gracias.

    ResponderEliminar
    Respuestas
    1. hola
      Si usas el UpdatePanel entonces no irias por el camino de ajax de jquery, sino que usarias directo los eventos de los controles de asp.net
      Podrias poner el contenido del popup en un updatepanel para que el click de un boton se ejecute en el servidor
      Para las validaciones en este caso usarias los controles de validacion de asp.net utiliza con los controles
      saludos

      Eliminar
  18. Amigo como hago para validar un formulario con varios campos por ejemplo que no estén vacíos, o que no permitan caracteres especiales etc Gracias.

    ResponderEliminar
    Respuestas
    1. hola
      Validar campos vacios no requieren de ajax, podrias usar el RequiredFieldValidator
      Que relacion tiene una validacion de requerido con los caracteres especiales, ademas no entendi, que caracteres especial haces referencia ?
      saludos

      Eliminar