1
resposta

Aula 9 Ajax

Meu código só decrementa quando atualizo a página! segue meu código: Index

@model IList<CaelumEstoque.Models.Produto>

        <table class="table table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Nome</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 id="Quantidade@(produto.Id);">@produto.Quantidade</td>
                        <td><a href="#" onclick="decrementa(@produto.Id);">Decrementar</a></td>
                    </tr>
                }

            </tbody>

        </table>

        <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            function decrementa(produtoId) {
                var url = "@Url.Action("DecrementaQtd", "Produto")";
                $.post(url,{id : produtoId},atualiza);
            }

            function atualiza(resposta){
                $("#quantidade" + resposta.Id).html(resposta.Quantidade);

            }

        </script>

ProdutoController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CaelumEstoque.DAO;
using CaelumEstoque.Models;

namespace CaelumEstoque.Controllers
{
    public class ProdutoController : Controller
    {
        // GET: Produto
        [Route("produtos", Name="ListaProdutos")]
        public ActionResult Index()
        {
            ProdutosDAO dao = new ProdutosDAO();
             IList<Produto> produtos = dao.Lista();
            return View(produtos);
        }

        public ActionResult Form()
        {

            CategoriasDAO categoriasDAO = new CategoriasDAO();
            IList<CategoriaDoProduto> categorias = categoriasDAO.Lista();
            ViewBag.Categorias = categorias;
            ViewBag.Produto = new Produto();
            return View();
        }
        [HttpPost]
        public ActionResult Adiciona(Produto produto)
        {
            int idDaInformatica = 1;
            if (produto.CategoriaId.Equals(idDaInformatica) && produto.Preco < 100)
            {
                ModelState.AddModelError("produto.InformaticaComPrecoInvalido", "Produtos da categoria informática devem ter preço maior do que 100");
            }
            if (ModelState.IsValid)
            {
                ProdutosDAO dao = new ProdutosDAO();
                dao.Adiciona(produto);
                return RedirectToAction("Index");
            }
            else
            {
                ViewBag.Produto = produto;
                CategoriasDAO categoriasDAO = new CategoriasDAO();
                ViewBag.Categorias = categoriasDAO.Lista();
                return View("Form");
            }
        }
        [Route("produtos/{id}", Name ="VisualizaProduto")]
        public ActionResult Visualiza(int id)
        {
            ProdutosDAO dao = new ProdutosDAO();
            Produto produto = dao.BuscaPorId(id);
            ViewBag.Produto = produto;
            return View();
        }

        public ActionResult DecrementaQtd(int id)
        {
            ProdutosDAO dao = new ProdutosDAO();
            Produto produto = dao.BuscaPorId(id);
            produto.Quantidade--;
            dao.Atualiza(produto);
            return Json(produto);

        }
    }
}
1 resposta

Olá Thiago,

o problema provavelmente está na sua função javascript atualiza. Por enquanto ele procura pelo elemento HTML com id quantidade<id do produto>, com q minúsculo:

function atualiza(resposta){
       $("#quantidade" + resposta.Id).html(resposta.Quantidade);
 }

Mas o seu elemento HTML está com id Quantidade<id do produto>, com Q maiúsculo:

<td id="Quantidade@(produto.Id);">@produto.Quantidade</td>

Para o javascript encontrar um elemento pelo id eles precisam estar exatamente iguais, até mesmo as letras maiúsculas e minúsculas. Veja se arrumando isso decrementa sem ter que recarregar a página