// Rodolfo Fadino

/* LIFE RUNS ON CODE */

Um dos melhores formatos para transmitir dados na web é o Json (JavaScript Object Notation),  já que é nativo do JavaScript e possui menor overhead de separadores que em um XML por exemplo, alem disso, é facilmente tratado por funções JS.

Cada vez mais a maioria de projetos utiliza JSON em suas API’s, integrações ou em outras comunicações.

A idéia deste post é demonstrar algumas facilidades e maneiras de trabalhar com JSON utilizando dynamic e C#.

Para isso precisaremos instalar e referenciar a namespace do System.Json, que pode ser incluida através de Nuget:

(Install-Package System.Json)

 

Criando JSON

Com o dynamic (http://msdn.microsoft.com/en-us/library/system.dynamic.dynamicobject.aspx) é possivel extender a classe JsonObject (http://msdn.microsoft.com/en-us/library/system.json.jsonobject(v=vs.110).aspx) para criarmos com muita facilidade nosso objetos JSON.

Ex:

dynamic usuario = new JsonObject();
usuario.nome = "Rodolfo";
usuario.sexo = "m";
usuario.idade = 22;

dynamic certificacoes = new JsonArray();

dynamic certificacao1 = new JsonObject();
certificacao1.titulo = "MCPD";
certificacao1.id = 1;

dynamic certificacao2 = new JsonObject();
certificacao2.titulo = "MCTS";
certificacao2.id = 2;

dynamic certificacao3 = new JsonObject();
certificacao3.titulo = "MCP";
certificacao3.id = 3;

certificacoes.Add(certificacao1);
certificacoes.Add(certificacao2);
certificacoes.Add(certificacao3);

usuario.certificacoes = certificacoes;

Console.WriteLine(usuario.ToString());

Terá criado a seguinte string

{"nome":"Rodolfo","sexo":"m","idade":22,"certificacoes":
[{"titulo":"MCPD","id":1},{"titulo":"MCTS","id":2},{"titulo":"MCP","id":3}]}

 

Lendo strings com JSON

Outra função fundamental é converter strings de JSON em objetos que podem ser trabalhados, para isso, neste exemplo eu utilizarei o dynamic e o JsonValue (http://msdn.microsoft.com/en-us/library/system.json.jsonvalue(v=vs.110).aspx)

Ex:

var jsonString = "{\"nome\":\"Rodolfo Fadino\",\"idade\":22, \"sexo\":\"M\"}";
dynamic jsonTratado = JsonValue.Parse(jsonString);

string Nome = jsonTratado.nome;
char Sexo = jsonTratado.sexo;
int idade = jsonTratado.idade;

 

Abaixo seguem os link’s da MSDN

http://msdn.microsoft.com/en-us/library/system.json(v=vs.110).aspx

http://msdn.microsoft.com/en-us/library/system.dynamic.aspx

 

Bom espero que este post tenha sido util,

estou a disposição para dúvidas, críticas e sugestões

 

abs

Rodolfo

C#

Após ter que aprender a utilizar JSON em uma novo projeto, decidi fazer um post sobre esse formato de transmissão de dados. Uma de suas principais vantagens é ser baseado em um subconjunto do JavaScript. Sendo um objeto JavaScript, sua manipulação com JavaScript é mais intuitiva do que, por exemplo, a manipulação de um xml.

JSON (JavaScript Object Notation) é construído em duas estruturas:

* Uma coleção de pares nome / valor. O que pode ser definido como um objeto, registro, estrutura, quadro, dicionário de hash, keyed list, ou vetors associativos.
* Uma lista ordenada de valores. Na maioria das linguagens isto é percebido como um vetor, lista ou sequência.

Sendo uma estrutura de dados a maioria das linguagens modernas possuem um tipo de suporte para o uso do JSON, assim é um dos melhores jeitos de trafegar informações.

Estas estrutiras podem ter os seguintes formatos:

Objeto:

Um objeto é um conjunto não ordenado de pares nome / valor. Um objeto que começa com {(chave esquerda) e termina com } (chave direita). Cada nome é seguido por: (dois pontos) e os pares nome / valor são separados por, (vírgula).

ex:

 

var objeto = { nome1: “valor1″, nome2: “valor2″, nome3: “valor4″ };

alert(objeto.nome1);

//”valor1″

 

Vetor

Um vetor é uma coleção ordenada de valores. Um vetor começa com [(colchete esquerdo) e termina com] (colchete direito). Os valores são separados por, (vírgula).

ex:

var vetor = ["valor1", "valor2", "valor3"];

alert(vetor[1]);

//”valor2″

O valor pode ser uma string entre aspas, ou um número, ou verdadeiro ou falso ou nulo, ou um objeto ou um array. Estas estruturas podem ser aninhadas.

Estruturas aninhadas

ex:

var pessoa = { nome:"Rodolfo", Idade: 20, Sexo: 'M', Certificações:["MCP", "MCTS" , "MCPD"]};

alert( pessoa.Certificações[1]);

//”MCTS”

alert( pessoa.Idade);

//20

var pessoa = { nome: "Rodolfo", Idade: 20, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] };
var certif = "";
for (var item in pessoa.Certificações) {
certif = pessoa.Certificações[item] + " "+ certif;
}

alert(certif);

//”MCP MCTS MCDP”

Uma coisa muito util é o intellisense do js reconhecendo a estrutura

Manipulando via js

ex:

var pessoas= new Array;
pessoas.push(
{ nome: "Rodolfo", Idade: 20, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: "Fadino", Idade: 25, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: "Junior", Idade: 25, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

alert(pessoas[1].Certificações);

// “MCP, MCTS,MCPD”

ex:

var pessoas= new Array;
pessoas.push(
{ nome: "Rodolfo", Idade: 20, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: "Fadino", Idade: 25, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: "Junior", Idade: 25, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

var pessoa = pessoas.pop();
alert(pessoa.nome);

//”Junior”

var pessoas= new Array;
pessoas.push(
{ nome: "Rodolfo", Idade: 20, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: "Fadino", Idade: 25, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: "Junior", Idade: 25, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

alert(pessoas.length);

//3

Bem, espero que tenha sido útil, em breve farei um post sobre Linq to JSON em C#,

Obrigado

Rodolfo

JS

Um dos melhores formatos para transmitir dados de maneira assíncrona na web é o Json (JavaScript Object Notation),  já que é nativo do JavaScript e possui menor overhead de separadores que em um XML por exemplo, alem disso, é facilmente tratado por funções JS.

A idéia deste post é demonstrar uma maneira simples de trabalhar com requisições assíncronas utilizando Json, jQuery e ASP.NET MVC.

Primeiro passo vamos criar um projeto no Visual Studio do tipo ASP.NET MVC 2

Este tipo de projeto é legal para estudos e demos pois ele já traz Scripts, Views e Controlers criados, entretanto é indicado ao começar um projeto novo usar o MVC 2 Empty Web Aplication.

Nosso exemplo fará um busca atravéz de um termo digitado em um textbox.

Vamos criar um input do tipo text na View Index do projeto, já com um evento chamando a função javascript que fará a chamada assíncrona e um paragrafo onde será retonado o resultado da busca:

ex: Index.aspx

<p>
    <input type="text" id="txtBusca" name="txtBusca"  onblur="buscaAjax();" />
</p>
<p>
<b>Resultado:</b>
</p>
<p id="resultado">
</p>

Agora vamos trabalhar como funcionará a resposta com o Json dos dados, neste exemplo eu nao usei nenhum banco de dados, criarei somente uma lista de contatos como retorno, a fim de exemplo.

No Controller da Home vamos criar a seguinte Action:

[HttpPost]
public ActionResult Busca(string termo)
{
    //Dados
    var pessoas = new List<Pessoa>();
    pessoas.Add(new Pessoa(){Nome = "Rodolfo",Sobrenome = "Fadino"});
    pessoas.Add(new Pessoa() { Nome = "Cleber", Sobrenome = "Dantas" });
    pessoas.Add(new Pessoa() { Nome = "Alexandre", Sobrenome = "Tarifa" });
    pessoas.Add(new Pessoa() { Nome = "Fernanda", Sobrenome = "Sallai" });
    pessoas.Add(new Pessoa() { Nome = "Eduardo", Sobrenome = "Cucharro" });

    //Consulta
    var resultado = (from c in pessoas
                        where c.Nome.ToLower().Contains(termo.ToLower())
                        select c).ToList();

    //Serialização para Json
    return Json(resultado);
}

Agora para finalizar vamos adicionar referência ao arquivo do jQuery, que pode ser feito na View ou na MasterPage (depende da estrutura do seu projeto)

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>

Agora podemos programar a chamada Ajax com jQuery para a Action de busca:

<script type="text/javascript">
function buscaAjax() {
$.ajax({
    url: "/home/busca/",
    data: { termo: $("#txtBusca").val() },
    type: "post",
    dataType: "json",
    beforeSend: function (XMLHttpRequest) {
        $("#resultado").empty();
        $("#resultado").append("inicio");
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        $("#resultado").empty();
        $("#resultado").append("erro");
    },
    success: function (data, textStatus, XMLHttpRequest) {
        $("#resultado").empty();
        $(data).each(function () {
            $("#resultado").append("Nome: " + this.Nome + " Sobrenome:"
            + this.Sobrenome  + " <br/>");
        });
    }
});
}
</script>

Como podemos ver temos diversas opções de cofigurações, as principas são:

url : url da solicitação.
data: defini os parâmetros.
type: define o tipo de solicitação (ex: GET, POST).
dataType: define o tipo de retorno os mais comuns são xml, json, script, ou html.
beforeSend: define a função que será executada antes de enviar a requisição.
error: define a função que será executada caso ocorra erro na requisição.
success: define a função que trata o retorno dos dados da requisição.

A documentação completa do jQuery pode ser encontrada em: http://api.jquery.com/jQuery.ajax/

Com isso, ao digitar um termo e tirar o foco do input a busca será feita e o resultado inserido no paragrafo de resultado.

Bom espero que este post seja útil.

projeto para baixar

Estou a disposição para dúvidas, criticas e sugestões.

Obrigado.

Rodolfo.

ASP.NET