Um cenário comum no ambiente de desenvolvimento de aplicações web é a necessidade de criar controles para atender a uma especificação atípica, que não é atendida pelos controles nativos do ASP.NET ou que é atendida porém demanda muito esforço e trabalho repetitivo.

 

Geralmente esse recurso é utilizado para criar controles que terão por default uma série de validação e uma característica única.

Este artigo abordará a criação e personalização de um controle de forma prática não se estendendo muito a detalhes técnicos/teóricos, evitando conteúdo extenso.

 

Nosso exemplo será constituido de um simples controle do tipo TextBox que apresentará a string “Olá DevBrasil !” e não permitira que o usuário digite mais que 22 caracteres.

Crie um projeto do tipo ASP.NET Server Control, dê o nome ao projeto de DevBrasilControls e clique em OK.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  

 

A solução do projeto foi criada, foram criados automaticamente dentro da solução apenas dois arquivos AssemblyInfo e ServerControl1 sendo o segundo responsável por criar o controle e o primeiro a setar diretrizes como bibliotecas, versão, etc.

 

                                                                                       

 

 

 

 

 

 

 

 

 

Abra o arquivo AssemblyInfo .cs e na primeira linha desse arquivo  digite using System.Web.UI;

Troque o nome do ServeControl1.cs para DevBrasilTextBox.cs, será exibida uma mensagem clique em sim.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Abra o arquivo DevBrasilTextBox e observe a principal característica é a existência de uma classe herdando um classe WebControl com uma propriedade que manterá o estado ( dados ) do controle através do HTTP POST e a sobrecarga de um método RenderContents responsável por mostrar as propriedade definidas para o controle.

  

public class DevBrasilTextBox : WebControl

{}

public string Text{get; set;}

 

protected override void RenderContents(HtmlTextWriter output){}

 

Vamos fazer uma pequena alteração, nossa classe DevBrasilTextBox herdara de um TexBox Control, não iremos precisar da propriedade Text nativa da classe DevBrasilTextBox e do método RenderContents, utilizaremos a sobrecarga de propriedade para MaxLenght e Text.

 

Realizada as devidas alterações teremos o seguinte código, sua classe deverá possuir o código similar ao que segue abaixo.

 

using System;

using System.Collections.Generic;

using System.ComponentModel;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

 

namespace DevBrasilControls

{

    [DefaultProperty("Text")]

    [ToolboxData("<{0}:DevBrasilTextBox runat=server></{0}:DevBrasilTextBox>")]

    public class DevBrasilTextBox : TextBox

    {

        public override int  MaxLength

        {

            get { return 22; }

        }

        public override string Text

        {

            get { return "Olá DevBrasil !"; }

        }

    }

}

 

Compile o projeto para gerar a dll que será o seu controle, para compilar o projeto basta pressionar a tecla F5.

 

Primeiro passo concluído! Nesse momento já temos nosso controle agora precisamos utilizá-lo dentro de um projeto web, para tal vamos criar um novo projeto ASP.NET Web Application chamado DevBrasil.

Digite o nome do projeto e pressione OK.

 

 

Será gerada uma solução Web Application semelhante à imagem que segue abaixo.

 

 

Próximo passo é criar uma Tab dentro do ToolBox e adiciona a nossa dll do projeto DevBrasilControls localizada no diretório que segue C:\DevBrasil\DevBrasilControls\DevBrasilControls\bin\Debug, caso tenha especificado algum diretório diferente basta abrir o projeto e localizar a pasta bin dentro dessa pasta existe a pasta Debug que possui a dll.

 

Adicione uma nova Tab nomeie a mesma para DevBrasilControls, realizando o procedimento similar das imagens que seguem abaixo.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Temos nossa tab criada agora precisamos colocar o controle dentro dela o próximo passo é referenciar a dll para o .NET Framework Components, para tal clique com o botão direito e vá no item "Choose Items".

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Será exibida uma nova janela, clique no botão Browser nessa tela e procure a dll DevBrasilControls e clique em abrir,observe que será adicionado um novo .NET Framework Component chamado DevBrasilTextBox, basta apenas clicar em no botão Ok e pronto seu controle esta dentro do seu projeto.

 

 

Caso a dll tenha sido adicionada corretamento, já é possível visualizar o seu controle DevBrasilTextBox, que ficará igual o da imagem que segue abaixo.

 

 

Agora apenas arraste esse controle para dentro de um página .aspx e veja o que foi gerado, compare e verifique se tem alguma coincidência com essa linha de código que escremos lá em cima [ToolboxData("<{0}:DevBrasilTextBox runat=server></{0}:DevBrasilTextBox>")] 

 

Visualize o controle no Browser e faça seus testes!

 

Nesse artigo, foi demonstrado como criar seu próprio controle, se o leitor observar com atenção esse processo é fascinante note que se descermos um nível de abstração entenderemos como os controles nativos do ASP.NET são criados!  

 

Para saber mais: 

Aprofunde seus conhecimentos sobre este tema na comunidade ASP.NET

MSDN : Developing Custom ASP.NET Server Controls