Este artigo mostra como criar um simples componente de data utilizando o Web User Control e alguns recursos do Ajax.
Primeiro vamos criar uma pasta com o nome de Controls, em seguida o nosso Web User Control, pelo seguinte atalho do Visual Studio: Add New Item/Web User Control. Iremos colocar o nome de Data para o nosso componente.
Agora iremos adicionar um TextBox com o id txtData no controle:
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Data.ascx.vb" Inherits="Controls_Data" %>
<asp:TextBox ID="txtData" runat="server"></asp:TextBox>
O primeiro recurso do Ajax que será utilizado é o MaskedEditExtender, que será o responsável pela máscara do TextBox. Ao arrastar o MaskedEditExtender para o nosso formulário automaticamente ele colocará uma linha declarando qual a TagPrefix do ajax naquele formulário, informando seu Assembly e seu Namespace, a linha que ele criou é a seguinte:
Eu particularmente prefiro tirar esta linha do formulário e colocá-la no arquivo web.config pois desta forma não terá a necessidade de repetir esta linha de comando em todos os formulário que utilizarem o Ajax. Removi esta linha do meu formulário e adicionei no web.configo, alterando também a tagPrefix para Ajax. A linha foi adicionada dentro da tag controls onde temos também as duas TagPrefix asp.
Agora vamos configurar as propriedades do MaskedEditExtender para que seja feita a máscara. A primeira propriedade a ser configurada é a Mask que iremos deixar desta forma: 99/99/9999. A outra propriedade a ser alterada é MaskType que deixaremos como Date.
Até o momento temos no nosso componente a máscara de data. Agora iremos adicioná-lo na Tag controls do web.config logo a baixo da linha do Ajax para poder testar nosso controle.
A tagName e a tagPrefix são nome que podem receber qualquer valor e que servirão para colocar nosso controle no código HTML. No fim a tag controls do web.config fica da seguinte forma:
Agora vamos criar a Default.aspx para visualizar o que temos até agora. Em nosso formulário Default.aspx é necessário adicionar o ScriptManager para que funcione o Ajax, e em seguida adicionar o nosso controle. Enfim o código HTML fica:
O Resultado até então,é uma caixa de texto com a máscara de data:
Para finalizar iremos colocar a validação de data em nosso controle. Para fazer a vaildação de data iremos utilizar um Validator do tipo CompareValidator.
Para testar nosso controle, basta compilar novamente nosso projeto e tentar adicionar uma data inválida, como por exemplo 31/02/2008.
É necessário lembrar que como criamo um crontrole do zero é preciso criar todos as suas propriedades. Vamos criar a propriedade Text para que seja possível atribuir e resgatar o texto do nosso controle.
Partial Class Data
Inherits System.Web.UI.UserControl
Public Property Text() As String
Get
Return txtData.Text
End Get
Set(ByVal value As String)
txtData.Text = value
End Set
End Property
End Class
Da mesma forma que criamos a propriedade Text, é possível criar outras como ReadOnly, Enabled e outras.
Pergunta
quintelab
Este artigo mostra como criar um simples componente de data utilizando o Web User Control e alguns recursos do Ajax.
Primeiro vamos criar uma pasta com o nome de Controls, em seguida o nosso Web User Control, pelo seguinte atalho do Visual Studio: Add New Item/Web User Control. Iremos colocar o nome de Data para o nosso componente.
Agora iremos adicionar um TextBox com o id txtData no controle:
O primeiro recurso do Ajax que será utilizado é o MaskedEditExtender, que será o responsável pela máscara do TextBox. Ao arrastar o MaskedEditExtender para o nosso formulário automaticamente ele colocará uma linha declarando qual a TagPrefix do ajax naquele formulário, informando seu Assembly e seu Namespace, a linha que ele criou é a seguinte: Eu particularmente prefiro tirar esta linha do formulário e colocá-la no arquivo web.config pois desta forma não terá a necessidade de repetir esta linha de comando em todos os formulário que utilizarem o Ajax. Removi esta linha do meu formulário e adicionei no web.configo, alterando também a tagPrefix para Ajax. A linha foi adicionada dentro da tag controls onde temos também as duas TagPrefix asp. Por enquanto o HTML do nosso controle esta da seguinte forma: Agora vamos configurar as propriedades do MaskedEditExtender para que seja feita a máscara. A primeira propriedade a ser configurada é a Mask que iremos deixar desta forma: 99/99/9999. A outra propriedade a ser alterada é MaskType que deixaremos como Date. Até o momento temos no nosso componente a máscara de data. Agora iremos adicioná-lo na Tag controls do web.config logo a baixo da linha do Ajax para poder testar nosso controle. A tagName e a tagPrefix são nome que podem receber qualquer valor e que servirão para colocar nosso controle no código HTML. No fim a tag controls do web.config fica da seguinte forma: Agora vamos criar a Default.aspx para visualizar o que temos até agora. Em nosso formulário Default.aspx é necessário adicionar o ScriptManager para que funcione o Ajax, e em seguida adicionar o nosso controle. Enfim o código HTML fica: O Resultado até então,é uma caixa de texto com a máscara de data:Da mesma forma que criamos a propriedade Text, é possível criar outras como ReadOnly, Enabled e outras.
Versão em C#: http://www.quintelab.com.br/Artigos/AspNet...eDataCSharp.asp
Espero que seja útil. Abraços...
Link para o comentário
Compartilhar em outros sites
0 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.