Formatação em Colunas do GridView

Frequentemente quando utilizamos um controle do tipo GridView, e inserimos valores do tipo Data, Dinheiro, Inteiros ou Decimais, precisamos formatar esse valor de acordo com a finalidade desse Campo. Nesse artigo apresentarei a propriedade DataFormatString da BoundColumn de um DataGrid.

Existem dois tipos de formatação:

                 ·         Standard Formats;

                 ·         Custom Formats.


Como o objetivo do artigo é mostrar as formatações mais utilizadas em aplicativos para serem executados nos padrões brasileiros, então deixarei claro o seguinte: O padrão para valores numéricos será adotado o Stardand Format. Já a formatação para datas, será utilizado o Custom Format.

A propriedade DataFormatString fornece uma formatação customizada para o valor inserido na BoundColumn. Esta propriedade consiste em duas partes separadas por dois pontos estando dentro de um par de chaves da seguinte forma: {:}. Isso é válido apenas quando estiver inserindo na BoundColumn valores numéricos ou do tipo data.

A sintaxe é a seguinte: {0:[Formato][Qtde. Casas Decimais]}. O caracter que vem após os dois pontos, é o formato em que o valor será exibido. Você também poderá optar por definir a quantidade de casas decimais da seguinte forma: {0:C2}. A seguir uma lista com os valores possíveis:

Standard Format	Descrição
C	Exibe o valor no formato de moeda.
D	Exibe o valor em formato decimal.
E	Exibe o valor no formato cientìfico (exponencial).
F	Exibe o valor no formato fixo.
G	Exibe o valor no formato geral.
N	Exibe o valor no formato numérico.
P	Exibe o valor no formato de porcentagem.
X	Exibe o valor no formato hexadecimal.

NOTA: Os caracteres acima que especificam o formato a ser exibido não são case-sensitive, exceto para o X, pois se ele for minúsculo, os valores serão apresentados em minúsculo, do contrário, serão exibidos em maiúsculo.

Para configurar os valores no GridView, clique com o botão direito do mouse em cima do mesmo, e selecione Property Builder. Em seguida, vá até a aba Columns e ao incluir uma nova BoundColumn, a propriedade DataFormatString será habilitada para que você possa definir a formatação customizada. A imagem abaixo ilustra o processo:

A figura abaixo exibe os valores no GridView de acordo com a formatação pré-definida na propriedade DataFormatString.

 Aqui chamo a atenção para a coluna onde é exibido o valor no formato moeda e o separador de casas decimais. Como não foi definido nenhuma cultura no arquivo Web.Config, por padrão ele adota as configurações regionais definidas no servidor. Se acrescentar a cultura pt-BR nas configurações de nossa aplicação, verão que os valores passarão a serem exibidos no formato brasileiro. Abaixo a ilustrução deixará claro:

<globalization requestEncoding="utf-8" responseEncoding="utf-8" culture="pt-br" />

Tal alteração é realizada no arquivo web.config. A figura abaixo mostra como ficou após a alteração.

 Além das configurações para valores numéricos, ainda podemos utilizar a propriedade DataFormatString para formatarmos datas que são inseridas no DataGrid. Abaixo uma tabela as as possibilidades de formatação para datas:

Custom Format	Descrição
MM/dd/yyyy	Formato Mês/Dia/Ano
dd/MM/yyyy	Formato Dia/Mês/Ano
hh:mm	Formato Hora:Minuto
hh:mm:ss	Formato Hora:Minuto:Segundo
dd/MM/yyyy hh:mm:ss	Formato Dia/Mês/Ano Hora:Minuto:Segundo

NOTA: Devemos nos atentarmos para o MM e para o mm, pois maiúsculo significa Mês, já o minúsculo significa Minutos.

Como dito anteriormente, a configuração da formatação para data, funciona da mesma forma que a formatação para valores numéricos, ou seja, você define na propriedade DataFormatString da BoundColumn do GridView, como por exemplo: {0:dd/MM/yyyy hh:mm:ss}.

NOTA: Você poderia também ao invés de barras "/" utilizar o hífen "-" como separador para as Datas, ficando a String de formatação da seguinte forma: {0:dd-MM-yyyy hh:mm:ss}.

Poderá também fazer a formatação diretamente no HTML, utilizando a propriedade DataItem em conjunto com a método Format. Exemplo:

<asp:TemplateColumn>

<%# String.Format("{0:c}", Convert.ToInt32(Container.DataItem("NomeDaColuna"))) %>

</asp:TemplateColumn>

Teclas de Atalhos - Visual Studio

Não precisamos nem falar muito sobre este assunto, pois as teclas de atalhos facilitam e agilizam o nosso trabalho.

　


Vejamos algumas dessas teclas utilizadas no Visual Studio:

F12	Go To Definition (ir para a definição do objeto selecionado)
CTRL+ "-" (hífen)	Voltar para a posição anterior do cursor (inverso do F12)
CTRL+M+O	Outlining > Collapse To Definitions
CTRL+K+C (CTRL+E+C)	Comentar linhas selecionadas
CTRL+K+U (CTRL+E+U)	Descomentar linhas selecionadas
CTRL+K+D	Indentar código selecionado (caso não tenha nenhuma linha selecionada, indenta o arquivo todo)
CTRL+SHIFT+S	Salvar solução completa
CTRL+S	Salvar o arquivo atual
SHIFT+F6	Build Project
F6 (CTRL+SHIFT+B)	Build Solution
CTRL+Pause	Cancel Build (apenas durante os processos de Build Project ou Build Solution)
F9	Adicionar BreakPoint
CTRL+SHIFT+F9	Remover todos os BreakPoints da solução
F10	Step Over (Debug)
F11	Step Into (Debug)
SHIFT+F12 (CTRL+K+R)	Find All References (ou Find Symbol Results)

　

O site da Microsoft nos fornece mais detalhes:

http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=13189

Validação de campos utilizando expressões regulares

   O exemplo que se segue, mostra como podemos validar campos utilizando expressões regulares:

<script>

   function mascara(o,f){

       v_obj=o

       v_fun=f

       setTimeout("execmascara()",1)

   }

   function execmascara(){

       v_obj.value=v_fun(v_obj.value)

   }

   function leech(v){

      v=v.replace(/o/gi,"0")

       v=v.replace(/i/gi,"1")

       v=v.replace(/z/gi,"2")

       v=v.replace(/e/gi,"3")

       v=v.replace(/a/gi,"4")

       v=v.replace(/s/gi,"5")

       v=v.replace(/t/gi,"7")

       return v

   }

   function soNumeros(v){

  

       return v.replace(/\D/g,"")

   }

   function telefone(v){

            //Remove tudo o que não é dígito

       v=v.replace(/\D/g,"")                

         //Adiciona parênteses em volta dos dois primeiros dígitos

       v=v.replace(/^(\d\d)(\d)/g,"($1) $2")

         //Adiciona hífen entre o quarto e o quinto dígitos

       v=v.replace(/(\d{4})(\d)/,"$1-$2")   

     
      return v

   }

   function cpf(v){

         //Remove tudo o que não é dígito

       v=v.replace(/\D/g,"")                   
        
         //Coloca um ponto entre o terceiro e o quarto dígitos

       v=v.replace(/(\d{3})(\d)/,"$1.$2")      

       v=v.replace(/(\d{3})(\d)/,"$1.$2")      

         //de novo (para o segundo bloco de números)
         //Coloca um hífen entre o terceiro e o quarto dígitos

       v=v.replace(/(\d{3})(\d{1,2})$/,"$1-$2")

     return v

   }

   function cep(v){

         //Remove tudo o que não é dígito

       v=v.replace(/D/g,"")               

      
         v=v.replace(/^(\d{5})(\d)/,"$1-$2")

      return v

   }

 

   function cnpj(v){

         //Remove tudo o que não é dígito

       v=v.replace(/\D/g,"")                          

      
         //Coloca ponto entre o segundo e o terceiro dígitos
         v=v.replace(/^(\d{2})(\d)/,"$1.$2")            

        //Coloca ponto entre o quinto e o sexto dígitos

       v=v.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3")

         //Coloca uma barra entre o oitavo e o nono dígitos

       v=v.replace(/\.(\d{3})(\d)/,".$1/$2")          

         //Coloca um hífen depois do bloco de quatro dígitos

       v=v.replace(/(\d{4})(\d)/,"$1-$2")             

     return v

   }

 

   function romanos(v){

         //Maiúsculas

       v=v.toUpperCase()            

         //Remove tudo o que não for I, V, X, L, C, D ou M

       v=v.replace(/[^IVXLCDM]/g,"")

   

       while(v.replace(/^M{0,4}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$/,"")!="")

      v=v.replace(/.$/,"")

       return v

   }

 

   function site(v){

       v=v.replace(/^http:\/\/?/,"")

       dominio=v

       caminho=""

       if(v.indexOf("/")>-1)

           dominio=v.split("/")[0]

           caminho=v.replace(/[^\/]*/,"")

       dominio=dominio.replace(/[^\w\.\+-:@]/g,"")

       caminho=caminho.replace(/[^\w\d\+-@:\?&=%\(\)\.]/g,"")

       caminho=caminho.replace(/([\?&])=/,"$1")

       if(caminho!="")dominio=dominio.replace(/\.+$/,"")

          v="http://"+dominio+caminho

       return v

   }

</script>

 

<h1>Exemplos de expressões regulares</h1>

    <label for="inumeros">Apenas números:

    <input id="inumeros" onkeypress="mascara(this,soNumeros)" /></label>

    <label for="itelefone">Número Telefone:

  <input id="itelefone" onkeypress="mascara(this,telefone)" maxlength="14" /></label>

    <label for="icpf">CPF:

    <input id="icpf" onkeypress="mascara(this,cpf)" maxlength="14" /></label>

    <label for="icep">CEP:

    <input id="icep" onkeypress="mascara(this,cep)" maxlength="9" /></label>

    <label for="icnpj">CNPJ:

    <input id="icnpj" onkeypress="mascara(this,cnpj)" maxlength="18" /></label>

    <label for="iromanos">Números Romanos:

    <input id="iromanos" onkeypress="mascara(this,romanos)" maxlength="18" /></label>

  

Desativar tecla F5 e CRTL+R utilizando JavaScript

Para não permitir atualização da página no navegador Internet Explorer, podemos adicionar o seguinte código JavaScript entre da tag <head></head>.

<head runat="server">

      <title></title>

      <script language=javascript>    

         document.onkeydown = function () { 

           switch (event.keyCode) {

             case 116 :  

                event.returnValue = false;

                event.keyCode = 0;           

                return false;             

              case 82 : 

                if (event.ctrlKey) {  

                   event.returnValue = false;

                  event.keyCode = 0;             

                  return false;

           }

         }

     } 

     </script>

</head>

Este exemplo desativa o refresh em páginas web quando o usuário utilizar F5 ou CTRL + F5.

Ele funciona adicionando uma função onkeydown à página.

O event.keyCode, obtem qual botão foi precionado 116 para a tecla F5 e 82 para R.

O if para R verifica se o botão de controle foi pressionado ao mesmo tempo como R, marcando assim event.crtKey.

Entretanto, não tem como controlar o botão de atualização para a barra de endereço do navegador.