4

Fiz a seguinte função:

$("#CategoryList").change(function () {
$("#SubCategoryDropDown").empty();
$.ajax({
    dataType: "json",
    url: '@Url.Action("GetSubCategory", "ProjectSubCategories")', 
    type: 'POST',
    data: { id: $("#CategoryList").val() },
    success: function (SubCategories) {
        $("#SubCategoryDropDown").append('<option value="0">' + '--Selecione uma SubCategoria--' + '</option>');
        $.each(SubCategories, function (i, SubCategory) {
            $("#SubCategoryDropDown").append('<option value="' + SubCategory.Value + '">' + SubCategory.Text + '</option>');
        });
    },                
    error: function (ex) {                    
        alert('Falha ao retornar Subcategoria.' + ex);
    }
});

Controller:

public JsonResult GetSubCategory(int id)
{
    var SubCategoryDropDown = new List<ProjectSubCategory>();
    using (var context = new ApplicationDbContext())
    {
        SubCategoryDropDown = context.ProjectSubCategories.Where(x => x.CategoryId.Equals(id)).ToList();
    }
    return Json(new SelectList(SubCategoryDropDown, "SubCategoryId", "SubCategoryDescription"));
    } 

Meu problema é que ela sempre cai na exceção... inserir a descrição da imagem aqui

inserir a descrição da imagem aqui Alguem pode me ajudar? Grato!

Já descobri que o problema está na montagem do 'setRequestHeader' no 'XMLHttpRequest. Ele não está funcionando com HTTPS.

Quando faço o seguinte código funciona:

var http = new XMLHttpRequest();
var url = "https://localhost:44399/ProjectSubCategories/GetSubCategory";
var params = "id="+$("#CategoryList").val();
http.open("POST", url, true);    
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");    
http.onreadystatechange = function() {//Call a function when the state changes.
    if(http.readyState == 4 && http.status == 200) {
         console.log(http.responseText)
         ProjectSubCategories = JSON.parse(http.responseText);
         $("#SubCategoryDropDown").append('<option value="0">' + '--Selecione uma Subcategoria--' + '</option>');
                $.each(ProjectSubCategories, function (i,ProjectSubCategory) {
                    $("#SubCategoryDropDown").append('<option value="' + ProjectSubCategory.Value + '">' + ProjectSubCategory.Text + '</option>');
                    // here we are adding option for States
                });
    }
}
http.send(params);

Alguém tem ideia de solução para usar o Json?

6
  • Invez de utilizar o alert, printa o erro no console utilizando o console.log(ex) ai você vai saber qual é o erro que está dando, complemente a pergunta com esse resultado, para que a comunidade posso te ajudar melhor.
    – Tiago S
    19/08/2017 às 21:23
  • Adicionei o erro... Continuo sem entender o que está errado. 19/08/2017 às 21:51
  • Pelo que dei uma pesquisa, acredito que o erro é por causa do SelectList, tente retornar o json de SubCategoryDropDown e lá na sua view você acessa as propriedades diretamente
    – Tiago S
    20/08/2017 às 1:03
  • Uma coisa que notei, se for padrão, esse método está aceitando somente GET, e você passa POST no ajax. Tenta anotar o método com [HttpPost] ver se ajuda. Se não, tenta mudar o type do ajax pra 'GET' 22/08/2017 às 11:31
  • Consegui resolver... O erro era 404, mudei o dataType para html e funcionou. 22/08/2017 às 15:56

1 Resposta 1

1

Sua API deve retornar um JSON, e não um objeto C#.

public JsonResult GetSubCategory(int id)
{
    var subCategories = new List<ProjectSubCategory>();
    using (var context = new ApplicationDbContext())
    {
        subCategories = context.ProjectSubCategories
            .Where(x => x.CategoryId.Equals(id))
            .ToList();
    }
    return Json(subCategories);
} 

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .