Usando jQuery Templates 2


Aew galera, hoje vamos continuar essa série de postagens sobre jQuery Templates.

Hoje pretendo fazer algo mais arrojado, não vamos usar um pouco de jQueri UI para deixar nossa solução mais bonitinha. A ideia basica é tralhar agora mostrar os recursos de controle de fluxo, que é o IF.

Antes de darmos inicio ao codigo, usando aquela mesma solução do post passado, baixe mais dois arquivos referentes ao jQuery UI.

Arquivos necessários:
Lets go!!

Adicionei o js do jQuery UI na minha pasta de scripts, como pode ver na figura abaixo:

image

Agora é so nos referenciarmos ele na nossa MasterPage junto com o CSS, veja o codigo abaixo.

[sourcecode language="xml" wraplines="true" toolbar="false" htmlscript="true"]
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css" /><!--Novo-->
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.tmpl.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.tmplPlus.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui.min.js" type="text/javascript"></script><!--Novo-->
[/sourcecode]

Bom, agora vamos supor o seguinte, que temos uma tela onde há um campo para buscarmos alguma coisa, como fonte de dados vou criar uma lista de pessoa com algumas caracteristicas que farão sentido no nosso template.

Veja a classe abaixo:

[sourcecode language="csharp"]
using System;

namespace jQueryTemplate.Models
{
    public class Pessoa
    {
        public string Nome { get; set; }
        public DateTime DataNascimento { get; set; }
        public decimal Salario { get; set; }
        public string Cidade { get; set; }
        public bool Sexo { get; set; }


        public Pessoa(string nome, DateTime nascimento, int salario, string cidade,bool sexo)
        {
            this.Nome = nome;
            this.DataNascimento = nascimento;
            this.Salario = salario;
            this.Cidade = cidade;
            this.Sexo = sexo;
        }
    }
}
[/sourcecode]

Olhando para as propriedades, vemos sexo como boleano, e true será para pessoas do sexo masculine, e false do sexo feminino. Essa propriedade será usada para defirnirmos que imagem carregar no nosso template.

Adicionei essas dias imagens no projeto para usarmos no template:

image

Bom, agora vamos fazer a página. Para efetuar a busca, vou colocar um textbox que a mediade que o usuario digite algum nome, ele vai filtrando e mostrando os resutados abaixo. Veja o código:

[sourcecode language="xml" htmlscript="true" light="false"]
<script type="text/javascript">
    $(function () {
        $("#NomePessoa").change(function () {
            $("#ListaPessoa").remove();
            $(this).after('<div id="ListaPessoa"></div>');
            $.getJSON("/Home/Pessoas/", { nome: $(this).val() }, function (json) {
                $("#template").tmpl(json).appendTo("#ListaPessoa");
                $("#ListaPessoa").accordion();
            });
        });
    });
</script>
<input type="text" id="NomePessoa" name="NomePessoa" value="" />

[/sourcecode]

O nosso template é o seguinte:

[sourcecode language="xml"]
<script id="template" type="text/html">
<h3>
    <a href="#">${Nome} 
    {{if Sexo}}
        <img src="../../Content/male.png" />
    {{else}}
        <img src="../../Content/female.png" />
    {{/if}}
    </a>
</h3>
<div>
    <p>
        <table>
            <caption>Dados Pessoais</caption>
            <tr>
                <td>Idade: ${Idade}</td>
            </tr>
            <tr>
                <td>Salário: ${Salario}</td>
            </tr>
            <tr>
                <td>Mora em: ${Cidade}</td>
            </tr>
        </table>
    </p>
</div>    
</script>

[/sourcecode]

Como podem ver, no meu cabeçalho h3, eu preencho com o nome, e com a imagem que indica se é do sexo masculino ou feminino. E a estrutura que estamos usando é para usar como um accordion(vide imagem).

image

Legal, e como ficou nosso action que traz os dados? Assim:

[sourcecode language="csharp"]
public JsonResult Pessoas(string nome)
{
    List<Pessoa> Pessoa = new List<Pessoa>();
    Pessoa.Add(new Pessoa("Alberto", new DateTime(1990, 03, 16), 700, "Fortaleza", true));
    Pessoa.Add(new Pessoa("Elemar", new DateTime(1980, 08, 20), 1000, "Rio Grande do Sul", true));
    Pessoa.Add(new Pessoa("Luciano", new DateTime(1985, 10, 29), 1200, "Fortaleza", true));
    Pessoa.Add(new Pessoa("Rafaela", new DateTime(1989, 05, 13), 700, "Fortaleza", false));

    var retorno = Pessoa.Where(pessoa => pessoa.Nome.Contains(nome)).Select(pesso => new
        {
            pesso.Nome,
            pesso.Cidade,
            pesso.Sexo,
            Salario = pesso.Salario.ToString("C"),
            Idade = (DateTime.Now.Subtract(pesso.DataNascimento).Days / 365).ToString()
        });
    return Json(retorno, JsonRequestBehavior.AllowGet);
}

[/sourcecode]

Bom, por hoje é só! No proximo post mostrarei o controle de loop EACH.


jQueryTemplate Parte 2


sobre Alberto Monteiro

Desenvolvedor no Grupo Fortes, cuja principal área de conhecimento são em tecnologias Microsoft, como Windows Forms / Services, WPF, ASP.NET(MVC/WEB API), Windows Phone, EF. Gosta de sopa de letrinhas(SOLID, DDD, TDD, BDD, IoC, SoC, UoW), possui aplicações de Windows Phone publicadas no marketplace, já contribuiu no jQuery UI. Atualmente trabalha com ASP.NET MVC / Web API, Windows Azure, Amazon AWS, jQuery/UI, Knockout, EF, Ninject, AutoMapper, Restfulie, SignalR, KendoUI.