Web Forms -Web User Control

Web User Control é um controle web que colocamos em nossa estrutura de página para organizar de forma que não haja repetiçoes.

Criamos componentes Web User Control para serem reutilizados em várias partes do sistema, deixando o sistema com maior facilidade em fazer manutenções.

Um exemplo de criar Web User Control é quando precisamos fazer uma tela de login e utililizá-la em várias partes do sistema.Então essa tela é replicada em outra página com "Ctrl C + Ctrl V" gerando código duplicado e de difícil manutenção.

Para resolver este problema existe no Web Form o componente Web User Control com extensão ASCX. Fazemos então um Web User Control, por exemplo, para um componente de Login, Confirm, Dados, Css, Js, etc., arrastando-o diretamente para a página e automaticamente é inserida no formulário.

Podemos também definir métodos públicos e privados para o User Control, assim, sempre que o inserirmos em nosso formulário, no evento Load da página, podemos passar parâmetros para o ASCX que irá configurar os dados.

Vamos criar um componente Web User Control:

• Clicar com o botão direito do mouse no nome do projeto;
• Clicar no menu Add -> Web User Control;
• Digite o nome Login para este controle e clique em ok.

Dessa forma será criado no projeto um arquivo chamado Login.ascx.

No componente Login.ascx criaremos os campos login, senha e um botão para enviar os dados.

Vamos arrastar o componente Login.ascx para o componente de Cadastro.aspx.

Note que, ao arrastar o componente para o Cadastro.aspx, foi adicionada a tag uc1:Login, dentro da tag form.

Também foi adicionada a linha Register no início do arquivo.

      
        
        < % @ Page Language="C#" AutoEventWireup="true" CodeFile="Cadastro.aspx.cs" Inherits="Cadastro" 
        
        < % @ Register src="Login.ascx" tagname="Login" tagrefix="uc1" 
        
        < html xmlns="http://www/w3.org/1999/xhtml">
        < head runat="server> 
          < title > < /title>
          < style> 
            img{
              width:100px;
            }
          < /style> 

        < /head>
        < body>
            < form id="form1" runat="server">
              < div>
                < uc1: Login ID="ctrLogin" runat="server" />
              < /div>
              < div>
                < asp:Panel ID="pnlCamposCadastro" runat="server">
                  < asp:Label ID="lblNome" runat="server" Text="Nome"> < /asp:Label>
                  < asp:TextBox ID="txtNome" runat="server">< /asp:TextBox>
                  < br />
                  < asp:Label ID="Label2" runat="server" Text="Telefone">< /asp:Label>
                  < asp:TextBox ID="txtTelefone" runat="server">< /asp:TextBox>
                  < br />
                  < asp:Label ID="Label1" runat="server" Text="Foto">< /asp:Label>
                  < asp:FileUpload ID="fileFoto" runat="server">< /asp:FileUpload>
                  < br />
                  < br />
                  < asp:Button ID="btnSalvar" runat="server" Text= "Salvar">
                < /asp:Panel>
              < /div>
            < /form>
        < /body>
        < html>
       
    

Passando Parâmetros para o componente ascx.

Podemos também passar parâmetros para o componente ascx, ou seja, neste exemplo, ao carregar a página de de Cadastro, vamos preencher um label criado no componente ctrLogin.

Então, no componente ctrLogin.ascx.cs inserimos um label chamado lblMensagem e criamos uma propriedade publica chamada Mensagem. Quando esse componente estiver sendo carregado no evento Load, a variavel Mensagem será passada diretamente para o lblMensagem:

      
        public partial class Login : System.Web.UI.UserControl 
        {
          public string Mensagem;

          protected void Page_Load(object sender, EventArgs e)
          {
            lblMensagem.Text = Mensagem; 
          }
        }  
       
    

No evento Load do arquivo Cadastro.aspx.cs, vamos chamar o componente ctrLogin, passando um parâmetro desta página para o componente ctrLogin.ascx, através da propriedade Mensagem:

      
        public partial class Cadastro : System.Web.UI.Page
        {
  
          protected void Page_Load(object sender, EventArgs e)
          {
            ctrLogin.Mensagem = "Este é o form principal";
          }
  
        }  
       
    

Exemplo de validação - Login e Senha no componente ascx.

      
        public partial class Login : System.Web.UI.UserControl 
        {
          public string Mensagem;

          protected void Page_Load(object sender, EventArgs e)
          {
            lblMensagem.Text = Mensagem; 
          }

          protected void btnLogin_Click(object sender, EventArgs e)
          {
            if(txtLogin.Text == "danilo" && txtSenha.Text == "123456789")
            {
              Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"alerta",
                     "< script> alert('"+ txtLogin.Text +",entrou com sucesso');< /script>");
            }
            else 
            {
              Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"alerta", 
                    "< script> alert('"+ txtLogin.Text +",não existe na base de dados');< /script>");
            }
          }
        }