Control BotonEnviar para evitar doble clic en ASP .NET Utilizamos el control personalizado Button de ASP .NET y JavaScript Fecha: 18/Nov/2004 (12/11/2004)
|
Introducci�n: El Problema
�Cuantas veces hemos desarrollado una aplicaci�n Web con ASP .NET con nuestros botoncitos y todos nuestros controles bien dise�ados, y nos falla porque el usuario hace clic dos veces en el bot�n y nos duplica las filas o nos da un error de Primary Key o cosas similares?.
En este art�culo veremos como construir un control de tipo Button que tiene la funcionalidad de que cuando lo pulsamos se desabilita y modifica su texto por un texto que le indica al usuario que se est� enviando el formulario. De esta manera evitaremos el posible "doble clic" del usuario:
La Soluci�n
Vamos a crear un control web personalizado. Si teneis alguna librer�a de ellos, lo podeis a�adir, si ya teneis experiencia. Si no teneis ninguna librer�a, abrimos el Visual Studio, Archivo -> Nuevo -> Proyecto -> Proyectos de Visual C# -> Biblioteca de Controles Web.
Ponemos el nombre que queramos a nuestra librer�a, en mi caso la he llamado RoderoLib, y le damos a Aceptar. Ahora cambiamos el nombre del fichero WebCustomControl1.cs por el nombre que le queramos dar a nuestro control, en mi caso la he llamado BotonEnviar.cs. Ahora abrimos este fichero y nos ponemos a desarrollar nuestro control.
using System; using System.Web.UI; using System.ComponentModel; namespace RoderoLib { ///Como vemos, hemos creado una propiedad TextoEnviando donde vamos a almacenar el texto que tendr� nuestro bot�n cuando lo pulsemos. Tambi�n hemos creado un campo privado para almacenar este texto. Continuamos:/// Control "Button" o Bot�n con la funcionalidad de poder hacer un solo clic /// [ToolboxData("<{0}:BotonEnviar runat=server></{0}:BotonEnviar>")] public class BotonEnviar : System.Web.UI.WebControls.Button { private string _TextoEnviando = "Enviando..."; [Bindable(true), Category("Appearance"), DefaultValue("Enviando..."), Description("Texto a mostrar cuando se pulse el bot�n")] public string TextoEnviando { get { return _TextoEnviando; } set { _TextoEnviando = value; } } public BotonEnviar() { base.Text = "Enviar"; base.CausesValidation = false; }Con esto, hemos creado el constructor de nuestro control, en el que modificamos el texto por defecto a Enviar y modificamos su comportamiento para que no cause validaci�n. Nosotros nos encargaremos de comprobar que esta validaci�n funciona correctamente. Seguimos:
protected override void OnPreRender(EventArgs e) { //Registramos la funci�n de env�o del bot�n Page.RegisterClientScriptBlock("fEnviar_" + ID,Funci�nEnviarBot�n()); base.OnPreRender(e); }Reescribimos el m�todo OnPreRender para registrar la funci�n JavaScript que utilizaremos para nuestro bot�n. Ahora vemos el m�todo Render donde escribimos nuestro control:
protected override void Render(HtmlTextWriter output) { //Creamos el panel donde va el bot�n principal output.Write("<div id='div1_" + ID + "' style='display: inline'>"); output.AddAttribute("onclick","Enviar_" + ID + "('" + ID +"');"); base.Render(output); output.Write("</div>"); //Creamos el panel y el bot�n secundario de env�o output.Write("<div id='div2_" + ID + "' style='display: none'>"); output.Write("<input disabled type=submit value='" + TextoEnviando + "' />"); output.Write("</div>"); }Lo que hacemos es crear dos Paneles, o elementos div, uno donde colocamos nuestro bot�n normal, y otro panel donde colocamos un bot�n sin funcionalidad, cuyo texto es el texto que le hemos indicado en la propiedad TextoEnviando. Este bot�n estar� deshabilitado y el panel con la propiedad display a none. Ya solo nos queda escribir la funci�n JavaScript que se llama cuando pulsamos nuestro bot�n:
private string Funci�nEnviarBot�n() { string txt = "<script language='javascript'>"; txt += @"function Enviar_" + ID + @ "(id) { if (typeof(Page_ClientValidate) == 'function') { if (Page_ClientValidate() == true ) { document.getElementById('div1_' + id).style.display = 'none'; document.getElementById('div2_' + id).style.display = 'inline'; return true; } else { return false; } } else { document.getElementById('div1_' + id).style.display = 'none'; document.getElementById('div2_' + id).style.display = 'inline'; return true; } }</script>;" return txt; }Con esta funci�n JavaScript, lo que hacemos es que cuando pulsamos nuestro bot�n, ponemos la propiedad display de este panel a none y la propiedad display del panel secundario a inline. De esta manera parece que nuestro bot�n se ha desabilitado y cambiado de texto. No podemos poner directamente el bot�n a disabled porque entonces no se ejecutar�a el c�digo asociado a ese bot�n del lado del servidor. Tambi�n vemos como el c�digo comprueba que se hayan cumplido los validadores si la p�gina los tiene.
Una vez que hemos llegado hasta aqu�, compilamos nuestra soluci�n. Ahora, para incluir el bot�n en nuestra aplicaci�n, nos vamos a una p�gina .aspx, hacemos clic en el Cuadro de Herramientas -> bot�n derecho -> Agregar o Quitar elementos -> Examinar -> Buscamos el directorio bin\debug de nuestra soluci�n, y escogemos la dll. Aceptamos y ya tenemos nuestro bot�n con esta nueva funcionalidad en nuestra aplicaci�n.
Conclusi�n
Como vemos, con muy poquito c�digo podemos tener un bot�n que nos quitar� muchos quebraderos de cabeza a la hora de desarrollar nuestras aplicaciones con ASP .NET.
Si te ha gustado, te ha dado alguna buena idea o te ha servido este art�culo, puedes votarlo en la parte superior de la p�gina. Por supuesto, si consideras que el art�culo no merece la pena, tambi�n lo puedes puntuar como tal.
Fichero con la soluci�n de ejemplo: DiegoRodero_ControlBotonEnviar.zip - 38.4 KB