0

muy buenas tardes. Tengo un problema usando el Select2 en ASP.NET Core en una vista parcial dentro de un modal. Básicamente se queda sin estilo y además no muestra el dropdown, ni tampoco el buscador por texto, se queda trabado básicamente.

Esta es mi vista parcial

<link rel="stylesheet" href="~/css/select2.min.css" asp-append-version="true" />
<script src="~/js/select2.min.js" asp-append-version="true"></script>

<form asp-action="@(Model.InventoryID == 0 ? "CreateInventory" : "EditInventory")" method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>

<div class="form-group">
    <label asp-for="ProductID" class="control-label">Material</label>
    <select id="productSelect" asp-for="ProductID" class="form-control" asp-items="@(ViewBag.Products as IEnumerable<SelectListItem>)"></select>
    <span asp-validation-for="ProductID" class="text-danger"></span>
</div>


<div class="form-group">
    <button type="submit" class="btn btn-primary">Guardar</button>
</div>
<script>

    $(document).ready(function () {
    $("#productSelect").select2();
});

En la principal tengo esto:

<div class="modal fade" id="createInventoryModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="createInventoryModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createInventoryModalLabel">Registrar Nuevo Inventario</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="createInventoryContent"></div>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
<script>
  $(document).ready(function () {
      // Manejar clics en el botón de registrar inventario
      $('.inventoryReg').click(function () {
          $.get('@Url.Action("CreateInventory", "Inventory")', function (data) {
              $('#createInventoryContent').html(data);
              $('#createInventoryModal').modal('show');
          });
      });
</script>

Pequeño update: Después de hacer pruebas, vi que es porque choca con el modal, en una vista vacía si muestra el select2 correctamente. Lo que no se como hacer es que el modal quede atrás del dropdown y no al revés

5
  • Qué librerías tienes importadas, además mira bien tus tags tienes <scritp> antes del document ready.
    – PsychoMx
    Commented el 23 ago. a las 21:38
  • Eso lo escribí aqui mismo, no lo copié y pegué, en el codigo tengo bien el script. Las librerias tengo las de bootstrap que vienen por defecto en ASP.NET Core, jquery y los scripts de Select2 Commented el 23 ago. a las 21:40
  • Al darle inspeccionar a la página con click derecho obtienes algún mensaje de error en la consola? Podría ser de ayuda revisar si tienes un mensaje de error en dicha parte relaciado al select2 Commented el 24 ago. a las 0:35
  • No, no tengo ningún mensaje de error. Commented el 26 ago. a las 16:50
  • Después de hacer pruebas, vi que es porque choca con el modal, en una vista vacía si muestra el select2 correctamente. Lo que no se como hacer es que el modal quede atrás del dropdown y no al revés Commented el 26 ago. a las 19:33

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.