Dot Net: Como fazer um controle TextBox

O .Net Framework oferece um recurso chamado controle ou componente. Que são todos os itens que você ve na aba Toolbox (TextBox, Button, LinkButton, GridView, …) do Visual Studio.

O que é mais interessante nisso e que facilita muito é que você pode criar componentes personalizados, por exemplo, inputs personalizados com máscaras, ModalPopUp, Abas… .

A vantagem de usar um controle, é que é só clicar e arrastar para onde precisar e configurar os parametros, não precisa ficar chamando arquivos ou métodos do javascript, digitando ou copiando linhas e linhas de html, …

O exemplo abaixo é de um controle TextBox com máscara.

Eu fiz esse controle em C# e VB.Net. Se você apenas for usar o controle sem modificar, não tem diferença da linguagem usada.

Para criar esse TextBox é necessário criar um projeto separado. Siga os passos abaixo:

1 – Crie um projeto do tipo ASP.NET Web Application.

2 – Crie uma classe que será o controle TextBox personalizado. Eu usei o nome “ControleTextBox”.

O código dessa classe em C#

A mesma classe em VB.NET

'Isso serve para adicionar o arquivo .js no controle. Para usar isso, deve mudar o valor da propriedade "Build Action" para "Embedded Resource" do arquivo.

Public Class ControleTextBox
    Inherits TextBox

    Private _Tipo As EnumTipo = EnumTipo.Nomal

    'O Enum cria uma lista de opções
    Public Enum EnumTipo
        Nomal
        SoNumero
        CPF
    End Enum

    Public Property Tipo() As EnumTipo
        Get
            Return _Tipo
        End Get
        Set(ByVal value As EnumTipo)
            _Tipo = value
        End Set
    End Property

    Public Overrides Property Text() As String
        Get
            Return MyBase.Text
        End Get
        Set(ByVal value As String)
            'Ao passar um valor pro TextBox, será automaticamente formatado.
            Select Case Tipo
                Case EnumTipo.CPF
                    MyBase.Text = Regex.Replace(String.Format("{0,-11}", value), "^(d{3})(d{3})(d{3})(d{2})$", "$1.$2.$3-$4")
                Case Else
                    MyBase.Text = value
            End Select
        End Set
    End Property

    Protected Overrides Sub OnPreRender(ByVal e As System.EventArgs)
        MyBase.OnPreRender(e)

        'Chama o arquivo .js para a pagina.
        Page.ClientScript.RegisterClientScriptResource(GetType(ControleTextBox), "VB.Net_Controle_TextBox.ControleTextBox.js")

        Select Case _Tipo
            Case EnumTipo.SoNumero
                Me.Attributes.Add("onkeydown", "Formata_SoNumero(this, event);")
                Me.Attributes.Add("onkeyup", "Formata_SoNumero(this, event);")

            Case EnumTipo.CPF
                Me.Attributes.Add("onkeydown", "Formata_CPF(this, event);")
                Me.Attributes.Add("onkeyup", "Formata_CPF(this, event);")
                Me.MaxLength = 14
                Me.Width = 90

        End Select
    End Sub

End Class

3 – Crie um arquivo Javascript, com o nome ControleTextBox.js.

function Formata_SoNumero(th) {
    th.value = th.value.replace(/[^d]/gi, "");
}

function Formata_CPF(th, e) {
    th.value = th.value.replace(/[^d{1}]$/gi, "");
    if ((window.event ? e.keyCode : e.which) != 8) {
        if (th.value.length == 3) th.value = th.value + '.';
        if (th.value.length == 7) th.value = th.value + '.';
        if (th.value.length == 11) th.value = th.value + '-';
    }
}

Obs.: Nas propriedades desse arquivo, mude o valor do “Build Action” para “Embedded Resource”

4 – De um “Build” no projeto do controle para criar a DLL e onde for usar o controle é só adicionar essa dll como referência.

5 – Se o controle não aparecer no Toolbox é só clicar com botão direita em uma parte livre da toolbox, ir em Choose Items…. Na janela “Choose Toolbox Items“, clique em “Browse” e selecione a dll e depois clique em OK.

Depois de ter feito isso, é só arrastar o controle para a tela, ir no menu Properties do controle e mudar o Tipo.

Projeto de exemplo no Google Code.