none
Recibir datos en un textbox con ajax MVC RRS feed

  • Pregunta

  • Hola!

    He estado intentando recibir datos para que los muestre en un texbox al momento de presionar en un botón de "Editar" que tiene cada producto, al hacer esto se despliega un modal pero no logro recibir los datos de dicho producto (simplemente quedan los textbox vacíos).

    Javascript

    $(document).on('click', '.btn-primary', function (event) {
    
            event.preventDefault();
            $('#myModalEdit').modal('show');
            var miElemento = $(this);
     
            $.ajax({
    
                url: "/Producto/Edit",
    
                data: {
                    Id: miElemento.attr("data-id")
                },
    
                dataType: "json",
    
                type: "GET",
    
                success: function (x) {
    
                    $("#id").val(x.producto.Id);
                    $("#nombre").val(x.producto.Nombre);
                    $("#descripcion").val(x.producto.Descripcion);
                    $("#precio").val(x.producto.Precio);
                    $("#stock").val(x.producto.Stock);
    
                },
    
                error: function (xhr, status, errorThrown) {
                    console.log("Error: " + errorThrown);
                    console.log("Status: " + status);
                    console.dir(xhr);
                },
    
            });
        });

    Controlador

            [HttpGet,ActionName("Edit")]
            public ActionResult Edit(int? id)
            {
                if (id == null)
                {
                    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                }
                Producto producto = db.Producto.Find(id);
                if (producto == null)
                {
                    return HttpNotFound();
                }
    
                return Json(new { success = true, producto = producto }, JsonRequestBehavior.AllowGet);
            }

    Vista

    <!-- Button Edit -->
    <a class="btn btn-primary" data-id="@item.Id" href="/Producto/Edit/1">Editar <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>
    
    
    <!-- Modal Edit -->
    <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Editar Producto</h4>
                </div>
                <div class="modal-body">
                    <form id="formEdit" method="post">
                        <div class="form-group" style="visibility:collapse">
                            <label for="recipient-name" class="control-label">Id:</label>
                            <input type="text" class="form-control" id="id" name="Id">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Nombre:</label>
                            <input type="text" class="form-control" id="nombre" name="Nombre">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Descripción:</label>
                            <input type="text" class="form-control" id="descripcion" name="Descripcion">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Precio:</label>
                            <input type="text" class="form-control" id="precio" name="Precio">
    
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">Stock:</label>
                            <input type="text" class="form-control" id="stock" name="Stock">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <label id="mensajeError" style="align-content:center" class="control-label"></label>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="submit" id="btnEditar" class="btn btn-success">Guardar</button>
                </div>
            </div>
        </div>
    </div>

    Saludos!


    lunes, 7 de noviembre de 2016 16:08

Todas las respuestas

  • hola

    si usas el developer tools del browser (al cual accedes con F12) podrias evaluar si es invocado correctamente el action, usando la solapa "network", quizas la invocacion al servicio no este respondiendo

    si defines un alert() o console.log() en el success del $.ajax puede evaluar que ingresa por alli

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    lunes, 7 de noviembre de 2016 16:56
  • Gracias, voy a intentar.
    lunes, 7 de noviembre de 2016 17:11