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="C#" AutoEventWireup="false" CodeFile="Data.ascx.cs" Inherits="Controls_Data" %>
									
								

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.

Web.Config:

									<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="C#" AutoEventWireup="false" CodeFile="Data.ascx.cs" 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="C#" AutoEventWireup="false" CodeFile="Data.ascx.cs" 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="C#" AutoEventWireup="false" CodeFile="Default.aspx.cs" 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="C#" AutoEventWireup="false" CodeFile="Data.ascx.cs" 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.

									public partial class Controls_Data : System.Web.UI.UserControl {
										   protected void Page_Load(object sender, EventArgs e) {

										   }
										   public string Text {
												  get {
														 return txtData.Text;
												  }
												  set {
														 txtData.Text = value;
												  }
										   }
									}
								

Da mesma forma que criamos a propriedade Text, é possível criar outras como ReadOnly, Enabled e outras. Espero que seja útil. Abraços...