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
{
	/// 

	/// 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;
			}
		}

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:

		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