Olá Pessoal, como estão ? Hoje vou falar um pouco sobre Web User Controls e como utiliza-los em uma aplicação ASP.Net.
Um web user control é um recurso do ASP.Net que nos permite de forma fácil centralizar um bloco de código ou funcionalidade em nossas aplicações web, buscando deixar a aplicação com uma manutenção fácil, flexível de forma a evitar a replicação de código. Para ilustrar um exemplo, vamos tomar como base um pequeno formulário onde irá conter alguns campos, propriedades e eventos definidos em nosso controle.
Crie um website no Visual Studio (2005 ou 2008) e no solution explorer adicione um novo item do tipo Web User Control e chame-o de "FormBase.ascx", conforme a imagem 1.
Imagem 1: Adicionando webusercontrol na aplicação
Em seguida, digite o código da listagem 1 no arquivo .ascx de nosso web user control para fazer um formulário simples de cadastro:
<table width="400">
<tr>
<td>Nome: </td>
<td><asp:TextBox ID="txtNome" runat="server"
MaxLength="60" Columns="30"></asp:TextBox></td>
</tr>
<tr>
<td>CPF: </td>
<td><asp:TextBox ID="txtCPF" runat="server"
MaxLength="14" Columns="14"></asp:TextBox></td>
</tr>
<tr>
<td>Email: </td>
<td><asp:TextBox ID="txtEmail" runat="server"
MaxLength="60" Columns="30"></asp:TextBox></td>
</tr>
<tr>
<td>Senha: </td>
<td><asp:TextBox ID="txtSenha" runat="server"
MaxLength="20" Columns="20" TextMode="Password"></asp:TextBox></td>
</tr>
<tr id="trNews" runat="server">
<td colspan="2"><asp:CheckBox ID="chkNews" runat="server"
Text="Desejo receber newsletters!" Checked="true" /></td>
</tr>
<tr id="trSalvar" runat="server">
<td colspan="2" align="right"><asp:Button ID="btnEnviar" runat="server"
Text="Salvar" onclick="btnEnviar_Click" /></td>
</tr>
</table>
Listagem 1: Código fonte do arquivo .ascx de nosso web user control de exemplo
Repare que colocamos alguns campos no formulário de exemplo e nas duas últimas linhas desta tabela definimos um Id, pois vamos precisar destes para definirmos algumas propriedades que serão utilizadas no exemplo. De um duplo clique no botão Salvar que está presente na última linha do controle para criar um evento para este. Veja agora na listagem 2, o code behine (arquivo .cs) deste exemplo com os comentários explicando o por que de cada item no controle.
/// <summary>
/// Propriedade que defini se a linha de newsletters irá aparecer ou não!
/// </summary>
public bool ShowNewsLetter
{
get { return trNews.Visible; }
set { trNews.Visible = value; }
}
/// <summary>
/// propriedade que define o valor do campo nome!
/// </summary>
public string Nome
{
get { return txtNome.Text; }
set { txtNome.Text = value; }
}
/// <summary>
/// Propriedade que defini o valor do CPF
/// </summary>
public string CPF
{
get { return txtCPF.Text; }
set { txtCPF.Text = value; }
}
/// <summary>
/// Propriedade que defini o valor do campo email!
/// </summary>
public string Email
{
get { return txtEmail.Text; }
set { txtEmail.Text = value; }
}
/// <summary>
/// Propriedade que defini o valor do campo senha!
/// </summary>
public string Senha
{
get { return txtSenha.Text; }
}
/// <summary>
/// Propriedade que defini o valor do campo newsletters!
/// </summary>
public bool ReceberNews
{
get { return chkNews.Checked; }
set { chkNews.Checked = value; }
}
/// <summary>
/// Exibição da linha que mostra o botão de salvar
/// </summary>
public bool ShowSalvar
{
get { return trSalvar.Visible; }
set { trSalvar.Visible = value; }
}
/// <summary>
/// Método que limpa o formulário
/// </summary>
public void LimparFormulario()
{
txtNome.Text = string.Empty;
txtCPF.Text = string.Empty;
txtEmail.Text = string.Empty;
chkNews.Checked = true;
}
protected void btnEnviar_Click(object sender, EventArgs e)
{
//caso o evento seja diferente de nulo, ele foi implementado,
if (Salvar != null)
//executando o evento..
Salvar(sender, e);
}
//declara um evento para ser implementado no controle...
public event EventHandler Salvar;
Listagem 2: Code behine comentado de nosso web user control de exemplo.
Tendo este controle definido, já podemos utilizá-lo em nossa aplicação. Abra um webform presente no solution explorer e em modo Design, arraste o web user control FormBase.ascx para o webform, e veja que o visual studio já nos fornece uma visão sobre este controle. Se você clicar sobre o controle e olhar na janela de propriedades verá que temos todas as propriedades que definimos em nosso controle. Veja a figura 2:
Imagem 2: Janela de propridades de nosso web user control.
<!--[if !vml]--><!--[endif]-->
Agora em nosso controle presente no webform, defina a propriedade ShowNewsLetter para "True" para exibirmos o campo de newsletters, e defina ShowSalvar, para não exibir a linha que contém o botão salvar. De um duplo clique na página e veja que é possível acessar o método "LimparFormulario()" que também está definido no controle. Veja a figura 3.
Imagem 3: Acessando método do web user control.
Outro recurso interessante são os eventos aplicados em nosso controle; para exemplificar um evento customizado em nosso controle, veja a imagem 4. Ela ilustra o código em nosso webform, implementando o evento que definimos como "Salvar" em nosso controle. Da mesma forma que o evento "Click" de um button é executado, o nosso evento Salvar, será executado quando acontecer o click de nosso botão Salvar for executado, pois aplicamos desta forma. Você poderia implementar outros eventos, como por exemplo o evento Checked de um Checkbox (com AutoPostBack=True), ou um SelectedIndexChanged de um IListControl (DropDownList, ListBox, CheckBoxList, RabioListButton, etc...), entre outras formas de se aplicar eventos.
Imagem 4: Code behine de nosso web form utilizando o web user control de exemplo
E por fim, a listagem 3, mostra como ficaria nosso webform utilizando nosso controle.
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="FormBase.ascx" tagname="FormBase" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<uc1:FormBase ID="FormBase1" runat="server"
ShowNewsLetter="True"
ShowSalvar="False"
OnSalvar="FormBase1_OnSalvar" />
</form>
</body>
</html>
Listagem 3: Webform utilizando web user control.
Conclusão:
Vimos como é fácil desenvolver e utilizar web user controls com propriedades, métodos e eventos em nossas aplicações, e através destas constrains (métodos, propriedades, eventos) podemos desenvolver controles com funcionalidades bem flexíveis, impedindo a replicação de código desnecessário e mantendo uma manutenção fácil e objetiva.
Bem pessoal, demonstrei de forma rápida e fácil de como desenvolver e utilizar web user controls.
Espero que um dia ajude alguém. Um abraço e até a próxima.
Referências:
http://msdn.microsoft.com/en-us/library/fb3w5b53(VS.71).aspx
http://msdn.microsoft.com/en-us/library/26db8ysc(VS.71).aspx
Download do exemplo: WebUserControl-Exemplo.zip (6,68 kb)
Subscribe