Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Problema requisição Ajax

Referente a aula Requisições Elegantes com Ajax do curso MVC: Montei todo fonte, conforme indicado na aula, porém quando clico no link para decrementar não acontece nada. Debugando o java script, a seguinte mensagem de erro (trace) é exibida: Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://localhost:49653/Produto/DecrementaQuantidade POST http://localhost:49653/Produto/DecrementaQuantidade 500 (Internal Server Error) jquery-2.1.1.min.js:4 k.cors.a.crossDomain.send jquery-2.1.1.min.js:4 n.extend.ajax jquery-2.1.1.min.js:4 n.(anonymous function) jquery-2.1.1.min.js:4 decrementaQuantidade (index):386 onclick (index):73

4 respostas

Segue meu código fonte(Index.cshtml)

@model List<CaelumEstoque.Models.Produto>
@{
    Layout = "~/views/_LayoutEstoque.cshtml";
}

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Nome do Produto</th>
            <th>Preço</th>
            <th>Descrição</th>
            <th>Categoria</th>
            <th>Quantidade</th>
            <th></th>
        </tr>
    </thead>

    <tbody>
        @foreach (var produto in Model)
        {
            <tr>
                <td>@produto.Id</td>                            <td>@Html.RouteLink(produto.Nome, "VisualizaProduto", new { id = produto.Id })</td>
                <td>@produto.Preco</td>
                <td>@produto.Descricao</td>
                <td>@produto.Categoria.Nome</td>
                <td id="quantidade_@(produto.Id)">@produto.Quantidade</td>
                <td><a href="#" onclick="decrementaQuantidade(@produto.Id)">Decrementa Quantidade</a></td>
            </tr>

        }


    </tbody>


</table>
</html>

<script src="../Scripts/jquery-2.1.1.min.js"></script>
<script>
    function decrementaQuantidade(produtoId) {
        alert(produtoId);
        var parametros = { produtoId: produtoId };
        $.post("@Url.Action("DecrementaQuantidade", "Produto")", parametros, atualizaQuantidade);


    }




    function atualizaQuantidade() {

        var elementoQuantidade = $("#quantidade_" + produto.Id);
        elementoQuantidade.html(produto.Quantidade);


    }


</script>
<script src="../Scripts/jquery-2.1.1.min.js"></script>

Código do ProdutoController

        [HttpPost]
            public ActionResult DecrementaQuantidade(int produtoId)
        {

                ProdutoDao dao = new ProdutoDao();
                Produto produto = dao.BuscaPorId(produtoId);
                if (produto.Quantidade > 0)
                {
                    produto.Quantidade--;
                }
                dao.Atualiza(produto);
                return Json(produto);



        }
solução

Amigão pelo o que eu vi aqui, sem rodar seu código no método atualizaQuantidade() você não está recebendo o produto para atualizar, tenta mais ou menos com o código abaixo..

    function atualizaQuantidade(produto) {
        $(("#quantidade_" + produto.Id)).html(produto.Quantidade);
    }

    function decrementaQuantidade(produtoId) {
        $.post("/Produto/DecrementaQuantidade", { produtoId: produtoId }, atualizaAPagina);
    }

qualquer duvida retorne..

só para acrescentar e realmente responder seu código JS está ok, acho que o problema que você está tendo é realmente pela falta de receber o parâmetro no seu callback.. aguardo retorno

Brunno, muito obrigado. A sua dica foi parte da solução. O código JS ficou da forma abaixo, porém tinha um outro problema que relato após o código.

<script>
    function decrementaQuantidade(produtoId) {
        var parametros = { produtoId: produtoId };       
      $.post("@Url.Action("DecrementaQuantidade", "Produto")", parametros, atualizaQuantidade);             
    }


    function atualizaQuantidade(produto) {
        var elementoQuantidade = $("#quantidade_" + produto.Id);
        elementoQuantidade.html(produto.Quantidade);
    }  
</script>

O outro problema que encontrei, foi referente ao global.asax. No método RegisterRoutes() tive que colocar a rota Default, no topo e as demais abaixo. Pois toda vez que o servidor solicitava a action 'DecrementaQuantidade' do Controller Produto, ele não encontrava e não fazia nada; Então meu metodo ficou da seguinte forma:

        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            ); //esse método tem que vir primeiro para funcionar.

            routes.MapRoute("ListaProdutos",
                "produtos", new { controller = "Produto", action = "Index" }); //Nome da rota, url, objeto controller e action

            routes.MapRoute("VisualizaProduto",
                "produto/{id}", new { controller = "Produto", action = "Visualiza" }); // a url com {id} indica que recebe id como parametro.

          }

obrigado!