0

estoy trabajando con asp.net mvc y llamo a una función desde la vista pero al crear puntos de interrupción en el controller cuando ejecuto el proyecto nunca entra en esa parte de código, no estoy muy ambientado al mvc y quería saber si alguien puede ayudarme.

cree un "a" donde estoy ejecutando mi función, este mismo me abre un modal y envía un parámetro a la función.

<a data-toggle="modal" data-target="#exampleModal" class="btn btn-danger" href="@Url.Action("Actualizar", "Empresa", new { id = item.idempresa })">Editar</a>

El controller donde esta mi función Actualizar es este:

public ActionResult Actualizar(int id)
    {
        try
        {
            using (var db = new bolsautecEntities())
            {
                empresas emp = db.empresas.Find(id);
                return View(emp);
            }
        }
        catch (Exception ex)
        {
            throw(ex);
        }  
    }

Esta función me pondrá en el modal la información que está en cada registro según el id que le mando como parámetro, antes lo usaba de la manera que, me mandaba a otra vista pero decidí crearle un modal y es ahí donde quisiera actualizar la información de cada registro pero no se porque no logró ejecutar esa función del controller, hice que entrará a la función con un Html.Action pero este me pedía una vista parecida a la que le mandaba cuando tenia la vista de actualizar, pero quiero hacer estos procesos en la misma vista y con el modal, si alguien puede brindarme una opinión u orientación se lo agradecere

en mis vista esta así

<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.NuevaEmpresa.idempresa)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.NuevaEmpresa.empresa)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.NuevaEmpresa.giro)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.NuevaEmpresa.nomEncargado)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.NuevaEmpresa.direccion)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.NuevaEmpresa.telefono)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.NuevaEmpresa.correo)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model.Empresas)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.idempresa)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.empresa)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.giro)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.nomEncargado)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.direccion)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.telefono)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.correo)
            </td>
            <td>
                <a data-toggle="modal" data-target="#exampleModal" class="btn btn-danger" onclick="Actualizar(@item.idempresa)">Editar</a> |
                @Html.ActionLink("Details", "detalles", new { id = item.idempresa }) |
                @Html.ActionLink("Delete", "eliminar ", new { id = item.idempresa }, new { @class = "aElimina" })
            </td>
        </tr>
    }
</table>

@* Creación de el modal*@
<div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">

            @* Modal del titulo*@
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Editar</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            @* Cuerpo del modal*@
            <div class="modal-body">

                @* El Action del form se conecta con la función del controller, sin el action no entra a la función*@
                <form action="/Empresa/Actualizar" method="post">
                    @using (Html.BeginForm())
                    {
                        <div class="form-row" style="padding-left:12px">
                            <div class="form-group col-md-2" aria-hidden="true">
                                <label for="lidempresa">idEmpresa</label>
                                <input type="text" id="idempresa" name="idempresa" />
                            </div>
                            <div class="form-group col-md-2">
                                <label for="lempresa">Empresa</label>
                                <input type="text" id="empresa" name="empresa" />
                            </div>

                            <div class="form-group col-md-3">
                                <label for="lnomEncargado">Encargado</label>
                                <input type="text" id="nomEncargado" name="nomEncargado" />
                            </div>
                        </div>
                        <div class="form-row" style="padding-left:9px">

                            <div class="form-group col-md-2">
                                <label for="ltelefono">Telefono</label>
                                <input type="text" id="telefono" name="telefono" />
                            </div>

                        </div>
                        <div class="form-row" style="padding-left:9px">
                            <div class="mb-3 col-md-10">
                                <label for="lgiro">Giro</label>
                                <input type="text" id="giro" name="giro" />
                            </div>

                            <div class="mb-3 col-md-10">
                                <label for="ldireccion">Direccion</label>
                                <input type="text" id="direccion" name="direccion" />
                            </div>
                        </div>
                        <div class="form-row float-right">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
                            <input type="submit" name="Guardar" class="btn btn-danger" value="Guardar" style="margin-left:5px" />
                        </div>
                    }
                </form>
            </div>
        </div>
    </div>
</div>

la función la deje de la siguiente manera:

function Actualizar(id) {
    $.ajax({
        url: "@Url.Action("Actualizar", "Empresa")" + "?id=" + id;
        success: function (respuesta) {
            $("#idempresa").val(respuesta.idempresa);
            $("#empresa").val(respuesta.empresa);
            $("#nomEncargado").val(respuesta.nomEncargado);
            $("#telefono").val(respuesta.telefono);
            $("#giro").val(respuesta.giro);
            $("#direccion").val(respuesta.direccion);

            $("#exampleModal").modal("show");
        }
    });
}

Y el controller así:

public ActionResult Actualizar(int id)
    {
        try
        {
            using (var db = new bolsautecEntities())
            {
                empresas emp = db.empresas.Find(id);
                //return View(emp);
                return Json(emp);
            }
        }
        catch (Exception ex)
        {
            throw(ex);
        }  
    }

Mis dos funciones en el controller.

public ActionResult Actualizar(int id)
    {
        try
        {
            using (var db = new bolsautecEntities())
            {
                empresas emp = db.empresas.Find(id);
                //return View(emp);
                return Json(emp);
            }
        }
        catch (Exception ex)
        {
            throw(ex);
        }  
    }


    [HttpPost]

    public ActionResult Actualizar(empresas e)
    {
        //editar empresas
        try
        {
            using (var db = new bolsautecEntities())
            {
                empresas em = db.empresas.Find(e.idempresa);

                em.empresa = e.empresa;                 
                em.nomEncargado = e.nomEncargado; 
                em.telefono = e.telefono;
                em.giro = e.giro;
                em.direccion = e.direccion;

                db.SaveChanges();

                //return RedirectToAction("Index");
                return View();
            }
        }
        catch (Exception ex)
        {
            throw(ex);
        }
    }

Función ajax guardar

function Guardar() {
    alert("entre");
    $.ajax({
        url: "@Url.Action("Guardar", "Empresa")",
        type: "post",
        dataType: "json",
        data: JSON.stringify({
            idempresa: $("#idempresa").val(),
            empresa: $("#empresa").val(),
            nomEncargado: $("#nomEncargado").val(),
            telefono: $("#telefono").val(),
            giro: $("#giro").val(),
            direccion: $("#direccion").val()
        }),
    });
}

1 respuesta 1

0

Cuando pones código de C# en la vista por ejemplo Url.Action(), ese código se procesa en el servidor antes que la vista se envíe al cliente. En tu ejemplo, el servidor convierte Url.Action() en una url normal, por lo tanto, la vista no puede llamar directamente acciones del controlador.

La forma de llamar acciones del controlador desde la vista es haciendo peticiones ajax.

Para hacer las peticiones ajax tu acción del controlador no debe retornar un View sino un JSON return Json(emp); así no te pedirá una vista como en el error que mencionas.

Ejemplo petición ajax:

function editar(id){
    $.ajax({
        url: `http://jsonplaceholder.typicode.com/users/${id}`,
        success:function(respuesta){
        
          $("#nombre").val(respuesta.name);
          $("#email").val(respuesta.email);
          
          
          $("#exampleModal").modal('show');
        
        
        }
    
    });



}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    
</head>
  <body>
   
   <table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Nombre</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Ejemplo 1</td>
      <td>
      <button class="btn btn-primary"        onclick="editar(1)">Editar</button>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Ejemplo 2</td>
      <td>
      <button class="btn btn-primary"        onclick="editar(2)">Editar</button>
      </td>
    </tr>
    
  </tbody>
</table>




<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        
        <label>Nombre</label>
        <input type="text" class="form-control" name="nombre" id="nombre"/>
        <label>Email</label>
        <input type="text" class="form-control" name="email" id="email"/>
        
        
        
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
   
   
   


  </body>
</html>

En el ejemplo, cuando la petición ajax termina los datos están en la variable respuesta y es ahí donde puedes manipular los datos para mostrarlos en el modal.

Actualización

En tu vista modifica el <a> para dejarlo así:

<a class="btn btn-danger" onclick="Actualizar(@item.idempresa)">Editar</a>

El modal se mostrará con la instrucción $("#exampleModal").modal("show") dentro de la función Actualizar()

En la función Actualizar(), en la url, debes incluir el id:

url: "@Url.Action("Actualizar", "Empresa")" + "?id=" + id,

Importante: en tu controlador debes tener dos acciones, una que te devuelva los datos en formato JSON (la que recibe la petición ajax) para mostrar en el modal y otra que reciba los datos modificados y los guarde (la que recibe los datos del formulario en el modal).

Actualizacion correccion de error Context has been disposed:

El error puede deberse a que Empresa tiene propiedades de navegacion a otras tablas y Entity Framework usa lazy load para cargar los datos relacionados. Para evitar ese error puedes crear un nuevo objeto que contenga las propiedades que deseas retornar:

return Json(
new {
  emp.idempresa,
  emp.empresa,
 //agrega el resto de campos que deseas retornar

}

,JsonRequestBehavior.AllowGet);

Actualización Ajax guardar

        function Guardar() {
            alert("entre");
            $.ajax({
                url: "@Url.Action("Guardar", "Empresa")",
                type: "post",
                dataType: "json",
                data: {
                    idempresa: $("#idempresa").val(),
                    empresa: $("#empresa").val(),
                    nomEncargado: $("#nomEncargado").val(),
                    telefono: $("#telefono").val(),
                    giro: $("#giro").val(),
                    direccion: $("#direccion").val()
                },
           success: function(respuesta){
    //aqui se recibe la respuesta y se evalua para saber 
   //si todo todo salió bien o si ocurrió algún error
    }
            });
        }
2
  • Los comentarios no deben usarse para discusiones extendidas; esta conversación ha sido trasladada a un chat.
    – gbianchi
    el 17 mar. 2020 a las 12:36
  • crrlos, probé el guardar con ajax, me funciono, gracias.
    – user134496
    el 20 mar. 2020 a las 4:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.