Jump to content
Fórum Script Brasil
  • 0

Criando um componente de Data


quintelab

Question

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.

NewItem.gif

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: ResultadoMascara.gif 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. DataInvalida.gif É 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...eDataCSharp.asp

Espero que seja útil. Abraços...

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.1k
    • Total Posts
      651.9k
×
×
  • Create New...