none
MVC - Cargar tabla (llamando a metodo/controlador) con evento onChange RRS feed

  • Pregunta

  • Buenos días comunidad, espero puedan ayudarme, soy nuevo en esto de JS

    Tengo este código para cargar una tabla, que llama a un ActionResult de un controlador, el cual carga una tabla en una vista parcial y lo integra en un div de la vista actual:

    @Ajax.ActionLink(" ", "Metodo", "Controlador", new { id = item.Id }, new AjaxOptions { HttpMethod = "GET", InsertionMode = InsertionMode.Replace, UpdateTargetId = "detalle" }, new { @class = "fa fa-eye fa-fw" })

    Haciéndo click en ese actionlink el resultado lo muestra en:

    <div id="detalle"></div>

    Me funciona a la perfección para mostrar un detalle.

    Pero ahora quiero que ese mismo mecanismo se transforme en, no un botón, sino una selección de un combo (select) para cargar datos en un div en específico. Puedo acceder al valor del item seleccionado de mi select, pero no tengo la menor idea de cómo llamar al ActionResult del controlador con el evento change.

    Quizá también hayan otras opciones, el resultado deseado (sin necesidad que siga con el código que copié)  es poder cambiar una sucursal, y mostrar datos en una tabla, relacionada a dicha sucursal, en la misma vista.

    Mil gracias por adelantado, y saludos desde Santa Cruz de la Sierra.


    Saludos





    • Editado nelsiyo sábado, 19 de agosto de 2017 13:47
    sábado, 19 de agosto de 2017 13:05

Respuestas

  • Realiza una petición asíncrona mediante el método ajax() de JQuery, por ejemplo:

    <script type="text/javascript">
    
        $(document).ready(function () {
    
            $('#id-dropdownlist').on('change', function () {            
       	    var id = this.val();
                $.ajax({
                    url: '@Url.Action(actionName: "actionName", controllerName: "controllerName")',
                    type: 'Get',
                    data: { id: id },
                    cache: false,
                    success: function (result) {
                        //fill table
                    }
                });
            })
        });
    
    </script>


    - Método de acción

    public JsonResult actionName(int id)
    { 
    	var data = someMethod();
    
    	return Json(data, JsonRequestBehavior.AllowGet);
    }



    Nuestra profesión exige tener pasión por resolver problemas de una manera óptima y eficiente.
    sábado, 19 de agosto de 2017 16:33
  • Lo siento, ya veo que no entendí el requerimiento completamente, vamos por algunos cambios.

    En lugar del comentario 'fill table' coloca lo siguiente:

    success: function (result) {
    	$('#id-container').html(result); //#id-container es el DIV donde se rellenará los datos
    }

    - Método de acción

    public PartialViewResult actionName(int id)
    {
    	var data = someMethod();
    
    	return PartialView("_NombreVistaParcial", data);
    }

    Entiendo que no tienes problemas en estructurar la vista parcial, de hecho entiendo ya la tienes realizada.


    Nuestra profesión exige tener pasión por resolver problemas de una manera óptima y eficiente.
    domingo, 20 de agosto de 2017 1:35

Todas las respuestas

  • Realiza una petición asíncrona mediante el método ajax() de JQuery, por ejemplo:

    <script type="text/javascript">
    
        $(document).ready(function () {
    
            $('#id-dropdownlist').on('change', function () {            
       	    var id = this.val();
                $.ajax({
                    url: '@Url.Action(actionName: "actionName", controllerName: "controllerName")',
                    type: 'Get',
                    data: { id: id },
                    cache: false,
                    success: function (result) {
                        //fill table
                    }
                });
            })
        });
    
    </script>


    - Método de acción

    public JsonResult actionName(int id)
    { 
    	var data = someMethod();
    
    	return Json(data, JsonRequestBehavior.AllowGet);
    }



    Nuestra profesión exige tener pasión por resolver problemas de una manera óptima y eficiente.
    sábado, 19 de agosto de 2017 16:33
  • Se ve excelente Williams, gracias, lo probaré

    Saludos

    sábado, 19 de agosto de 2017 20:52
  • Funciona perfectamente, va hacia el controlador y lleno en 'data' mi tabla. Pero lo que no se es cómo poner o mostrar el resultado en la vista.

    Mil gracias infinitas por sus respuestas.


    Saludos

    domingo, 20 de agosto de 2017 0:38
  • Lo siento, ya veo que no entendí el requerimiento completamente, vamos por algunos cambios.

    En lugar del comentario 'fill table' coloca lo siguiente:

    success: function (result) {
    	$('#id-container').html(result); //#id-container es el DIV donde se rellenará los datos
    }

    - Método de acción

    public PartialViewResult actionName(int id)
    {
    	var data = someMethod();
    
    	return PartialView("_NombreVistaParcial", data);
    }

    Entiendo que no tienes problemas en estructurar la vista parcial, de hecho entiendo ya la tienes realizada.


    Nuestra profesión exige tener pasión por resolver problemas de una manera óptima y eficiente.
    domingo, 20 de agosto de 2017 1:35
  • Me funciona a la perfección.

    Seguro te estás ganando un lugar en el cielo.

    Mil gracias estimado.


    Saludos

    domingo, 20 de agosto de 2017 1:51