Dot Net: Como fazer um controle TextBox

Posted by Ycaro Afonso | Posted on 30-05-2010

Category : Post

Tags: , , ,

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, é só seguir esses passos:

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#

View Code CSHARP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

using System.Web.UI.WebControls;
using System.Web.UI;
 
// 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.
// E o nome é: Nome do projeto . nome do arquivo . extensão do arquivo
[assembly: WebResource("CSharp_Controle_TextBox.ControleTextBox.js", "application/x-javascript")]
 
namespace CSharp_Controle_TextBox
{
    public class ControleTextBox : TextBox
    {
 
        //O Enum cria uma lista de opções
        public enum EnumTipo { 
            Nomal, 
            SoNumero, 
            CPF 
        }
 
        public EnumTipo Tipo
        {
            get;
            set;
        }
 
        protected override void OnPreRender(System.EventArgs e)
        {
            base.OnPreRender(e);
 
            // Chama o arquivo .js para a pagina.
            Page.ClientScript.RegisterClientScriptResource(GetType(), "CSharp_Controle_TextBox.ControleTextBox.js");
 
            switch(Tipo) 
            {
                case EnumTipo.SoNumero:
                    base.Attributes.Add("onkeydown", "Formata_SoNumero(this, event);");
                    base.Attributes.Add("onkeyup", "Formata_SoNumero(this, event);");
                    break;
                case EnumTipo.CPF:
                    base.Attributes.Add("onkeydown", "Formata_CPF(this, event);");
                    base.Attributes.Add("onkeyup", "Formata_CPF(this, event);");
                    base.MaxLength = 14;
                    base.Width = 90;
                    break;
            }
        }
    }
}

 
A mesma classe em VB.NET

View Code VB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

'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.
<Assembly: WebResource("VB.Net_Controle_TextBox.ControleTextBox.js", "application/x-javascript")> 
 
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 – Adicione um arquivo Javascript, com o nome ControleTextBox.js.

View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12

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 + '-';
    }
}

E 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 a 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.



Post a comment