Jquery code does not call Method in the controller

Question

I’m not sure how to use a method jQuery. I want to get a list of countries. Follow the code to help you know where I’m going wrong.

  < script type = "text/javascript" >
    $(document).ready(function() {
      $('#btnPais').click(function(e) {
          $('#btnPais').hide();
          $('#mensagem').html('<span class="mensagem">Aguarde, carregando ..</span>');

          $.getJSON('/Usuario/ObterPaises', function(dados) {
            if (dados.length > 0) {
              var option = '<option value="">Escolha um Pais </option>';
              $.each(data, function(i, obj) {
                option += '<option value="' + obj.PaisId + '">' + obj.Nome + "- " + obj.Sigla + '</option>';
              })
              $('#mensagem').html('<span class="mensagem">Total de paises encontrados.: ' + dados.length + '</span>');
              $('#cmbPais').html(option);
            } else {
              $('#mensagem').html('<span class="mensagem">Não foi encontrado nenhum país</span>');
            }
          })
        })
        //<!-- Resetar Selects -->

      function Reset() {
        $('#cmbPais').empty().append('<option>Carregar Países</option>>');
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="pais">
  <label>Selecione o País:</label>
  <select id="cmbPais">
    <option>Carregar Paises</option>
  </select>
  <input type="button" value="carregar pais" id="btnPais" class="bottom" />
</div>

and in my Controller I have :

 [HttpGet]
 public JsonResult ObterPaises()
{
   Comandos cm = new Comandos();
   string sql = "Select Nome FROM TPais";
   List<Pais> pais = new List<Pais>();

   var dr = cm.SelectReader(sql, CommandType.Text);
   while (dr.Read())
   {
      pais.Add(new Pais
      {
          PaisId = (int)dr[0],
          Nome = dr[1].ToString(),
          Sigla = dr[2].ToString()
      });
    }
    return Json(pais, JsonRequestBehavior.AllowGet);
}

According to what I researched, using this code, it was to return me the right list, however, nor enter the method Get countries controller’s.

Open to suggestions that can lead me to understand how to do.

Answer 1

Option 1: Change controller return:

[HttpGet]
public JsonResult ObterPaises()
{
   Comandos cm = new Comandos();
   string sql = "Select id, nome, sigla FROM TPais";

   var dr = cm.SelectReader(sql, CommandType.Text);
   var sb = new StringBuilder();
   while (dr.Read())
   {
      sb.AppendFormat("<option value={0}>{1} - {2}", dr[0], dr[1].ToString(), dr[2].ToString())
    }
    return Json(sb.ToString(), JsonRequestBehavior.AllowGet);
}

And in the view:

<script type = "text/javascript">
$(document).ready(function() {
  $('#btnPais').click(function(e) {
      $('#btnPais').hide();
      $('#mensagem').html('<span class="mensagem">Aguarde, carregando ..</span>');

      $.getJSON('/Usuario/ObterPaises', function(dados) {
        if (dados.length > 0) {
          $('#cmbPais').html("<option value=''>Selecione...</option>"); //opcional
          $('#cmbPais').append(dados);
          $('#mensagem').html('<span class="mensagem">Total de paises encontrados.: ' + dados.length + '</span>');
          $('#cmbPais').html(option);
        } else {
          $('#mensagem').html('<span class="mensagem">Não foi encontrado nenhum país</span>');
        }
      })
    })

});

Option 2: Change the current method to look at your get return variable:

$.getJSON('/Usuario/ObterPaises', function(dados) {
        if (dados.length > 0) {
          var option = '<option value="">Escolha um Pais </option>';
          $.each(dados.pais, function(i, obj) { //Mudança aqui <<
            option += '<option value="' + obj.PaisId + '">' + obj.Nome + "- " + obj.Sigla + '</option>';
          })
          $('#mensagem').html('<span class="mensagem">Total de paises encontrados.: ' + dados.length + '</span>');
          $('#cmbPais').html(option);
        } else {
          $('#mensagem').html('<span class="mensagem">Não foi encontrado nenhum país</span>');
        }
})