Pesquisa

domingo, 1 de maio de 2011

Personalizando o HTML do UpdatePanel

Segue abaixo uma classe que tem como objetivo personalizar o HTML gerado a partir de um UpdatePanel.

namespace LeftSlipper {
using System;
using System.ComponentModel;
using System.Web.UI;
using Microsoft.Web.UI;

public class CustomUpdatePanel : UpdatePanel {
private string _cssClass;
private HtmlTextWriterTag _tag = HtmlTextWriterTag.Div;

[DefaultValue("")]
[Description("Applies a CSS style to the panel.")]
public string CssClass {
get {
return _cssClass ?? String.Empty;
}
set {
_cssClass = value;
}
}

// Hide the base class's RenderMode property since we don't use it
[Browsable(false)]
[EditorBrowsable(EditorBrowsableState.Never)]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
public new UpdatePanelRenderMode RenderMode {
get {
return base.RenderMode;
}
set {
base.RenderMode = value;
}
}

[DefaultValue(HtmlTextWriterTag.Div)]
[Description("The tag to render for the panel.")]
public HtmlTextWriterTag Tag {
get {
return _tag;
}
set {
_tag = value;
}
}

protected override void RenderChildren(HtmlTextWriter writer) {
if (IsInPartialRendering) {
// If the UpdatePanel is rendering in "partial" mode that means
// it's the top-level UpdatePanel in this part of the page, so
// it doesn't render its outer tag. We just delegate to the base
// class to do all the work.
base.RenderChildren(writer);
}
else {
// If we're rendering in normal HTML mode we do all the new custom
// rendering. We then go render our children, which is what the
// normal control's behavior is.
writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID);
if (CssClass.Length > 0) {
writer.AddAttribute(HtmlTextWriterAttribute.Class, CssClass);
}
writer.RenderBeginTag(Tag);
foreach (Control child in Controls) {
child.RenderControl(writer);
}
writer.RenderEndTag();
}
}
}
}



Abaixo, a sua aplicação.



<%@ Register Namespace="LeftSlipper" TagPrefix="ls" %>
...
<ls:CustomUpdatePanel runat="server" ID="CustomUpdatePanel1"
CssClass="greenPanel" Tag="B">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</ls:CustomUpdatePanel>

ls:CustomUpdatePanel runat="server" ID="CustomUpdatePanel1"
CssClass="greenPanel" Tag="B">
<ContentTemplate>
<asp:Label ID="Label1" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</ls:CustomUpdatePanel>
And here's what got rendered with these settings (actual times may vary!):

<b id="CustomUpdatePanel1" class="greenPanel">
<span id="Label1">12/6/2006 9:18:07 PM</span>
<input type="submit" name="Button1" value="Button" id="Button1" />
</b>



Este mesmo princípio pode ser utilizado para modificar qualquer controle.


Javascript - Validação Client-Side

Artigo muito interessante sobre validações.

ASP.NET Validation in Depth

Segue abaixo um dos trechos do artigo, que fala sobre as funções javascript que existem para manipular os controles de validação.

ValidatorValidate(val)
Tem como parâmetro client-validator. Esta função faz com que o seja feito a verificação e que atualize de sua exibição.

ValidatorEnable(val, enable)
Tem como parâmetro um client-validator e um valor booleano. Esta função ativa ou desativa um client-validator.

ValidatorHookupControl(control, val)
Tem como parâmetro um elemento HTML e um client-validator. Esta função modifica ou cria o vínculo entre um controle e client-validator. Logo, é possível modificar os “apontamentos” entre controle e client-validator.

Além destre trecho, existem vários outros pontos abordados sobre validações.

Fonte: MSDN

Criando Controles de Servidor Personalizados com Validação

Artigo muito interessante extraído do site devmedia, nele mostra como criar uma Class Library com customização de controles e validações.

Segue abaixo o código criado da Class Library:

using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text.RegularExpressions;

namespace CustomControls
{
/// <summary>
/// Tipos Predefinidos
/// </summary>
public enum TypeExpression : short
{
None, Digito, Decimal, Moeda, Email, Telefone
}

/// <summary>
/// Classe que apresenta controle TextBox com controle de validação
/// </summary>
public class CustomTextBox : Control, INamingContainer
{

private TypeExpression _valueType;

/// <summary>
/// Tipos predefinidos
/// </summary>
public TypeExpression ValueType
{
get { return _valueType; }
set { _valueType = value; }
}

/// <summary>
/// Controle de Validação
/// </summary>
RegularExpressionValidator _validator = new RegularExpressionValidator();

/// <summary>
/// Expressão de Validação
/// </summary>
public String ValidationExpression
{
get { return _validator.ValidationExpression; }
set { _validator.ValidationExpression = value; }
}

/// <summary>
/// Mensagem de Erro
/// </summary>
public String ErrorMessage
{
get { return _validator.ErrorMessage; }
set { _validator.ErrorMessage = value; }
}

/// <summary>
/// Manipula apresentação do validator
/// </summary>
public ValidatorDisplay Display
{
get { return _validator.Display; }
set { _validator.Display = value; }
}

/// <summary>
/// Controle TextBox
/// </summary>
TextBox _textBox = new TextBox();

/// <summary>
/// Propriedade Text do controle
/// </summary>
public String Text
{
get { return _textBox.Text; }
set { _textBox.Text = value; }
}

/// <summary>
/// Propriedade ID do controle
/// </summary>
public override String ID
{
get { return _textBox.ID; }
set { _textBox.ID = value; }
}

/// <summary>
/// Largura do Controle
/// </summary>
public Unit Width
{
get { return _textBox.Width; }
set { _textBox.Width = value; }
}

private Boolean _isNull;

/// <summary>
/// Preenchimento obrigatorio
/// </summary>
public Boolean IsNotNull
{
get { return _isNull; }
set { _isNull = value; }
}

/// <summary>
/// Cria controles filhos
/// </summary>
protected override void CreateChildControls()
{
// manipula TextBox
CreateTextBox();

// manipula RegularExpressionValidator
CreateRegularExpressionValidator();

// manipula RequiredFieldValidator
CreateRequiredFieldValidator();

// manipula SummaryValidator
CreateSummary();
}

/// <summary>
/// Monta TextBox e adiciona controle
/// </summary>
private void CreateTextBox()
{
// mude a aparência do controle, etc. aqui
// ex.: _textBox.CssClass = "meuCss";

// adiciona controle TextBox
Controls.Add(_textBox);
}

/// <summary>
/// Monta expressão com o tipo predefinido e adiciona (se expressão informada)
/// </summary>
private void CreateRegularExpressionValidator()
{
// fixa o controle que será validado
_validator.ControlToValidate = _textBox.ID;

// monta expressão
if (String.IsNullOrEmpty(this.ValidationExpression))
{
// verifica tipo predefinido
switch (this.ValueType)
{
case TypeExpression.Digito:
if (string.IsNullOrEmpty(this.ErrorMessage))
this.ErrorMessage = "Somente dígitos.";
this.ValidationExpression = @"^\d+$";
break;
case TypeExpression.Decimal:
if (string.IsNullOrEmpty(this.ErrorMessage))
this.ErrorMessage = "Formato decimal inválido.";
this.ValidationExpression = @"^[+-]?((\d+|\d{1,3}(\.\d{3})+)(\,\d*)?|\,\d+)$";
break;
case TypeExpression.Moeda:
if (string.IsNullOrEmpty(this.ErrorMessage))
this.ErrorMessage = "Formato moeda inválido.";
this.ValidationExpression = @"^\d{1,3}(\.\d{3})*\,\d{2}$";
break;
case TypeExpression.Email:
if (string.IsNullOrEmpty(this.ErrorMessage))
this.ErrorMessage = "Formato e-mail inválido.";
this.ValidationExpression = @"^([\w\-]+\.)*[\w\- ]+@([\w\- ]+\.)+([\w\-]{2,3})$";
break;
case TypeExpression.Telefone:
if (string.IsNullOrEmpty(this.ErrorMessage))
this.ErrorMessage = "Formato telefone inválido.";
this.ValidationExpression = @"^\(\d{3}\)-\d{4}-\d{4}$";
break;
}
}

// adiciona controle (se conter expressão)
if(!String.IsNullOrEmpty(this.ValidationExpression))
Controls.Add(_validator);
}

/// <summary>
/// Monta RequiredFieldValidator e adiciona (se campo obrigatorio)
/// </summary>
private void CreateRequiredFieldValidator()
{
// se campo obrigatorio
if (this.IsNotNull)
{
// cria RequiredFieldValidator e fixa propriedades
RequiredFieldValidator _required = new RequiredFieldValidator();
_required.ControlToValidate = this.ID;
// ** sugestão: crie uma propriedade para esta
// mensagem de erro
_required.ErrorMessage = String.Empty;
_required.Text = "* obrigatorio";
_required.Display = ValidatorDisplay.Dynamic;
_required.ForeColor = System.Drawing.Color.Red;

// adiciona controle
Controls.Add(_required);
}
}

/// <summary>
/// Monta ValidationSummary e adiciona (se possuir validação)
/// </summary>
private void CreateSummary()
{
// verifica as propriedades obrigatorias
if (!String.IsNullOrEmpty(this.ValidationExpression) || this.IsNotNull)
{
// contador de verificação dos controles CustomTextBox
Int16 count = 0;
// percorre todos os controles da página
foreach (Control _control in Page.Form.Controls)
{
// se controle for do tipo da classe
// personalizada que estamos desenvolvendo
if (_control.GetType() == typeof(CustomTextBox))
{
// se o objeto está sendo acessado pela
// primeira vez
if (count == 0)
// se o controle encontrado é o controle que
// provocou a chamada
if (_control.ID == this.ID)
{
// cria Summary e fixa propriedades
ValidationSummary _summary = new ValidationSummary();
// ** sugestão: preencha esta propriedade
// para mensagem comuns
//_summary.HeaderText = "Verifique os
// campos Obrigatórios.";
_summary.ShowMessageBox = true;
_summary.ShowSummary = false;
_summary.ID = "vsTextBox";
_summary.DisplayMode = ValidationSummaryDisplayMode.List;

// adiciona controles
Controls.Add(_summary);
}
// incrementa à quantidade de controles do
// tipo CustomTextBox encontrados
count++;
}
}
}
}
}
}



E aqui, a aplicação da Class Library e uma página:



< %@ Page Language="VB" AutoEventWireup="false" CodeFile="Validation.aspx.vb" Inherits="Default5" %>

< %@ Register Assembly="CustomControls" Namespace="CustomControls" TagPrefix="cc1" %>

< !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 runat="server" >
< title>Untitled Page< /title>
< /head>
< body>
< form id="form1" runat="server" >
< div>
< !-- campo obrigatorio -->
< cc1:CustomTextBox ID="CustomTextBox1" runat="server" IsNotNull="true" />< br />
< !-- campo obrigatorio e somente dígito -->
< cc1:CustomTextBox ID="CustomTextBox2" runat="server" ValueType="Digito" Display="None" IsNotNull="true" />< br />
< !-- campo não obrigatorio com validaç ão de e-mail e mensagem de erro externo -->
< cc1:CustomTextBox ID="CustomTextBox3" runat="server" ValueType="Email" Display="Dynamic" ErrorMessage="E-mail inválido" />< br />
< !-- campo não obrigatorio com validaç ão de telefone e mensagem de erro interna -->
< cc1:CustomTextBox ID="CustomTextBox4" runat="server" ValueType="Telefone" Display="Static" />< br />
< asp:Button ID="Button1" runat="server" Text="Button" />
< /div>
< /form>
< /body>
< /html>



Fonte: DevMedia