Controle para votação em artigos baseado no Atlas
Ramon Durães (e-mail) possui larga experiência em tecnologia Microsoft. Microsoft Most Valuable Professional (MVP), Associate Mentor na 2pc Professional Computing (http://www.2pc.com.br/), onde atua como Arquiteto de soluções. Fundador do grupo de usuários Mutex (http://www.mutex.com.br/). Escreve artigos e ministra treinamentos, além de realizar palestras nos maiores eventos do Brasil.
Conforme estamos abordando ao longo dos artigos sobre Atlas, o desenvolvedor ganhou novas oportunidades para o desenvolvimento de suas aplicações para web. Dentre as novidades encontradas no Atlas para suporte às técnicas do AJAX, utilizaremos hoje o "xml-script", que é novo formato para declaração de JavaScript baseado em valores de propriedades, além dos novos recursos oferecidos para ampliar o suporte na utilização de JavaScript no cliente utilizando um novo modelo de objetos de forma a implementar JavaScript usando mesma experiência que você já possui escrevendo código .NET.
Esse controle que estamos abordando permite que você vote em um artigo escolhendo de acordo com a quantidade de estrelas. Após confirmação com a página estática, é realizado uma requisição para o WebService 'wsRating' que se encarrega de atualizar no banco de dados as informações. Esse controle foi preparado pelo Nikhil Kothari (Arquiteto Atlas). Confira na Figura 01 o controle rodando no browser.
Figura 01 - Controle para votação em artigos.
Todo processamento desse controle no servidor será baseado em consultas ao WebServices. Dessa forma, criamos um simples exemplo para simular o funcionamento, ficando a seu cargo a inserção de codificação para acesso a uma base de dados, confira na Figura 02 o arquivo wsRating.asmx.
Figura 02 - Projeto completo.
Ainda na Figura 02, você vai encontrar o arquivo Rating.js que é a implementação do controle em JavaScript e nossa página de teste que é o arquivo Artigo.aspx.
Conforme Listagem 01, analisando nosso WebServices, você vai encontrar o método SaveRatingID que recebe dois parâmetros. O valor da votação e o código do artigo.
wsRating.cs
|
[WebMethod] public void SaveRatingID(int rating,int ratingID) {// Apenas para demonstração, aqui você fazer |
Listagem 01 - Listando WebSerices 'wsRating'.
O próximo passo agora é avaliarmos o arquivo Rating.js nele implementaremos a nossa classe que será chamada de "Rating". Confira na Listagem 02 alguns pontos importantes desse arquivo. Para ver completo abra diretamente pelo Visual Studio.
Rating.js
|
// Registrando um NameSpace // Criando Classe 'Rating' DotNetSlackers.Rating.initializeBase(this, [ associatedElement ]); // Declarando variáveis // continua... // Definindo GET para retorno de valor this.get_ratingID = function() { // Definindo SET para alterar valor } // continua... // Registrando Classe Rating... |
Listagem 02 - Criando e registrando a classe 'Rating'.
Conforme exemplo apresentado na Listagem 02, você está conferindo o quanto é fácil a implementação com novo modelo proposto pelo Atlas. Dando seqüência, vamos ao arquivo Artigo.aspx, onde temos uma página para testar o controle. Confira na Listagem 03 alguns pontos importantes que vale a pena você verificar, como o ScritpManager onde adicionamentos a referência para o WebServices e logo abaixo a sua utilização no método wsRating.SaveRatingID.
Vale comentar que esse modelo de utilização do WebServices pelo JavaScript está sendo oferecido justamente pelo Atlas, logo em sequencia usando o xml-Script estamos adicionando nosso controle na página.
Artigo.aspx
|
<atlas:ScriptManager ID="sm" runat="server"> <script type="text/javascript"> function ratingControl_rated(sender, e) { .... wsRating.SaveRatingID(ratingControl.get_rating(), } </script> <script type="text/xml-script"> <components> |
Listagem 03 - Testando o controle Rating.
Chegou o momento de colocar suas idéias em prática. Utilizem esse exemplo para construir outros e vamos ampliar o conjunto de controles disponíveis. Outro recurso interessante você pode conferir baixando o Atlas Control Toolkit.
