Trabalhando com template utilizando Ajax e WCF

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> $ </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.