Desenvolvimento - ASP. NET
Usando jQuery Templates Parte 2
Falando sobre o controle de fluxo IF dentro do template, explicando como trabalhar com ele.
por José Alberto Monteiro AlbuquerqueHoje pretendo fazer algo mais arrojado, não vamos usar um pouco de jQuery UI para deixar nossa solução mais bonitinha. A ideia básica é tralhar agora mostrar os recursos de controle de fluxo, que é o IF.
Antes de darmos inicio ao código, usando aquela mesma solução do post passado, baixe mais dois arquivos referentes ao jQuery UI.
Arquivos necessários:
- jQuery UI, clique aqui.
- jQuery UI CSS, clique aqui.
Vamos ao código:
Adicionei o js do jQuery UI na minha pasta de scripts, como pode ver na figura abaixo:
Agora é só nos referenciarmos ele na nossa MasterPage junto com o CSS, veja o código abaixo.
|
1 |
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" /> |
|
|
2 |
<link href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/black-tie/jquery-ui.css" rel="stylesheet" type="text/css" /> |
|
|
3 |
<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> |
|
4 |
<script src="../../Scripts/jquery.tmpl.min.js" type="text/javascript"></script> |
|
5 |
<script src="../../Scripts/jquery.tmplPlus.min.js" type="text/javascript"></script> |
|
6 |
<script src="../../Scripts/jquery-ui.min.js" type="text/javascript"></script> |
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 características que farão
sentido no nosso template.
Veja a classe abaixo:
|
01 |
using System; |
|
|
02 |
|
|
|
03 |
namespace jQueryTemplate.Models |
|
|
04 |
{ |
|
|
05 |
public class Pessoa |
|
|
06 |
{ |
|
|
07 |
public string Nome { get; set; } |
|
|
08 |
public DateTime DataNascimento { get; set; } |
|
|
09 |
public decimal Salario { get; set; } |
|
|
10 |
public string Cidade { get; set; } |
|
|
11 |
public bool Sexo { get; set; } |
|
|
12 |
|
|
|
13 |
public Pessoa(string nome, DateTime nascimento, int salario, string cidade,bool sexo) |
|
|
14 |
{ |
|
|
15 |
this.Nome = nome; |
|
|
16 |
this.DataNascimento = nascimento; |
|
|
17 |
this.Salario = salario; |
|
|
18 |
this.Cidade = cidade; |
|
|
19 |
this.Sexo = sexo; |
|
|
20 |
} |
|
|
21 |
} |
|
|
22 |
} |
|
Olhando para as propriedades, vemos sexo
como booleano, e true será para pessoas do sexo masculina, e false do sexo
feminino. Essa propriedade será usada para definirmos que imagem carregar no
nosso template.
Adicionei esses dias imagens no projeto para usarmos no template:
Bom, agora vamos fazer a página. Para efetuar a busca, vou colocar um textbox que à medida que o usuário digite algum nome, ele vai filtrando e mostrando os resultados abaixo. Veja o código:
|
01 |
<script type="text/javascript"> |
|
|
02 |
$(function () { |
|
|
03 |
$("#NomePessoa").change(function () { |
|
|
04 |
$("#ListaPessoa").remove(); |
|
|
05 |
$(this).after("<div id="ListaPessoa"></div>"); |
|
|
06 |
$.getJSON("/Home/Pessoas/", { nome: $(this).val() }, function (json) { |
|
|
07 |
$("#template").tmpl(json).appendTo("#ListaPessoa"); |
|
|
08 |
$("#ListaPessoa").accordion(); |
|
|
09 |
}); |
|
|
10 |
}); |
|
|
11 |
}); |
|
|
12 |
</script> |
|
|
13 |
<input type="text" id="NomePessoa" name="NomePessoa" value="" /> |
O nosso template é o seguinte:
|
01 |
<script id="template" type="text/html"> |
|
|
02 |
<h3> |
|
|
03 |
<a href="#">${Nome} |
|
|
04 |
{{if Sexo}} |
|
|
05 |
<img src="../../Content/male.png" /> |
|
|
06 |
{{else}} |
|
|
07 |
<img src="../../Content/female.png" /> |
|
|
08 |
{{/if}} |
|
|
09 |
</a> |
|
|
10 |
</h3> |
|
|
11 |
<div> |
|
|
12 |
<p> |
|
|
13 |
<table> |
|
|
14 |
<caption>Dados Pessoais</caption> |
|
|
15 |
<tr> |
|
|
16 |
<td>Idade: ${Idade}</td> |
|
|
17 |
</tr> |
|
|
18 |
<tr> |
|
|
19 |
<td>Salário: ${Salario}</td> |
|
|
20 |
</tr> |
|
|
21 |
<tr> |
|
|
22 |
<td>Mora em: ${Cidade}</td> |
|
|
23 |
</tr> |
|
|
24 |
</table> |
|
|
25 |
</p> |
|
|
26 |
</div> |
|
|
27 |
</script> |
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).
Legal, e como ficou nosso action que traz os dados? Assim:
|
01 |
public JsonResult Pessoas(string nome) |
|
|
02 |
{ |
|
|
03 |
List Pessoa = new List(); |
|
|
04 |
Pessoa.Add(new Pessoa("Alberto", new DateTime(1990, 03, 16), 700, "Fortaleza", true)); |
|
|
05 |
Pessoa.Add(new Pessoa("Elemar", new DateTime(1980, 08, 20), 1000, "Rio Grande do Sul", true)); |
|
06 |
Pessoa.Add(new Pessoa("Luciano", new DateTime(1985, 10, 29), 1200, "Fortaleza", true)); |
|
07 |
Pessoa.Add(new Pessoa("Rafaela", new DateTime(1989, 05, 13), 700, "Fortaleza", false)); |
|
|
08 |
|
|
|
09 |
var retorno = Pessoa.Where(pessoa => pessoa.Nome.Contains(nome)).Select(pesso => new |
|
|
10 |
{ |
|
|
11 |
pesso.Nome, |
|
|
12 |
pesso.Cidade, |
|
|
13 |
pesso.Sexo, |
|
|
14 |
Salario = pesso.Salario.ToString("C"), |
|
|
15 |
Idade = (DateTime.Now.Subtract(pesso.DataNascimento).Days / 365).ToString() |
|
|
16 |
}); |
|
|
17 |
return Json(retorno, JsonRequestBehavior.AllowGet); |
|
|
18 |
} |
|
Bom, por hoje é só! No próximo post
mostrarei o controle de loop EACH.
jQueryTemplate Parte 2
