none
Llenar una Tabla con un Json a partir de un Select mvc c# RRS feed

  • Pregunta

  • Buen dia, 

    Necesito llenar una tabla la cual se construye a partir de dos parametros y uno de ellos se tiene que seleccionar de un Select, he tratado con varios ejemplos y no consigo hacerlo.

    Agradeceria mucho su apoyo.

    Este es el codigo del script

    <script type="text/javascript">
    
        function cambiarTable()
        {
    $(document).ready(function () {
    
    
    
            $("#tbDocumentos tbody tr").remove();
    
        $.ajax({
    
            type: 'POST',
    
            url: '@Url.Action("GetIncisoPeriodos", "Areas")',
            dataType: 'json',
            data: {
                id: $("#s_periodo").val(),
                id2: $("@infoOficio.IncisoId").val()
            },
            success: function (data) {
                var items = '';
                $.each(data, function (i, item) {
    
                    var rows = "<tr>"
                    + "<td>" + item.Periodo + "</td>"
            
                    + "</tr>";
                    $('#tbDocumentos tbody').append(rows);
                });
    
            },
            error: function (ex) {
                var r = jQuery.parseJSON(response.responseText);
                alert("Message: " + r.Message);
                alert("StackTrace: " + r.StackTrace);
                alert("ExceptionType: " + r.ExceptionType);
            }
        });
        return false;
    })
    
        }
    </script>

    Y el del Select

      <div class="form-group col-md-2">
                                    <label for="inputPeriodo">Periodo</label>
                                    <span class="select-oficio" style="width: 320px;">
    
                                        <select class="inp" id="s_periodo" onchange="cambiarTable()" data-toggle="tooltip" title="Selecciona un Ente Público" name="test">
                                            
                                            @foreach (InformacionOficioVm Period in Model)
                                            {
                                                <option value="@Period.Periodo">@Period.Periodo </option>
                                            }
                                        </select>
                                    </span>
                                </div>

    Y es aqui donde quiero mostrarlo

       <table class="tbDocuments" id="tbDocumentos">
                <thead>
                    <tr></tr>
                </thead>
                <tbody>
    
                    <tr>
                        <td></td>
    
                    </tr>
                </tbody>
            </table>

    Gracias!


    nwgirl

    miércoles, 11 de abril de 2018 18:45

Todas las respuestas

  • hola

    Pero se invoca el action de mvc ? o sea este retorna un json que ingresa en el success de $.ajax

    podrias usar la developer tools del browser, al cual accedes con F12, para ver la solapa Network y ver si hay algun error en la llamada al server

    Despues otro punto, como lanzas el codigo? porque si pones el $.ajax dentro de una function cambiarTable() no se usa el $(document).ready, es uno u otro no ambos

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina


    miércoles, 11 de abril de 2018 19:31
  • Buen dia gracias por responderme, 

    Lo que quiero hacer es que a partir del Select le mande los dos valores y me ejecute esto y lo muestre en un Table, no se si es la manera de hacerlo.


    Busque ejemplos pero ninguno lo pude implementar, tengo esto en mi controller:

            public JsonResult GetIncisoPeriodos(int periodoId, int incisoId)
            {
              
                var data = new InformacionOficioBl().GetIncisoPeriodos(periodoId, incisoId);
                return Json(data, JsonRequestBehavior.AllowGet);
              
            }

    Y esto en mi en mi Dal

         public List<InformacionOficioVm> GetIncisoPeriodos(int incisoId, int periodoId)
            {
    
                try
                {
                    using (var db = new SETBCEntities())
                    {
                        List<InformacionOficioVm> informacionOficio = db.INFORMACION_OFICIO
                            .AsNoTracking()
                            .Where(w => w.INCISO_ID == incisoId && w.PERIODO ==periodoId)
                            .Select(_selector)
                            .DistinctBy(d => d.Periodo)
                            .ToList();
                        return informacionOficio;
    
    
    
                    }
                }
                catch (Exception)
                {
                    throw;
                }
                
            }


    nwgirl

    miércoles, 11 de abril de 2018 19:58
  • ok pero lo que marque en la respuesta anterior es si se esta ejecutando el $.ajax porque usas el ready dentro de una funcion y eso asi no funciona

    si pones un breakpoint en el action GetIncisoPeriodos() se detiene la ejecucion? para validar que desde el cliente lo esta llamando

    saludos


    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina


    miércoles, 11 de abril de 2018 20:28
  • Hola, Ya lo cambie, sin embargo no se ejecuta la accion.

    <script type="text/javascript">
    
    $(document).ready(function () {
    
        $("#s_periodo").change(function () {
    
            $("#tbDocumentos tbody tr").remove();
    
        $.ajax({
    
            type: 'POST',
    
            url: '@Url.Action("GetIncisoPeriodos", "Areas")',
            dataType: 'json',
            data: {
                id: $("#s_periodo").val(),
                id2: $("@infoOficio.IncisoId").val()
            },
            success: function (data) {
                var items = '';
                $.each(data, function (i, item) {
    
                    var rows = "<tr>"
                    + "<td>" + item.Periodo + "</td>"
            
                    + "</tr>";
                    $('#tbDocumentos tbody').append(rows);
                });
    
            },
            error: function (ex) {
                var r = jQuery.parseJSON(response.responseText);
                alert("Message: " + r.Message);
                alert("StackTrace: " + r.StackTrace);
                alert("ExceptionType: " + r.ExceptionType);
            }
        });
        return false;
    })
    });
    
    </script>



    nwgirl

    miércoles, 11 de abril de 2018 21:38
  • Me marca esto en la consola

    Me marco ese error en la consola

    • Editado Annie_22 miércoles, 11 de abril de 2018 21:48
    miércoles, 11 de abril de 2018 21:48