Nem sempre os componentes atuais do ASP.NET atendem por completo as nossas necessidades. Com isso muitas vezes precisamos implementar funcionalidades e que também na maioria das vezes necessitam ser reutilizadas. O funcionalidade de um UserControl, é essa, criar controles personalizados que possam ser reutilizados.
É esse o objetivo desse artigo de hoje, criar um UserControl que possua funcionalidade que possam ser reutilizadas como se fosse um componente.
Para dar inicio, abra o Visual Studio, crie um novo WebSite. No Meu caso estou usando o Visual Studio 2010, mais pode ser qualquer versão.
Como exemplo, vou criar um UserControl que tem como funcionalidade autenticar e receber o login e a senha do usuário. Nele incluirei 2 Labels, 2 TextBox, 1 LinkButton e 2 Button. E ficará da seguinte formar.
<asp:Panel ID="pnlLogin" runat="server" GroupingText="Login">
<asp:Label ID="lblUsuario" runat="server" Text="Usuario" /><br />
<asp:TextBox ID="txtUsuario" runat="server" /><br />
<asp:Label ID="lblSenha" runat="server" Text="Senha" /><br />
<asp:TextBox ID="txtSenha" runat="server" TextMode="Password" /><br />
<br />
<asp:LinkButton ID="lnkEsqueceuSenha" runat="server" Text="Esqueceu a senha?" />
<br />
<br />
<asp:Button ID="btnAutenticar" Text="Autenticar" runat="server" />
<asp:Button ID="btnCadastrar" Text="Cadastrar" runat="server" />
</asp:Panel>
Com esse código já temos a tela de login, porem não o mais importante que são os eventos. Para que ele seja funcional, iremos atribuir eventos aos Botões e possibilitar que um WebForm recupere a ação do usuário por meio do evento acionado. Para iniciar criamos o evento Click dos botões e do LinkButon.
<asp:Panel ID="pnlLogin" runat="server" GroupingText="Login">
<asp:Label ID="lblUsuario" runat="server" Text="Usuario" /><br />
<asp:TextBox ID="txtUsuario" runat="server" /><br />
<asp:Label ID="lblSenha" runat="server" Text="Senha" /><br />
<asp:TextBox ID="txtSenha" runat="server" TextMode="Password" /><br />
<br />
<asp:LinkButton ID="lnkEsqueceuSenha" runat="server" Text="Lembrar senha" OnClick="lnkLembrarSenha_Click" />
<br />
<br />
<asp:Button ID="btnAutenticar" Text="Autenticar" runat="server" OnClick="btnAutenticar_Click" />
<asp:Button ID="btnCadastrar" Text="Cadastrar" runat="server" OnClick="btnCadastrar_Click" />
</asp:Panel>
protected void btnAutenticar_Click(object sender, EventArgs e)
{
}
protected void lnkLembrarSenha_Click(object sender, EventArgs e)
{
}
protected void btnCadastrar_Click(object sender, EventArgs e)
{
}
Se você tentar recuperar o evento do botão Autenticar por exemplo vai ver que não será possível, para isso vamos criar agora os eventos necessários.
// Delegate
public delegate void AutenticarEventHandler(object sender, System.EventArgs e);
public delegate void LembrarSenhaEventHandler(object sender, System.EventArgs e);
public delegate void CadastrarEventHandler(object sender, System.EventArgs e);
// Event
public event AutenticarEventHandler Autenticar;
public event LembrarSenhaEventHandler LembrarSenha;
public event CadastrarEventHandler Cadastrar;
Criamos um Event e um Delegate para cada Button e LinkButton e é por meio do evento Click deles que faremos a chamada desses Eventos personalizados.
protected void btnAutenticar_Click(object sender, EventArgs e)
{
if (Autenticar != null) Autenticar(sender, e);
}
protected void lnkLembrarSenha_Click(object sender, EventArgs e)
{
if (LembrarSenha != null) LembrarSenha(sender, e);
}
protected void btnCadastrar_Click(object sender, EventArgs e)
{
if (Cadastrar != null) Cadastrar(sender, e);
}
Agora que temos nosso UserControl, abra o Default.aspx em modo designer e arraste o UserControl para ele e adicione um Label.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="LoginControl.ascx" tagname="LoginControl" 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">
<div>
<uc1:LoginControl ID="LoginControl1" runat="server" />
<br />
<asp:Label ID="lblResultado" runat="server" ForeColor="Red"></asp:Label>
</div>
</form>
</body>
</html>
Para finalizar, vamos criar os eventos necessarios no CodeBehind do Default.aspx para que nosso exemplo funcione.
protected void Page_Load(object sender, EventArgs e)
{
LoginControl1.Autenticar += new LoginControl.AutenticarEventHandler(LoginControl1_Autenticar);
LoginControl1.LembrarSenha += new LoginControl.LembrarSenhaEventHandler(LoginControl1_LembrarSenha);
LoginControl1.Cadastrar += new LoginControl.CadastrarEventHandler(LoginControl1_Cadastrar);
}
// Evento Autenticar
protected void LoginControl1_Autenticar(object sender, EventArgs e)
{
lblResultado.Text = "Evento [AUTENTICAR]";
}
// Evento Lembrar Senha
protected void LoginControl1_LembrarSenha(object sender, EventArgs e)
{
lblResultado.Text = "Evento [LEMBRAR SENHA]";
}
// Evento Cadastrar
protected void LoginControl1_Cadastrar(object sender, EventArgs e)
{
lblResultado.Text = "Evento [CADASTRAR]";
}
Assim, temos o resultado abaixo.
Muito pode ser feito com o uso de Eventos e UserControl e alem do mais, podemos reutilizar e compartilhar os códigos criados.
Deixarei para download o projeto criado: [download id=”6″ format=”2″].
Abraço e até a próxima.