Controles personalizados utilizando herencia en ASP.NET

En el siguiente tutorial aprenderán la forma de crear sus propios controles aprovechando ademas las características de los controles ya existentes. Esto quiere decir que podrán realizar por ejemplo una caja de texto que realice validaciones básicas o avanzadas, como permitir solo números o cambiar dejar las letras siempre en mayúsculas.

Empecemos…

Agregaremos a nuestro proyecto un nuevo control de tipo Web User Control

Tendremos una ventana como la siguiente

Borramos la palabra Control

Vamos al código del control presionando F7 o doble clic directamente en el archivo (CtrlTextbox.ascx.cs):

Reemplazamos

public partial class CtrlTextbox : System.Web.UI.UserControl

. . .

Por

public partial class CtrlTextbox : TextBox

. . .

Luego definimos los tipos de validaciones que realizaremos a través de una enumeración

namespace ControlesDinamicos
{
public enum EnumValidacion {
  Normal,
  SoloNumeros,
  Mayuscula
}

public partial class CtrlTextbox : System.Web.UI.UserControl
{

Luego  definimos una variable encapsulada de tipo EnumValidacion

public partial class CtrlTextbox : TextBox
{
  private EnumValidacion validacion;

  public void Page_Load(object sender, EventArgs e)
  {
  }

  public EnumValidacion Validacion
  {
     get { return validacion; }
     set { validacion = value; }
  }
}

Por ultimo definiremos el tipo de validación dependiendo del valor que nos manden por parámetro.

protected override void OnLoad(EventArgs e)
{
  switch (validacion)
  {
    case EnumValidacion.Normal:
       break;
    case EnumValidacion.SoloNumeros:
       this.Attributes.Add("onkeypress", "javascript:return ValidNum(event);");
       break;
    case EnumValidacion.Mayuscula:
       this.Style.Add("text-transform", "uppercase");
       break;
  }

  base.OnLoad(e);
}

Nuestro control deberia quedar de la siguiente manera:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
sing System.Web.UI.WebControls;

namespace ControlesDinamicos
{
public enum EnumValidacion {
  Normal,
  SoloNumeros,
  Mayuscula
}

public partial class CtrlTextbox : TextBox
{
   private EnumValidacion validacion;
   
   public void Page_Load(object sender, EventArgs e)
   {
   }

   protected override void OnLoad(EventArgs e)
   {
   switch (validacion)
   {
      case EnumValidacion.Normal:
        break;
      case EnumValidacion.SoloNumeros:
        this.Attributes.Add("onkeypress", "javascript:return ValidNum(event);");
        break;
      case EnumValidacion.Mayuscula:
        this.Style.Add("text-transform", "uppercase");
        break;
   }
   base.OnLoad(e);
}

public EnumValidacion Validacion
{
  get { return validacion; }
  set { validacion = value; }
}
}
}

Ahora es importante compilar nuestro proyecto para que se refresquen los cambios!!!

Si vamos a nuestra página asp en el panel de herramientas

Veremos un nuevo control

Para que funcione correctamente debemos agregar la función de javascript y arrastrarlo hacia nuestro proyecto:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ControlesDinamicos._Default" %>
<%@ Register Assembly="ControlesDinamicos" Namespace="ControlesDinamicos" TagPrefix="cc1" %>




 


    


    

        
    

Si quieren cambiar el tipo de comportamiento van a las propiedades y verán un listado con las opciones disponibles

Esperamos sea de su utilidad

Saludos