ASP.NET - Usando Web User Controls

Alguma vez você já sentiu a necessidade de usar um controle em sua aplicação ASP.NET, e, após procurar na ToolBox percebeu que o que você imaginava não existia. ?

Que pena ! (você deve ter pensado...). Este bendito controle iria  resolver o meu problema...

Você sabia que, dependendo do caso , você mesmo poderia ter criado o tal controle ? E que fazer isso seria bem mais fácil que do que você pensa...?

Pois neste artigo eu vou apresentar os users controls, ou controles do usuário, dando uma visão geral e mostrando que trabalhar com eles é muito simples.

Vou começar com uma assertiva:  Você mesmo pode criar os seus controles !!!

Existem duas possibilidades para alcançar este objetivo:

1. User Controls - São componentes(invólucros) nos quais você inclui uma linguagem de marcação (tags) e controles web servers, podendo ser tratados como uma unidade e também possuírem propriedades e métodos;

2. Custom Controls - São classes que você escreve que derivam das classes Control ou WebControl;

Os controles de usuário (user controls) são baseados na classe System.Web.UI.UserControl possuindo a seguinte hierarquia de classe:

• Object

  • Control

    • TemplateControl

    • UserControl

Você pode criar um web user controls reutilizando controles que já existem e isso torna a tarefa muito mais fácil do que criar Custom Controls.

Um web user control ASP.NET é parecido com uma página Web completa (*.aspx) contendo a interface do usuário  e código, e,  você cria um web user control da mesma forma que você cria uma página web em ASP.NET.

Um web user control difere de uma página ASP.NET nos seguintes itens:

• A extensão do arquivo de um usre control é .ascx;

• Ao invés de usar a diretiva @page, um user control  contém uma diretiva @Control que define a configuração e outras propriedades;

• Um user control não pode ser executado diretamente você precisa incluí-lo em uma página ASP.NET como um controle comum;

• Um user control não possui os elementos html, body ou form no seu interior. Você pode usar os demais elementos HTML livremente.

Quais as vantagens em se utilizar este recurso ?

• Você pode usar melhor o cache do ASP.NET colocando somente o bloco da página referente ao web user control;

• O processamento do web user control é independente e cada evento disparado será processado pelo controle.

Criando um User Control

Vamos mostrar como é simples criar um web user control usando o Visual Web Developer Express Edition. O exemplo é bem simples mas você pode criar user controls bem mais complexos usando a mesma técnica.

Abra o VWD e crie um novo web site a partir do menu FIle->New web site , com o nome usandoUserControls;

A seguir no menu WebSite selecione Add New Item e na janela Templates clique em Web User Control informando o nome spinTextBox.ascx (note a extensão usada);

Ao clicar no botão  será criado o arquivo .ascx e no modo Source você poderá notar a seguinte diretiva:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="sipnTextBox.ascx.vb" Inherits="sipnTextBox" %>

O nosso controle deverá simular um controle do tipo Spin para isso iremos usar uma caixa de texto - txtSpin e dois botões : btnUp e btnDown. Inclua na propriedade Text do botão btnUp o sinal + e do botão btnDown o sinal -.

Alterne para o modo Design e a partir da ToolBox inclua um controle TextBox e dois Button alterando a propriedade ID de cada um conforme os nomes citados acima.

A seguir no arquivo code-behind spinTextBox.ascx.vb inclua o seguinte código:

Partial Class sipnTextBox

    Inherits System.Web.UI.UserControl

    Private m_valorMin As Integer = 0

    Private m_valorMax As Integer = 100

    Private m_numeroAtual As Integer = 0

    Public Property valorMin() As Integer

        Get

            Return m_valorMin

        End Get

        Set(ByVal value As Integer)

            If value >= Me.valorMax Then

                Throw New Exception("ValorMin deve ser menor que ValorMax.")

            Else

                m_valorMin = value

            End If

        End Set

    End Property

    Public Property valorMax() As Integer

        Get

            Return m_valorMax

        End Get

        Set(ByVal value As Integer)

            If value <= Me.valorMin Then

                Throw New Exception("ValorMax deve ser maior que valorMin.")

            Else

                m_valorMax = value

            End If

        End Set

    End Property

    Public ReadOnly Property numeroAtual() As Integer

        Get

            Return m_numeroAtual

        End Get

    End Property

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)

        If IsPostBack Then

            m_numeroAtual = CInt(ViewState("numeroAtual"))

        Else

            m_numeroAtual = Me.valorMin

        End If

        exibeNumero()

    End Sub

    Protected Sub exibeNumero()

        txtSpin.Text = Me.numeroAtual.ToString()

        ViewState("numeroAtual") = Me.numeroAtual.ToString()

    End Sub

    Protected Sub buttonUp_Click(ByVal sender As Object, ByVal e As System.EventArgs)

        If m_numeroAtual = Me.valorMax Then

            m_numeroAtual = Me.valorMin

        Else

            m_numeroAtual += 1

        End If

        exibeNumero()

    End Sub

    Protected Sub buttonDown_Click(ByVal sender As Object, ByVal e As System.EventArgs)

        If m_numeroAtual = Me.valorMin Then

            m_numeroAtual = Me.valorMax

        Else

            m_numeroAtual -= 1

        End If

        exibeNumero()

    End Sub

End Class

O código acima define define os seguintes elementos:

• valorMin - Propriedade que define o valor mínimo a ser exibido no controle;

• valorMax - Propriedade que  define o valor máximo a ser exibido no controle;

• numeroAtual -  Propriedade que  define o número atual exibido no controle;

• Efetua também o tratamento do evento para os dois botões atualizando o valor da variável m_numeroAtual

• Define a rotina exibeNumero() que mostra o numero atual no TextBox

Usando o user control SpinTextBox criado

Para usar o controle basta registrá-lo na página , ao fazer isto você especifica o arquivo .ascx que contém o user control, a tag prefix e a tag name que você irá usar para declarar o web user control na página. Onde:

• O atributo TagPrefix - associa o prefixo com o user control. O prefixo será incluído na tag de abertura do elemento user control;

• O atributo TagName - associa o nome com o user control. O nome será incluído na tag de abertura do elemento user control.

• O atributo Src - define o caminho virtual para o user control que estamos usando;

No nosso projeto , selecione a página Default.aspx e no modo Source registre o user control spinTextBox.ascx conforme a figura abaixo:

Podemos também definir na página Default.aspx as propriedades valorMin e ValorMax a serem exibidos no web user control:

Quando o web user control for iniciado como parte da páginas ASP.NET Default.aspx , os valores definidos serão interpretados e definidos no user control de forma automática.

Assim como as páginas ASP.NET o user controle é re-iniciado para cada postback, desta forma os valores das propriedades deverão ser persistidos entre os postbacks. Estamos fazendo isso usando o ViewState.

Nota: Veja o meu artigo - PostBack e ciclo de vida de uma página

Durante o evento Load você precisa verificar se há um postback e dar um reload nos valores das propriedades a partir do ViewState.

Executando a página iremos obter:

Até breve com mais novidades ASP.NET...

referencias: How-To : Create a user Control - http://msdn2.microsoft.com/en-us/library/26db8ysc.aspx

José Carlos Macoratti