Arquivo da tag: Javascript

AngularJS – Formulário

pic_angularOlá pessoal. Agora relato o que aprendi sobre formulários HTML com AngularJS.

O AngularJS fornece implementações básica de validação para a maiorias de input HTML5 (text, number, url, email, date, radio, checkbox), além de algumas diretivas de validação: required, pattern, minlength, maxlength, min, max, email, number, etc…).

As implementações básicas de validação estão descritas aqui: Angular input directive.

Detalhes sobre as validações dos inputs podem ser obtidos diretamente na referência oficial:

O framework também oferece propriedades booleanas que ajudam a validar os formulário e seus campos, dando informações sobre o a entrada de dados.

  • $dirty: Indica se o usuário interagiu com o formulário/campo.
  • $pristine: Indica se o usuário ainda não interagiu com o formulário/campo.
  • $valid: Indica se o formulário/campo possui valor válido.
  • $invalid: Indica se o formulário/campo campo possui valor válido.

As propriedades são acessadas no formulário (geral para todos os campos) ou diretamente no elemento (input, select ou textarea). Segue a seguinte nomenclatura:

  • Para formulário: <form name>.<angular propriedade>
  • Para o elemento de entrada: <form name>.<input name>.<propriedade>

Perante a todas estas informações descritas acima, demonstro um pequeno exemplo de validação de formulário.

HTML:

<form name="formDados" novalidate>
    <!--novalidate: necessário para anular as validações nativas do navegador para HTML5-->

    <select ng-model="lancamento.tipo" name="tipo" required>
        <option value="0">selecione...</option>
        <option ng-repeat="t in tipos" value="t.id">{{t.descricao}}</option>
    </select>
    <!--Validando se o valor é vazio (requerido)-->
    <span ng-show="formDados.tipo.$error.required">O TIPO é requerido.</span>
    <br />

    <input type="date" ng-model="lancamento.data" placeholder="data" name="data" required />
    <!--Validando se o valor é vazio (requerido) e a quantidade máxima de caracteres-->
    <span ng-show="formDados.data.$error.required">A DATA é requerida.</span>
    <span ng-show="formDados.data.$error.date">A DATA é inválida.</span>
    <br />

    <input type="text" ng-model="lancamento.obs" placeholder="observação" name="obs" required ng-maxlength="20" />
    <!--Validando se o valor é vazio (requerido) e a quantidade máxima de caracteres-->
    <span ng-show="formDados.obs.$error.required">A OBSERVAÇÃO é requerida.</span>
    <span ng-show="formDados.obs.$error.maxlength">A OBSERVAÇÃO deve ter no máximo 20 caracteres.</span>
    <br />

    <input type="number" ng-model="lancamento.valor" placeholder="valor" name="valor" min="0" />
    <!--Validando o valor é numérico-->
    <span ng-show="formDados.valor.$invalid">Não é um número válido.</span>
    <br />

    <!--O botão ficará desabilitado (ng-disabled) de o usuário não interagir com os campos tipo, obs e valor-->
    <input type="button" value="salvar" id="salvar" ng-click="salvar()"
            ng-disabled="!formDados.tipo.$dirty || !formDados.obs.$dirty || !formDados.valor.$dirty" />

</form>

Javascript (controller):

app.controller('LancamentosController', ['$scope', function ($scope) {

    $scope.tipos = [];
    
    $scope.lancamento = {
        tipo: 0,
        data: "",
        obs: "",
        valor: "", 
        cpf: ""
    };

    $scope.init = function () {
        //carregando os tipos
        if (localStorage.getItem("tps") != null) {
            $scope.tipos = JSON.parse(localStorage.getItem("tps"));
        }
    };

    $scope.salvar = function () {
       
        //testando se o formulário é valido
        if (!$scope.formDados.$valid) {
            
            alert('Verifique os campos');
        }
        else{
            alert('salvou');
        }
    }

    $scope.init();

}]);

É BOM OBSERVAR: O formulário e os elemento de entrada de dados possuem o atributo name, pois será utilizado para implementação das validações. As tags span com a mensagem da invalidação somente será mostrada (ng-show) conforme o retorno booleano da diretiva de validação.

Quando as validações nativas do AngularJS não atendem alguma regra do sistema, é por meio de diretivas que podemos criar validações customizadas. O exemplo abaixo implementa a validação customizada para validar CPF (o algoritmo de validação do CPF não foi disponibilizado por questão de espaço).

Javascript:

app.directive('cpfValido', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {

            scope.$watch(attrs.ngModel, function () {

                if (elem[0].value.length == 0)
                    ctrl.$setValidity('cpfValido', true);
                else if (elem[0].value.length < 11) {
                    //aplicar o algoritmo de validação completo do CPF
                    ctrl.$setValidity('cpfValido', false);
                }
                else ctrl.$setValidity('cpfValido', true);
            });
        }
    };
});

HTML:

<input type="text" ng-model="lancamento.cpf" name="cpf" cpf-valido />
<span ng-show="formDados.cpf.$error.cpfValido">CPF Inválido</span>
	

https://docs.angularjs.org/guide/forms

AngularJS – Introdução

pic_angularOlá pessoal, inicio aqui meu aprendizado no tão falado framework do Google, o AngularJS. Os textos aqui representam o que tenho estudado e aprendido a respeito deste framework.

AngularJS é um framework Javascript open-source mantido pela Google que dá poder aos desenvolvedores para criar aplicações Web baseadas em navegadores, como as aplicações SPA – Single Page Application.

O site oficial é https://angularjs.org/.

Vamos ao Olá Mundo!!!

<html>
<head>
    <title>Olá Mundo</title>
    <script src="angular.min.js"> </script>
    <script>
        var app = angular.module('minhapagina', []);
    </script>
</head>
<body ng-app="minhapagina">
    <p>Olá mundo: {{ 1 + 2 }}</p>
</body>
</html>

O exemplo acima, consiste em uma simples página HTML, a não ser pelo atributo ng-app. Os “angularianos” chamam ng-app de diretiva, e normalmente é aplicada a tag BODY ou HTML, e indica o elemento inicial da aplicação (ponto a partir do qual o Angular pode ser usado dentro do código HTML).

O código javascript destacado no exemplo, localiza a diretiva ng-app, transformando a página num módulo gerenciável pelo o framework.

 
var app = angular.module('minhapagina', [])

O texto “{{ 1 + 2 }}” é avaliado como uma expressão pelo Angular, que ao ser executada, o resultado é concatenado ao HTML do contexto que está inserida. Uma expressão deve estar entre chaves duplas.

Outras principais diretivas:

ng-controller: define uma função Javascript para controlar determinada parte da página;
ng-model: vincula o elemento a uma propriedade do model do seu contexto;
ng-repeat: realiza a iteração em um array (basicamente um foreach);
ng-show: deixa visível um elemento HTML de acordo com um valor booleano (true/false). Também aceita expressões lógicas;
ng-hide: esconde o elemento de acordo com um valor booleano (true/false). Aceita expressões lógicas;

A referência completa das diretivas é obtida em https://docs.angularjs.org/api/ng/directive/.

Existem diretivas para tratar os diversos eventos disponibilizados nos elementos HTML: ng-click, ng-blur, ng-change, ng-checked, ng-focus, ng-keydown, ng-keypress, ng-keyup, e diversas outras.

O angularJS e o padrão MVC.

Normalmente encontramos a implementação do padrão MVC na programação que ocorre no lado do servidor da aplicação. Com o angular é diferente, a implementação ocorre no lado cliente da aplicação.

O padrão MVC é composto por três componentes principais:

Model – Componente responsável por gerenciar os dados para a aplicação. Não é de responsabilidade do model como o usuário vê os dados e qual lógica será aplicada sobre eles.

View – Componente que representa visualmente o model, um pedaço do HTML da página. Exibe os dados para o usuário devidamente organizados em estruturas HTML e CSS. Não é de sua responsabilidade a lógica contida no controller nem no model.

Controller – Componente responsável por preparar o model para a view, além de tratar regras de negócios, tratar eventos da view e requisições ao servidor.

angular_mvc

Vamos a um segundo exemplo.

<script>
   var app = angular.module('minhapagina', []);
</script>
<body ng-app="minhapagina">
     Seu primeiro nome é: <input type="text" ng-model="primeironome" />
     <p>{{primeironome}}</p>
</body>

Entendendo o exemplo: a diretiva ng-model vincula o valor de elementos input, select e textarea a uma propriedade no model chamada “primeironome”. Neste exemplo, a propriedade “primeironome” do model, mantém o valor informado no input, sendo possível, por exemplo, dentro da view usar expressões para recuperar seu valor.

Efeito igual é conquistado usando a diretiva ng-bind, que auto alimenta a propriedade innerHTML do elemento HTML com o valor de uma propriedade do model.

<p ng-bind="primeironome"></p>

Por questão de padronização do HTML e para deixar válido junto ao W3C, é possível utilizar o prefixo data- (dataset do HTML5) antes das diretivas:

data-ng-app
data-ng-model=”primeironome”
data-ng-bind

Vamos entender melhor a diretiva ng-controller.

Um controller é atribuído a um pedaço da página HTML (view) através da diretiva ng-controller. O controller é uma função Javascript (do tipo construtora) que tem por objetivo cuidar e atualizar de uma determinada área do DOM do página (um pedaço da página, a view).

Como regra geral, um controlador não deve fazer referência ou manipular o Document Object Model (DOM) diretamente.

Controllers são responsáveis pela interação entre models e views. A vinculação de dados entre model e view é realizada pelo angularJS de forma dinâmica, ou seja, qualquer alteração ocorrida em um dos lados (model ou view) atualiza o outro lado, é o chamado Two-Way DataBing [atualização de duas vias] (isso pode ser observado no primeiro exemplo: ao digitar no input, a propriedade “primeironome” é atualizada simultaneamente).

O acesso à view pelo controller é realizado através do objeto $scope. O $scope é um parâmetro do controller que dá acesso ao model vinculado a view.

Vamos a um simples exemplo sobre Controller.

HTML:

    <div ng-controller="MinhaControladora">
        <input type="button" ng-click="perguntar()" value="OK" />
        <p ng-bind="nome"></p>
    </div>

JS:

var app = angular.module('myApp', []);

app.controller('Controladora1', ['$scope', function ($scope) {

	$scope.nome = "...";

	$scope.perguntar = function () {
		$scope.nome = prompt("Qual seu nome?");
	};
}]);

Analisando o bloco da função controladora acima, foi definido a propriedade “nome” e o método “perguntar”. O parâmetro $scope estabelece uma conexão entre a model e view. No bloco HTML representando a view, as propriedades e métodos do models podem ser acessadas e vinculados aos elementos HTML.

Vamos a um exemplo menos simples (mas não avançado) sobre Controller. Destaque para a diretiva ng-repeat para iterar um array.

Javascript:

var app = angular.module('myApp', []);

app.controller('principal', ['$scope', function ($scope) {

	$scope.item = "";
	$scope.msg = "";
	$scope.itens = [];

	$scope.adicionar = function () {


		if ($scope.item == "") {
			alert("Informe o texto");
		}
		else {


			if ($scope.itens.indexOf($scope.item) == -1) {
				$scope.itens.push($scope.item);
				$scope.msg = "";
				$scope.item = "";
			}
			else {
				$scope.msg = "Item existente.";
			}
		}
	};

	$scope.excluir = function (item)
	{
	
		var pos = -1;
		for (var i = 0; i < $scope.itens.length; i++) {

			if ($scope.itens[i] == item)
			{
				pos = i;
				break;
			}
		}

		if (pos > -1)
			$scope.itens.splice(pos, 1);
	}
}]);

HTML:

<body ng-app="myApp" ng-controller="principal">
    <input type="text" ng-model="item" />
    <input type="button" ng-click="adicionar()" value="adicionar" />
    <div mostrar-msg></div>
    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th>&nbsp;</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in itens">
                <td>{{item}}</td>
                <td><a href="javascript:;" ng-click="excluir(item)">excluir</a></td>
            </tr>

        </tbody>
    </table>
    <div>{{msg}}</div>
</body>

 

É por aqui que finalizo meu estudo inicial sobre o Angular. Espero nos próximos post destacar o uso de templates, criação de diretivas próprias e AJAX com o AngularJS.

 

Referencial utilizado

  • AngularJS Succinctly [https://www.syncfusion.com/resources/techportal/ebooks]
  • Site Oficial [angularjs.org]
  • Ultimate guide to learning AngularJS in one day [http://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/]
  • AngularJS Tutorial [http://www.w3schools.com/angular/default.asp]

AngularJS – Requisições Assíncronas (AJAX)

pic_angularEste post foi construído com base na documentação oficial: https://docs.angularjs.org/api/ng/service/$http.

A comunicação entre cliente e servidor no AngularJS é gerenciada pelo serviço $http.

Os métodos disponíveis para realizar requisições são:

  • $http.get
  • $http.head
  • $http.post
  • $http.put
  • $http.delete
  • $http.jsonp
  • $http.patch

Por padrão, estes métodos estão configurados com o Content-Type “application/json;charset=UTF-8”.

Vamos a um simples exemplo que obtém uma cidade a partir de um UF selecionado.


var myApp = angular.module("myApp", []);

myApp.controller("carregaCidade", ['$scope','$http', function ($scope, $http) {

	$scope.uf = "";
	$scope.cidades = [];
	$scope.buscarCidades = function () {

		var params = "?UF=" + $scope.uf;
		var $http.req = get("BuscarCidades.aspx" + params , dados);

		req.success(function (retornoServidor, status) {
			$scope.cidades = retornoServidor;
		});

		req.error(function (retornoServidor, status) {

	   });
	};
}]);
<body ng-app="myApp">
    <div ng-controller="carregaCidade">

		<select id="ddlUf" name="uf" ng-model="uf" ng-change="buscarCidades()">
			<option selected="selected" value="">Selecione</option>
			<option value="SP">SP</option>
			<option value="AC">AC</option>
			<!--...-->
			<option value="TO">TO</option>
		</select>

		<select id="ddlCidades" name="ddlCidades">
			<option value="">selecione...</option>
			<option ng-repeat="cidade in cidades" value="{{cidade.Id}}">{{cidade.Nome}}</option>
		</select>
	
  </div>
</body>	

Os eventos success e error tratam o resultado da operação.

É possível usar diretamente o serviço $http fazendo toda a configuração manualmente.

var req = $http({
   method: "GET",
   url: "BuscarCidades.apsx" + params
});

req.success(function (data, status, headers, config, statusText) {
	$scope.cidades = data;
   
});

req.error(function (data, status, headers, config, statusText) {
	console.log(status);
});

Os exemplos acima utilizaram o método de envio GET, passando dados diretamente pela URL. Para usar o método POST também é simples, bastando organizar os dados para envio no formato JSON.

var dados = JSON.stringify({ UF: $scope.uf });
 
var req = $http({
	url: "BuscarCidades.aspx",
	data: dados,
	method: "POST",
	headers: "Content-Type: application/json;charset=UTF-8"

});

Ou

var req = $http.post("BuscarCidades.aspx", dados);

É claro, que pensando no conceito de aplicações que usam a arquitetura REST, este tipo de requisições (busca de dados) deve ser sempre GET.

Chamadas XMLHttpRequest (AJAX) enviando JSON para páginas aspx ou GenericHandler – Deserialização manual

json160 csharplogoOlá pessoal,

Realmente é muito simples realizar uma chamada XMLHttpRequest (AJAX) para um WebMethod ASP.NET. E mais fácil ainda é enviar dados no formato JSON para o WebMethod, pois por padrão o WebMethod deserealizada a string JSON conforme seus parâmetros.

Mas quando não temos um WebMethod para receber os dados no formato JSON e fazer todo o trabalho de sujo de deserialização? Por exemplo, ao fazer chamadas XMLHttpRequest para uma página ou um Generic Handler passando dados no formato JSON. Nesta situação é necessário realizar a deserialização dos dados manualmente, vamos a um exemplo.

Chamada XMLHttpRequest no lado cliente:

var request = $.ajax({
type: &quot;POST&quot;,
dataType: &quot;json&quot;,
url: &quot;/meusite/processa.ashx&quot;,
cache: false,
data: JSON.stringify({ p1: &quot;oi&quot;, p2: 1000, vet: [{ vp1: {vp2: &quot;xxxx&quot;}},2] })

});

request.done(function (r) {
console.log(r);
});

request.fail(function () {
alert(&quot;Não foi possível processar sua requisição.&quot;);
});

O código acima utiliza a biblioteca jQuery para encapsular o uso da biblioteca javascript XMLHttpResquest e enviar dados ao servidor. Em sua configuração, a propriedade “URL” indica um GenericHandler no servidor (processa.ashx), mas que também pode ser substituído por uma página aspx. E a propriedade “data” foi configurada com um objeto literal com propriedades simples e complexas, que antes de ser enviado ao servidor será transformando numa string JSON pelo método JSON.stringify.

No lado servidor (no GenericHandler ou no método page_load da página), a recepção dos dados fica assim:

JavaScriptSerializer jss = new JavaScriptSerializer();
string json = new StreamReader(context.Request.InputStream).ReadToEnd();

Dictionary&lt;string, object&gt; values = jss.Deserialize&lt;Dictionary&lt;string, object&gt;&gt;(json);

string p1 = values[&quot;p1&quot;].ToString();
int p2 = Convert.ToInt32(values[&quot;p2&quot;]);

var vet = (ArrayList)values[&quot;vet&quot;];
var vp1 = ((Dictionary&lt;string, object&gt;)vet[0])[&quot;vp1&quot;];
var vp2 = ((Dictionary&lt;string, object&gt;)vp1)[&quot;vp2&quot;];

No código de servidor acima, a propriedade InputStream do objeto Request representa o conteúdo do corpo de entrada de conteúdo HTTP vindo do cliente, portanto, representa a string JSON enviada pelo cliente.

O inputString é recuperado e deserializado em um objeto Dictionary (espécie de lista indexada por chaves). Cada propriedade da string JSON torna-se uma chave do dicionário, sendo facilmente acessada:

int p1 = values[&quot;p1&quot;].ToString();
int p2 = Convert.ToInt32(values[&quot;p2&quot;]);

E também podemos acessar estruturas JSON mais complexas, como é o caso da propriedade “vet”, que mantém um vetor, cujo seu índice 0 (zero) contém outro objeto JSON.

vet: [{ vp1: {vp2: &quot;xxxx&quot;}},2]

Após recuperação do vetor, foi necessário converte o objeto de índíce 0 (zero) em outro Dictionary, desta forma, as propriedades do objeto contido no índice 0 (zero) da propriedade “vet” são acessadas por chaves do Dictionary.

var vp1 = ((Dictionary&lt;string, object&gt;)vet[0])[&quot;vp1&quot;];
var vp2 = ((Dictionary&lt;string, object&gt;)vp1)[&quot;vp2&quot;];

E fim.

Gerando estruturas JSON em C# e ASP.NET

json160Dando continuidade ao post Introdução ao JSON – Javascript Object Notation, mostro agora como construir em C# as estruturas dos exemplos utilizados no post anterior.

No C# podemos criar objetos de tipo anônimos (anonymous types) para definir a estrutura e dados, e depois realizar a serialização para o formato JSON.

Vamos aos exemplos:

1 – Criando um objeto.

public static string retornaObjetoJSON()
{
    //{“nome” : “Bill”, “idade” : 32, “salario”: 121232.67}

    var obj = new { nome = "Bill", idade = 32, salario = 121232.67};

    JavaScriptSerializer js = new JavaScriptSerializer();
    string strJson = js.Serialize(obj);
    return strJson;
}

2 – Criando um array.

public static string retornaArrayJSON()
{
    //["Huguinho","Zezinho","Luizinho", 3]

    var objVet = new object[] { "Huguinho", "Zezinho", "Luizinho", 3 };

    JavaScriptSerializer js = new JavaScriptSerializer();
    string strJson = js.Serialize(objVet);
    return strJson;
}

3 – Criando um array de objetos.

public static string retornaVetorDeObjetoJSON()
{
    /*
        [{ "nome" : "Huguinho", "idade" : 10 },
        { "nome" : "Zezinho", "idade" : 12 },
        { "nome" : "Luizinho", "idade" : 10 }]
    */

    var objVet = new object[] { new { nome = "Huguinho", idade = 10 },
                                new { nome = "Zezinho", idade = 12 },
                                new { nome = "Luizinho", idade = 10 }};

    JavaScriptSerializer js = new JavaScriptSerializer();
    string strJson = js.Serialize(objVet);
    return strJson;
}

4 – Criando um objeto contendo um propriedade array de objetos.

public static string retornaObjetoComVetorJSON()
{
    /*
        {"tio" : "Pato Donald",
        "idade" : 40,
        "sobrinhos" :
                [{ "nome" : "Huguinho",     "idade" : 10 },
                { "nome" : "Zezinho", "idade" : 12 },
                { "nome" : "Luizinho", "idade" : 10 }]
        }
    */

    var obj = new {tio = "Pato Donald",
                    idade = 40,
                    sobrinhos = new object[] { new { nome = "Huguinho", idade = 10 },
                                                new { nome = "Zezinho", idade = 12 },
                                                new { nome = "Luizinho", idade = 10 }}
                    };

    JavaScriptSerializer js = new JavaScriptSerializer();
    string strJson = js.Serialize(obj);
    return strJson;
}

A biblioteca System.Web.Script.Serialization é a responsável por realizar a serialização dos objetos anônimos.

Logo mais num outro post mostro como realizar chamadas assíncronas por Javascript ao JSON gerado no C# no servidor.

Até…

Introdução ao JSON – Javascript Object Notation

json160JSON é um formato para troca de dados baseado em estruturas de texto, o que lhe dá a característica de ser completamente independente de linguagem. É a mesma ideia do XML, só que mais simples e leve.

No site oficial (http://www.json.org/) o autor ainda afirma:

Para seres humanos, é fácil de ler e escrever.
Para máquinas, é fácil de interpretar e gerar.

A forma simples de representar dados no formato JSON tem difundido seu uso, e vem se tornando uma alternativa ao XML para implementações AJAX.

Em JSON podemos estruturar dados em (1) coleções de pares de nome e valor e também em (2) lista/array ordenadas de valores.

Os valores dos dados são representando em três formas: object, value e array, e ainda podem ser combinadas.

Object: é um conjunto de pares de nome/valores. A sintaxe de um object é


{ "nome da propriedade" : "valor da propriedade" }

O object começa com { e termina com }. E cada par de nome/valores é separado por ,(vírgula), sendo que os valores podem assumir diferente tipos de dados. Exemplo:


{“nome” : “Bill”, “idade” : 32, “salario”: 121232.67}

Array: é uma coleção de valores ordenados. A sintaxe de um array JSON é:


[ "valor1",  "valor2", "valor3" ]

O array começa com [ e termina com ], e cada parte  é separa por , (vírgula) e podem divergir o tipo de dados. Exemplo:


["Huguinho","Zezinho","Luizinho", 3]

Tanto a estrutura object como o array do JSON podem ser combinadas, formando diversas estruturas de dados.

Exemplo – Um array de objects:


[{ "nome" : "Huguinho", "idade" : 10 },
 { "nome" : "Zezinho", "idade" : 12 },
 { "nome" : "Luizinho", "idade" : 10 }]

Exemplo – Object contendo uma propriedade array:


{"tio" : "Pato Donald",
 "idade" : 40,
 "sobrinhos" :
        [{ "nome" : "Huguinho",     "idade" : 10 },
          { "nome" : "Zezinho", "idade" : 12 },
          { "nome" : "Luizinho", "idade" : 10 }]
}

JSON nasceu com um subconjunto da linguagem Javascript para representar objetos e atualmente qualquer linguagem de programação moderna tem suporte (via pacotes de terceiros) a esse formato de troca de informação.

Os sites jsonviewer.stack.hu e  jsonformatter.curiousconcept.com/ são bons lugares para validar a estrutura JSON

Num futuro post demonstrarei o uso do JSON com ASP.NET em chamada assíncronas.

CKEditor: Como identificar quando está totalmente carregado.

Não sei porque, mas sempre apanho do CKEditor. Hehehe.

Dependendo da situação e da lógica aplicada numa página que usa o CKEditor, é necessário acessar suas respectivas instâncias logo após terem sido totalmente carregadas pelo navegador  e disponíveis para interação.

Para exemplificar, o código abaixo demonstra como aumentar a altura do CkEditor logo após ter sido carregado.

&lt;script type=&quot;text/javascript&quot;&gt;
	CKEDITOR.on('instanceReady', function (e) {
		e.editor.resize('100%', 550);
	});
&lt;/script&gt;

Retornar dados no formato JSON usando ASP.NET

Olá pessoal.

Com o advento das chamadas assíncronas diretamente do cliente ao servidor via Javascript, muitas vezes é necessário retornar ao cliente dados estruturados,  que pode ser uma estrutura XML, uma simples string separada por um caractere especial, ou ainda no formato JSON.

Uma boa opção devido sua padronização e facilidade de manipulação é o formato JSON.

Serializar um objeto que é uma instância de uma classe para o formato JSON no C# é bem simples. O problema é quando queremos serializar dados que não representam um objeto de instancia de classe. Neste caso, a técnica mais comum é concatenar strings formando a estrutura desejada (já fiz muito isso), além de complicar uma futura manutenção, não é elegante.

No C# podemos criar objetos de tipo anônimos (anonymous types), definir sua estrutura e dados, e depois serializar para o formato  JSON enviando tudo  ao cliente.

Exemplo de criação de um vetor de tipo de anônimo e com dados:

var vetorAnonimo = new object[] { new { nome = "nome 1", id = 1 },
                                  new { nome = "nome 2", id = 2 }};

Com o objeto anônimo definido e carregado é possível fazer sua serialização para enviar ao cliente:

using System.Web.Script.Serialization;

JavaScriptSerializer js = new JavaScriptSerializer();
string strJson = js.Serialize(vetorAnonimo);

Pronto. É só devolver a variável strJson para a função de callback no Javascript/JQuery e manipular o retorno.

Veja como chega no cliente o vetor serializado, uma string estruturada no formato JSON. Lindo!!!

[{"nome":"nome 1","id":1},{"nome":"nome 2","id":2}]

Este post teve ajuda do @victorvhpg ninja do JQuery.

Validar a quantidade de caracteres num TextBox MultiLine (TextArea)

Sabemos que para transformar o ServerControl TextBox em TextArea temos que mudar sua propriedade TextMode para o valor MultiLine. Também sabemos que via HTML não é possível limitar o tamanho de um TextArea por meio do MaxLength como é feito num Input Text. Isso pode ser contornado com o uso de Javascript.

Usando o controle ASP.NET RegularExpressionValidator e a expressão regular ^.[sS]{0,500}$, é possível validar a quantidade de caracteres inseridas num TextBox MultiLine (TextArea). Na expressão acima, o valor 500 é a quantidade máxima de caracteres que desejamos no TextBox MultiLine (TextArea).

&lt;asp:TextBox ID=&quot;TextBox1&quot; runat=&quot;server&quot; Height=&quot;93px&quot; TextMode=&quot;MultiLine&quot; Width=&quot;381px&quot;&gt;&lt;/asp:TextBox&gt;
&lt;br /&gt;
&lt;asp:RegularExpressionValidator ID=&quot;RegularExpressionValidator1&quot; runat=&quot;server&quot; ControlToValidate=&quot;TextBox1&quot;
  ErrorMessage=&quot;Ultrapassou 500 caracteres.&quot; ValidationExpression=&quot;^.[sS]{0,500}$&quot;&gt;
&lt;/asp:RegularExpressionValidator&gt;

Bom proveito.