Olá pessoal sejam bem vindos, no artigo de hoje vou ensinar como criar templates genéricos para facilitar o nosso dia a dia de trabalho.
Utilizando o plugin Jquery template é possível criar uma estruturaHTML genérica e preencher com nossos objetos Javascript ou JSON.
Nesse artigo vou utilizar os exemplos de como criar e configurar o WCF do artigo Consumido WCF com Ajax Utilizando Jquery.
Vamos iniciar criando um novo projeto do tipo WEB, e adicionando um novo WCF com nome UsuarioService.
O próximo passo é adicionar a nossa classe usuário e um método como mostra abaixo.
public class Usuario
{
#region Properites
public string Name { get; set; }
public string Sobrenome { get; set; }
#endregion
}
[OperationContract]
[WebGet(UriTemplate = "GetUsuarioList", ResponseFormat = WebMessageFormat.Json)]
public List GetUsuarioList()
{
List list = new List();
list.AddRange(new Usuario[] {
new Usuario{Name="Emerson"},
new Usuario{Name="Angelica"},
new Usuario{Name="Eder"},
new Usuario{Name="Luiza"}
});
return list;
}
Descrição: O nosso serviço vai conter um método que retorna uma lista de Objetos Usuario podendo ter
outros como mostrei no artigo anterior.
O
próximo passo agora é criar uma pasta template e adicionar um novo Item do tipo HTML, e depois adicione a
estrutura abaixo.
<script type=”text/html” id=”UseTemplate”>
<li> ${Name} </li>
</script>
Descrição: Deixe o arquivo HTML limpo apenas com a estrutura acima.
Agora vamos adicionar nossa função Javascript na nossa página Default.aspx como mostra abaixo.
$.getJSON('Service/UsuarioService.svc/GetUsuarioList', GetUsuarioResult);
function GetUsuarioResult(Data) {
$.get('Template/UsuarioTemplate.htm', function (Template) {
$('#UserList').append(Template);
$('#UseTemplate').tmpl(Data).appendTo('#UserList');
});
}
Descrição: A função GetUsuarioResult recebe o Objeto JSON da nossa requisição feita no WCF, depois usamos o método get para recuperar nossa template dentro do HTML, o próximo passo foi dar uma append do nosso template na nossa UL com Id: “UserList” .
Agora que temos nosso template na página invocamos a função tmpl com o id do template passando o objetoJSON e novamente fazemos um apeendTo dessa vez passando o Id da nossa UL.
Obs: Para que o exemplo funcione com perfeição faça o Download dos pluigins que vão estar no final do artigo e adicione na página Default.aspx a estrutura HTML abaixo.
<ul id=”UserList”>
</ul>
Agora e só executar o projeto e apreciar como é possível cada vez mais deixar de usar os controles do Dot.Netque renderizam milhares de HTML indesejados, espero que tenham gostado qualquer duvida não deixe de comentar.
