ASP.NET – User Controls
Neste artigo vou dar os passos para criar um User Control básico no ASP.NET. Para o desenvolvimento, estou utilizando a linguagem C# e o aplicativo Web Matrix, que pode ser baixado gratuitamente do site do MSDN.
O que é um User Control?
Imagine que você tenha que construir um site que, em todas as páginas, possua, por exemplo, uma caixinha que contenha o nome e a descrição de um usuário logado no site. Você faz essa caixinha, copia o seu código em cada página do site, e então mostra o resultado ao seu cliente e... ele não gostou do jeito que essa caixinha está! Achou muito larga, não gostou da cor, não gostou da fonte, e te pede para mudar. Aí você volta para o seu computador pensando em todo o trabalho que você vai ter prá atualizar cada caixinha de cada página do seu site.
Usando um User Control, todo esse trabalho é cortado! Pense num user control como um pedaço de código que possui “vida própria”. Você cria o controle, adiciona-o na sua página como se adiciona uma caixa de texto ou um combo box, e toda alteração que você fizer no controle refletirá em todas as páginas.
User Controls no ASP.NET trazem os benefícios do encapsulamento de código, uso otimizado de memória, código compilado e a capacidade de fazer mudanças on the fly.
Criando a “cara” do controle...
O User Control que iremos criar é bem parecido com o que exemplifiquei acima. Ele terá duas labels para exibir um nome e um título, e algumas funcionalidades a mais. Primeiro, vamos criar o arquivo que irá conter o User Control. No caso, é um arquivo com extensão ascx.
Segue o código usado para gerar a interface do controle:
<p>
<asp:Label id="Label1" width="88px" backcolor="Silver" runat="server" font-bold="True"></asp:Label>
<br />
<asp:Label id="Label2" width="147px" backcolor="#E0E0E0" runat="server" font-bold="True" font-size="Large" height="35px" bordercolor="Black" borderstyle="Double"></asp:Label>
</p>
Dando inteligência ao User Control
Vamos agora criar o código que irá tratar os dados do nosso controle. Como iremos manter um nome e um título, criaremos duas variáveis para conter esses dados. Note que elas foram criadas como private, o que significa que elas não poderão ser acessadas diretamente pela página que irá conter o controle.
private string fNome;
private string fTitulo;
Para poder passar os dados a essas variáveis, vamos criar propriedades. Propriedades são membros da classe que expõe variáveis membro e objetos dessa classe. Parece uma redundância criar propriedade read-write para essas variáveis nesse nosso exemplo, já que elas são privadas, mas as propriedades nos permitem criar tratamentos aos dados que chegarão e sairão dessas variáveis. No nosso caso, como é um exemplo simples, não iremos tratar de nenhuma forma esses dados.
public string Nome{
get{
return fNome;
}
set{
fNome = value;
}
}
public string Titulo{
get{
return fTitulo;
}
set{
fTitulo = value;
}
}
Uma breve explicação de propriedades: O bloco get contém o código que irá dar o retorno da propriedade à quem a chamou. Já o bloco set, contém as instruções que atribuirão dados às variáveis. O objeto value representa o dado que está sendo atribuído à propriedade.
Vamos agora criar métodos, que são funções inerentes ao controle, mais especificamente à classe do User Control. O primeiro método servirá para exibir nas labels os dados do controle.
public void MostraDados(){
Label1.Text = fTitulo;
Label2.Text = fNome;
}
O método é público, pois queremos que ele seja visto pela página que irá contrer o controle. Ele simplesmente adiciona o conteúdo das variáveis aos respectivos labels.
O segundo método irá fazer com que a cor da label de baixo mude cada vez que o método for chamado. Veja que geramos aleatoriamente as cores, e depois as atribuímos às propriedades das labels.
public void MudaCor(){
Random rnd = new Random(DateTime.Now.Millisecond);
int Vermelho, Azul, Verde;
Vermelho = rnd.Next(0,255);
Azul = rnd.Next(0,255);
Verde = rnd.Next(0,255);
Label2.BackColor = Color.FromArgb(Vermelho, Verde, Azul);
Label2.ForeColor = Color.FromArgb(255 - Vermelho, 255 - Verde, 255 - Azul);
}
Para gerar essas cores aleatoriamente, utilizamos a classe Random do .NET, que nos gera números aleatórios. A instrução
Random rnd = new Random(DateTime.Now.Millisecond);
cria um objeto do tipo Random, e o inicializa com o valor de DateTime.Now.Millisecond como a semente aleatória de onde serão gerados os números.
As instruções
Vermelho = rnd.Next(0,255);
Azul = rnd.Next(0,255);
Verde = rnd.Next(0,255);
geram os valores a serem utilizados para criar a cor, a partir do padrão RGB (Red, Blue, Green). Utilizamos o método Next do recém criado objeto rnd para obtermos os valores entre 0 e 255 que necessitamos prar criar a cor.
Label2.BackColor = Color.FromArgb(Vermelho, Verde, Azul);
Label2.ForeColor = Color.FromArgb(255 - Vermelho, 255 - Verde, 255 - Azul);
Note que nas instruçõs acima, criamos as cores a partir do método FromArgb, da classe Color. A cor utilizada na letra da label é a cor inversa da cor de fundo. Para que possamos utilizar a classe Color, precisamos importar seu namespace (Namespace no .NET é um conjunto de tipos que possuem funcionalidades relacionadas). Para fazer isso, adicionamos o seguinte comando ao início do arquivo:
<%@ Import Namespace="System.Drawing" %>
Assim terminamos a criação do nosso User Control. Segue a listagem do código completo do controle:
LabelControl.ascx
<%@ Control Language="C#" %>
<%@ Import Namespace="System.Drawing" %>
<script runat="server">
private string fNome;
private string fTitulo;
public string Nome{
get{
return fNome;
}
set{
fNome = value;
}
}
public string Titulo{
get{
return fTitulo;
}
set{
fTitulo = value;
}
}
public void MudaCor(){
Random rnd = new Random(DateTime.Now.Millisecond);
int Vermelho, Azul, Verde;
Vermelho = rnd.Next(0,255);
Azul = rnd.Next(0,255);
Verde = rnd.Next(0,255);
Label2.BackColor = Color.FromArgb(Vermelho, Verde, Azul);
Label2.ForeColor = Color.FromArgb(255 - Vermelho, 255 - Verde, 255 - Azul);
}
public void MostraDados(){
Label1.Text = fTitulo;
Label2.Text = fNome;
}
</script>
<p>
<asp:Label id="Label1" font-bold="True" runat="server" backcolor="Silver" width="88px"></asp:Label>
<br />
<asp:Label id="Label2" font-bold="True" runat="server" backcolor="#E0E0E0" width="147px" borderstyle="Double" bordercolor="Black" height="35px" font-size="Large"></asp:Label>
</p>
O controle em execução
Agora que terminamos o controle, vamos criar uma página que fara o uso dele. Para isso, vamos criar uma página aspx.
Para que a página possa acessar o controle, devemos registrá-lo. Então inserimos a seguinte tag:
<%@ Register TagPrefix="Control1" TagName="LabelControl" Src="LabelControl.ascx" %>
Veja que ela informa o prefixo da tag (TagPrefix) a ser utilizado o controle, o nome do controle (TagName) e a sua localização (Src, no caso, o arquivo do controle está no mesmo diretório que a página aspx). Esses são informações básicas sem as quais o controle não funcionará.
Tendo o controle registrado, vamos inserir a tag do nosso User Control na página a justar suas propriedades.
<Control1:LabelControl id="MeuControle1" Nome="Galore" Titulo="ASP.NET" runat="server"></Control1:LabelControl>
Veja que ela segue as informações que utilizamos na hora de registrar o controle para a página (Control1:LabelControl). Veja que também temos o id do controle, que usaremos para identificá-lo dentro do código. Está vendo o Nome e Titulo? São as propriedades que criamos para o controle, e agora estamos passando valores para elas. Outro atributo essencial é o runat=”server”.
Vamos adicionar também um botão para que possamos chamar os métodos do controle.
<asp:Button id="Button1" onclick="Button1_Click" runat="server" Width="150px" Text="Mudar a Cor!!!"></asp:Button>
Agora vamos criar o código para responder aos eventos da página. Utilizaremos os eventos Page_Load e Button1_Click.
protected void Page_Load(object sender, EventArgs e){
if(!IsPostBack)
MeuControle1.MostraDados();
}
private void Button1_Click(object sender, EventArgs e) {
MeuControle1.MudaCor();
}
No primeiro evento pedimos para executar o método MostraDados, que faz com que os valores das variáveis que criamos no User Control sejam passadas para as labels do controle.
No segundo evento, que será executado toda vez que o botão for clicado, fazemos com que a cor do controle mude, utilizando nosso método MudaCor.
Abaixo está a listagem completa do código da página.
ChamaControl.aspx
<%@ Page Language="C#" %>
<%@ Register TagPrefix="Control1" TagName="LabelControl" Src="LabelControl.ascx" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e){
if(!IsPostBack)
MeuControle1.MostraDados();
}
private void Button1_Click(object sender, EventArgs e) {
MeuControle1.MudaCor();
}
</script>
<html>
<head>
</head>
<body>
<p>
<Control1:LabelControl id="MeuControle1" Nome="Galore" Titulo="ASP.NET" runat="server"></Control1:LabelControl>
</p>
<form runat="server">
<asp:Button id="Button1" onclick="Button1_Click" runat="server" Width="150px" Text="Mudar a Cor!!!"></asp:Button>
</form>
</body>
</html>
Considerações finais
Nesse nosso simples exemplo, vimos que é fácil criar um controle customizado no ASP.NET, e que a sua utilização nos traz muitas vantagens, como o reaproveitamento e encapsulamento de código.
Esta matéria foi postada originalmente no ASP4Developers por Fabio Gouw, que na época era "Desenvolvedor, MCP.NET". Hoje, vai saber...
