Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

Implementação de alteração de produto

Senhores, criei um tópico para fazer alteração do produto com modal do bootstrap https://cursos.alura.com.br/forum/topico-implementacao-de-alteracao-de-produto-41353 o instrutor respondeu ok. porém tentei implementar e houve erros que procurei na internet e achei este link no stack de uma pessoa que teve o mesmo problema https://stackoverflow.com/questions/37761675/load-start-new-path Tentei a=implementar a solução passada pelo link mas sem sucesso, alguém sabe dizer qual seria o erro?

Index

@model IEnumerable<CaelumEstoque.Models.Prod>


@{ 
    Layout = null;
}

<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.Codigo)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Descricao)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Preco)
    </th>
    <th></th>
</tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Codigo)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Descricao)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Preco)
        </td>
        <td>
            <button class="btn btn-default details" data-id="@item.Codigo"><i class="glyphicon glyphicon-file"></i></button>
            <button class="btn btn-danger delete" data-id="@item.Codigo"><i class="glyphicon glyphicon-trash"></i></button>
            <button class="btn btn-primary edit" data-id="@item.Codigo"><i class="glyphicon glyphicon-edit"></i></button>


    </td>
            </tr>
        }
    </table>

<div class="modal" id="modal">


</div>

<link rel="stylesheet" type="text/css" href="~/Content/Css/bootstrap.css">

@section scripts{
    <script>
        $(function () {
            $(".details").click(function () {
                var id = $(this).attr("data-id");
                $("#modal").load("/Prod/Details?id=" + id, function () {
                    $("#modal").modal("show");
                })
            });
        })
    </script>
}

Controller

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

namespace CaelumEstoque.Controllers
{
    public class ProdController : Controller
    {

        public static List<Prod> _listaProdutos = new List<Prod>()
        {
            new Prod { Codigo=01, Descricao="Produto 1", Preco=10 },
            new Prod { Codigo=02, Descricao="Produto 2", Preco=15 },
            new Prod { Codigo=03, Descricao="Produto 3", Preco=20 }
        };
        // GET: Prod
        public ActionResult Index()
        {

            IList<Prod> lista = _listaProdutos;

            return View(lista);
        }

        public ActionResult Details(int id) {

            var existe = _listaProdutos.Where(x => x.Codigo == id );

            return View("Details");
        }
    }
}

Model

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;

namespace CaelumEstoque.Models
{
    public class Prod
    {

        private int _codigo;
        [Display(Name = "Código")]
        public int Codigo
        {
            get { return _codigo; }
            set { _codigo = value; }
        }

        private string _descricao;
        [Display(Name = "Descrição")]
        public string Descricao
        {
            get { return _descricao; }
            set { _descricao = value; }
        }

        private decimal _preco;
        [Display(Name = "Preço Unitário")]
        public decimal Preco
        {
            get { return _preco; }
            set { _preco = value; }
        }



    }
}
7 respostas

Olá Lorran,

você chegou a fazer o Details.cshtml para ter a view correspondente ao método public ActionResult Details(int id) do ProdController? Outra coisa que eu notei que faltou é passar o produto que você buscou por id/Codigo para a View saber com qual objeto você está trabalhando.

Olá Lucas, sim

@model CaelumEstoque.Models.Prod


@{
    Layout = null;
    ViewBag.Title = "Details";
}

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Detalhes do produto</h4>
        </div>
        <div class="modal-body">
            <p>@Html.DisplayNameFor(model => model.Codigo) : @Html.DisplayFor(model => model.Codigo)</p>
            <p>@Html.DisplayNameFor(model => model.Descricao) : @Html.DisplayFor(model => model.Descricao)</p>
            <p>@Html.DisplayNameFor(model => model.Preco) : @Html.DisplayFor(model => model.Preco)</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

<link rel="stylesheet" type="text/css" href="~/Content/Css/bootstrap.css">
<script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script>
using CaelumEstoque.DAO;
using CaelumEstoque.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace CaelumEstoque.Controllers
{
    public class ProdController : Controller
    {

        public static List<Prod> _listaProdutos = new List<Prod>()
        {
            new Prod { Codigo=01, Descricao="Produto 1", Preco=10 },
            new Prod { Codigo=02, Descricao="Produto 2", Preco=15 },
            new Prod { Codigo=03, Descricao="Produto 3", Preco=20 }
        };
        // GET: Prod
        public ActionResult Index()
        {

            IList<Prod> lista = _listaProdutos;

            return View(lista);
        }


        public ActionResult Details(int id) {

            var existe = _listaProdutos.Where(x => x.Codigo == id );

            return View(existe);
        }
    }
}

Deu no mesmo o botão não tem ação

Mas repare nisso: http://prntscr.com/fsvwpi

Parece que ele não está conseguindo achar a página.

Olá, Lorran

Por favor, no seu navegador abra ferramentas do desenvolvedor (tecla F12) e rode sua aplicação e veja na aba Console se aparecem quaisquer erros. Se aparecerem, por favor poste aqui no fórum para analisarmos melhor.

Faz dois testes para ver se funcionam. O primeiro deles é acessa na mão o Details para ver se ele constroi a página direitinho, tipo:

localhost:<porta que ele subiu>/Prod/Details?id=1

Se ele der algum erro aqui, então é o Details que está quebrado. Só que se ele exibir a página bonitinho, então provavelmente é o javascript que não está se comportando direito. Ai o segundo teste seria tirar o "show" na hora de invocar o modal no js:

$("#modal").load("/Prod/Details?id=" + id, function () {
    $("#modal").modal();
})

Vou testar, vlw

Marcelo, eu já postei a imagem do erro no post acima do seu da um erro 404

solução!

Problema resolvido pessoal

@model IEnumerable<CaelumEstoque.Models.Prod>




<table class="table">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.Codigo)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Descricao)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.Preco)
    </th>
    <th></th>
</tr>

@foreach (var item in Model)
{
    <tr id="prod@(item.Codigo)">
        <td>
            @Html.DisplayFor(modelItem => item.Codigo)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Descricao)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Preco)
        </td>
        <td>
                <a href="#" class="btn btn-default details" data-url="@Url.Action("Details", "Prod", new { id = item.Codigo })">Detalhe</a>
                <a href="#" class="btn btn-primary edit" data-url="@Url.Action("Edit", "Prod", new { id = item.Codigo })"><i class="glyphicon glyphicon-edit"></i></a>
                @*<button class="btn btn-default details" data-id="@item.Codigo"><i class="glyphicon glyphicon-file"></i></button>
                <button class="btn btn-danger delete" data-id="@item.Codigo"><i class="glyphicon glyphicon-trash"></i></button>
                <button class="btn btn-primary edit" data-id="@item.Codigo"><i class="glyphicon glyphicon-edit"></i></button>*@


</td>
            </tr>
        }
    </table>

<div class="modal" id="modal">

</div>


<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>


    $(function () {
        $('.details').click(function () { // class name selector
            var url = $(this).data('url'); // use data(), not attr()
            $("#modal").load(url, function () {
                $("#modal").modal("show");
            })
        });
    })

    $(".edit").click(function () {
        var url = $(this).data('url'); // use data(), not attr()
        $("#modal").load(url, function () {
            $("#modal").modal("show");
        })
    })


</script>
@model CaelumEstoque.Models.Prod

@{ 
    Layout = null;
}
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title">Detalhes do produto</h4>
        </div>
        <div class="modal-body">
            <p>@Html.DisplayNameFor(model => model.Codigo) : @Html.DisplayFor(model => model.Codigo)</p>
            <p>@Html.DisplayNameFor(model => model.Descricao) : @Html.DisplayFor(model => model.Descricao)</p>
            <p>@Html.DisplayNameFor(model => model.Preco) : @Html.DisplayFor(model => model.Preco)</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software