Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

quintelab

[Resolvido] Criando um componente de Data

Por , em .NET

Recommended Posts

quintelab    91

quintelab
Postado

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.

Imagem Postada

 

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:

Imagem Postada

 

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.

Imagem Postada

 

É 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
Ir para a lista de tópicos .NET
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito