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
<scritp>
antes del document ready.