quintelab 91 Denunciar post Postado Abril 23, 2008 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: <%@ Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1"%> 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. <controls> <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add tagPrefix="asp"namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add tagPrefix="Ajax" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit"/> </controls> Por enquanto o HTML do nosso controle esta da seguinte forma: <%@ Control Language="VB" AutoEventWireup="false" CodeFile="Data.ascx.vb" Inherits="Controls_Data" %> <asp:TextBox ID="txtData" runat="server"></asp:TextBox> <Ajax:MaskedEditExtender ID="MaskedEditExtender1"runat="server"> </Ajax:MaskedEditExtender> 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. <%@ Control Language="VB" AutoEventWireup="false" CodeFile="Data.ascx.vb" Inherits="Controls_Data" %> <asp:TextBox ID="txtData" runat="server"></asp:TextBox> <Ajax:MaskedEditExtender ID="MaskedEditExtender1" runat="server" Mask="99/99/9999" MaskType="Date" TargetControlID="txtData"> </Ajax:MaskedEditExtender> 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. <controls> <add src="~/Controls/Data.ascx" tagName="Data" tagPrefix="BrCtl"/> </controls> 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: <controls> <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add tagPrefix="asp"namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add tagPrefix="Ajax" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit"/> <add src="~/Controls/Data.ascx" tagName="Data" tagPrefix="BrCtl"/> </controls> 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: <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http-~~-//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http-~~-//www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Criando um Controle - Por quintelab</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <BrCtl:Data ID="txtData" runat="server" /> </div> </form> </body> </html> 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. <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="txtData" Display="Dynamic" ErrorMessage="Data Inválida." Font-Names="Verdana" Font-Size="X-Small" Operator="GreaterThan" Type="Date" ValueToCompare="01/01/1900"> </asp:CompareValidator> Desta forma nosso controle fica completo com máscara e validação para data: <%@ Control Language="VB" AutoEventWireup="false" CodeFile="Data.ascx.vb" Inherits="Controls_Data" %> <asp:TextBox ID="txtData" runat="server"></asp:TextBox> <Ajax:MaskedEditExtender ID="MaskedEditExtender1" runat="server" Mask="99/99/9999" MaskType="Date" TargetControlID="txtData"> </Ajax:MaskedEditExtender> <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToValidate="txtData" Display="Dynamic" ErrorMessage="Data Inválida." Font-Names="Verdana" Font-Size="X-Small" Operator="GreaterThan" Type="Date" ValueToCompare="01/01/1900"> </asp: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. Versão em C#: http://www.quintelab.com.br/Artigos/AspNet/ComponenteDataCSharp.asp Espero que seja útil. Abraços... Compartilhar este post Link para o post Compartilhar em outros sites
