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#
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
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.
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.




