0

resulta que quiero utilizar la libreria select2, dentro de una tabla html que voy creando dinamicamente son el siguiente código.

 $('#Btn-Agregar-Item-Marca').on('click', function () {
        var html = '';
        html += '<tr class="itemMarcasAgregadas">';
        html += '<td><input type="text" class="form-control denominacion" placeholder="Marca /Den. Distintiva"/><span class="error">Es Requerido</span></td>';
        html += '<td><input type="text" class="form-control registroSanitario" placeholder="Núm. Registro Sanitario"/></td>';
        html += '<td><select name="matrik_number" class="form-control"><option value="">Selecciona una opción</option></select></td>';
        //html += '<td><input type="text" class="form-control rfcTitular searchInput" onBlur="GetValidaRfc(this);" placeholder="Titular Registro Sanitario"/></td>';
        html += '<td><input type="text" class="form-control procedencia" placeholder="Procedencia"/></td>';
        html += '<td><select name="matrik_number" class="form-control"><option value="">Selecciona una opción</option></select></td>';        
        html += '<td><button type="button" name="removeMarcaTemp" class="btn btn-danger btn-sm removeMarcaTemp"><span class="glyphicon glyphicon-trash"></span></button></td>';
        html += '</tr>';
        $('#tblMarcasTemp').append(html);
        RenderSelct4();
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <table id="tblMarcasTemp" class="table">
                                                <thead>
                                                    <tr>
                                                        <th>Denominación</th>
                                                        <th>Registro Sanitario</th>
                                                        <th>Titular Registro</th>
                                                        <th>Procedencia</th>
                                                        <th>Fabricante</th>
                                                        <th><button type="button" id="Btn-Agregar-Item-Marca" name="addMarcaTabla" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-plus"></span></button></th>
                                                    </tr>
                                                </thead>
                                                <tbody></tbody>
                                            </table>

Bien para que los select que agrego dinamicamente adquieran el select2 los renderizo con el siguiente código.

function RenderSelct4() {
    $('[name^="matrik_number"]')
        .select2({
            theme: "classic",
            ajax: {
                url: _urlBase + "Generic/getcatalogoProveedores/",
                width: 'resolve',
                data: function (params) {
                    this.data('term', params.term);
                    return params;
                },
                proceprocessResults: function (data) {
                    console.log(data.item);
                   // return { result: data };
                    return { results: data.items };
                },
                minimumInputLength: 2
               // width: 'resolve'
            }
        });
}

Hasta aqui no tengo problemas, el problema esta en que al escribir en el select2, me realiza la búsqueda de los datos en el metodo del controller.

 public ActionResult getcatalogoProveedores(string term)
    {
        //Marca = view.Marca == null ? "" : view.Marca.ToUpper(),
        var model = (db.MtoProveedores.ToList()
                    .Where(p=>p.RazonSocial.ToUpper().Contains(term == null ? "":  term.ToUpper()))
                    .Select(x => new
                    {
                        id = x.MtoProveedorId,
                        text = x.RazonSocial,                           
                    })).ToList();

        return Json(new { items = model }, JsonRequestBehavior.AllowGet);            
    }

pero no me los muestra en el select2,

podrían ayudarme para que cargue los resultado en el select2, si imprimo el resultado que me retorna el método si visualizo los datos.

De antemano muchas gracias

1 respuesta 1

0

Despues de revisar el codigo, quedo de la siguiente manera para el render.

function RenderSelect5() {
$('[name^="matrik_number"]').select2({
    theme: "classic",
    placeholder: "Buscar proveedor",
    allowClear: true,
    minimumInputLength: 1,
    ajax: {
        url: _urlBase + "Generic/getcatalogoProveedores/",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            this.data('term', params.term);
            return params;
        },
        processResults: function (data) {
            return {
                results: $.map(data, function (obj) {
                    return {
                        id: obj.MtoProveedorId,
                        text: obj.RazonSocial
                    };
                })
            };
        },
        cache: true
    }
});

}

y para el metodo

public ActionResult getcatalogoProveedores(string term)
    {
        db.Configuration.ProxyCreationEnabled = false;
        var model = (db.MtoProveedores.ToList()
                    .Where(p=>p.RazonSocial.ToUpper().Contains(term == null ? "":  term.ToUpper()))
                    .Select(x => new
                    {
                        MtoProveedorId = x.MtoProveedorId,
                        RazonSocial = x.RazonSocial,                           
                    })).ToList();

        return Json(model, JsonRequestBehavior.AllowGet);            
    }

bien que fue lo que cambie del metodo lo unico que dice fue agregar la siguiente linea.

 db.Configuration.ProxyCreationEnabled = false;

y cambiar elreturn del json a lo siguiente

   return Json(model, JsonRequestBehavior.AllowGet);  

con eso funciono la carga.

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.