Sistema de enquete com ASP.NET MVC

Neste artigo veremos como criar um sistema de enquete utilizando o ASP.NET MVC e de forma auxiliar, o Bootstrap, o jQuery e, obviamente, Ajax para enviar as respostas de uma enquete fictícia.

por Joel Rodrigues

Navegando pela internet, não é difícil encontrarmos em sites algum tipo de enquete, geralmente em um espaço discreto da página, com o objetivo, geralmente, de coletar a opinião do visitante a respeito de um tema ou produto. O mesmo estilo de formulário é encontrado, por exemplo, para o cadastro de e-mails em newsletters, onde o visitante se cadastra para receber mais informações ou novidades a respeito daquele site. Geralmente essas enquete e formulários não são de preenchimento obrigatório (quando são obrigatórios, dependendo muito de seu intuito, acabam fazendo com que o usuário desista de visitar aquela página).

Outra característica desse tipo de formulário é que seu envio não pode atrapalhar a visualização da página principal que o visitante está vendo. Se for adicionado apenas um form apontando para uma certa action, ao ser submetido, toda a página será recarregada (ou redirecionada). Para isso, é necessário que o envio das informações seja feito de forma assíncrona, via Ajax, sem que o visitante precise deixar a página atual.

Neste artigo veremos como criar um sistema desse tipo utilizando o ASP.NET MVC, utilizando de forma auxiliar o Bootstrap, jQuery e, obviamente, Ajax para enviar as respostas de uma enquete fictícia.

Para acompanhar o exemplo que será desenvolvido aqui, crie uma nova ASP.NET Web Application com o template MVC. No controller Home criaremos uma nova action que receberá como parâmetro um valor inteiro, representando a opção selecionada na view. Aqui apenas retornaremos uma mensagem informando do recebimento da resposta, mas em uma implementação real, neste ponto poderíamos fazer as devidas operações de leitura e gravação no banco de dados. Esta action deverá estar marcada com o atributo HttpPost, como mostra a Listagem 1, e retornará apenas uma string, pois neste caso não há necessidade de um ActionResult mais complexo.

Listagem 1. Action responsável por receber as respostas da enquete

  [HttpPost]
  public string ResponderEnquete(int opcao)
  {
      return "Obrigado! Você escolheu a opção " + opcao.ToString();
  }

Feito isso, abra a view Home/Index e altere seu conteúdo central, que fica logo abaixo da div com classe junbotron, de acordo com a Listagem 2. Nessa listagem, o trecho que mais nos interessa é o que está contido na div com classe col-md-2. Nessa div adicionamos um panel (do Bootstrap) com alguns inputs do tipo radio e um botão para submeter as informações. Note que não temos um form, pelo motivo já apresentado.

Listagem 2. Trecho da View Index

  <div class="row">
      <div class="col-md-10">
          <h2>Getting started</h2>
          <p>
              ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
              enables a clean separation of concerns and gives you full control over markup
              for enjoyable, agile development.
          </p>
          <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
      </div>
      <div class="col-md-2">
          <div class="panel panel-primary" id="painel-enquete">
              <div class="panel-heading">
                  <p>Enquete</p>
              </div>
              <div class="panel-body">
                  <p>Escolha uma das opções abaixo:</p>
                  <input type="radio" name="opcao" value="1" checked/>Opção 1<br/>
                  <input type="radio" name="opcao" value="2" />Opção 2<br />
                  <input type="radio" name="opcao" value="3" />Opção 3<br />
              </div>
              <div class="panel-footer">
                  <button class="btn btn-primary" id="btnEnviarEnquete">Enviar</button>
              </div>
          </div>
      </div>
  </div>

Se executarmos a aplicação agora, teremos uma interface igual à que mostrada na Figura 1, com a enquete à direita.

Figura 1. Página inicial com enquete para ser respondida

Agora, voltemos à view Home/Index e vamos codificar o script responsável por enviar a resposta da enquete e receber o retorno da action, exibindo-o em seguida dentro do panel.

Após todo conteúdo da view, adicione o código contido na Listagem 3. Nesse script recuperamos a opção que foi selecionada (usando o seletor de tipo type=radio e a pseudo-classe :checked) e a enviamos via Ajax, utilizando jQuery. Ao fim da requisição assíncrona, exibimos a mensagem de retorno no painel e escondemos o botão Enviar.

Listagem 3. Script para enviar a resposta da enquete

@section scripts{
      <script>
          $(function () {
              $("#btnEnviarEnquete").click(function(){
                  var opc = $("#painel-enquete input[type=radio]:checked").val();
                  $.ajax({
                      type: "POST",
                      url: "ResponderEnquete",
                      data:{opcao:opc}
                  }).done(function (msg) {
                      $("#painel-enquete .panel-body").html("<p>" + msg + "<p>");
                      $("#painel-enquete .panel-footer").hide();
                  });
              });
              
          });
      </script>
  }

Ao clicarmos no botão Enviar, teremos como resultado algo semelhante à Figura 2.

Figura 2. Enquete já respondida

Neste caso, nossa action é bastante simples e nos retorna um resultado rapidamente. Mas dependendo do cenário, o tempo de resposta pode variar, e por isso é fundamental que realizemos a submissão das informações de forma assíncrona. Para simular um tempo de resposta maior, adicione a seguinte linha de código antes do return da action ResponderEnquete:

System.Threading.Thread.Sleep(5000);

Em seguida, no script jQuery, adicione q seguinte linha antes de enviar as informações para action (após recuperar o valor selecionado):

$("#painel-enquete .panel-body").html("<p>Aguarde!<p><p>Enviando resposta...</p>");

Agora, se executarmos novamente a aplicação e clicarmos no botão Enviar, veremos uma mensagem de “Aguarde” (Figura 3), até que a action retorne um resultado, que será capturado na função de callback done.

Figura 3. Envio da enquete com tempo de espera maior

Note que durante o envio das informações, o usuário pode continuar acessando as demais partes da página, sem que haja “travamento” da interface.

Aqui desenvolvemos um exemplo bastante simples, mas que pode ser utilizado como base para a implementação de casos mais complexos, apenas seguindo os conceitos que foram apresentados.

Links

jQuery

http://api.jquery.com/jquery.ajax/