在模态中使用 select2-autocomplete

Question

如果我要简要解释一下我的问题；我想根据我给的参数发送Select2-Autocomplete操作到BaseController并获取相关数据。我在这里遇到的问题是，当我在正常页面上工作时，我没有遇到任何问题，但是当我在模态上执行相同操作时，我什至无法向 BaseController 发送请求。我正在等待您对这个问题的帮助。下面我有一些 js 代码会有所帮助。

Tools.JS
function CallSelect2() {
    $('.Select2').select2(
        {
            escapeMarkup: function (m) {
                return m;
            }
        });
    $('.Select2-Autocomplete').each(function () {
        var selectElement = $(this);

        var modalContent = selectElement.closest('.modal').find('.modal-content');

        selectElement.select2({
            dropdownParent: modalContent.length ? modalContent : $('body'),
            closeOnSelect: true,
            placeholder: 'Select',
            minimumInputLength: 3,
            width: '100%',
            ajax: {
                url: '/Base/Search_Select2',
                type: 'post',
                dataType: 'json',
                delay: 50,
                data: function (params) {
                    return {
                        prefix: params.term,
                        Params: selectElement.attr("Params"),
                        TargetID: selectElement.attr("TargetID"),
                        TableName: selectElement.attr("TableName")
                    };
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return { id: item.Id, text: item.Name };
                        })
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; }
        });
    });
}

Product.JS
function OpenModal1() {
    $('#PageModal1').modal('show').on('shown.bs.modal', function () {
        console.log("Modal gösterildi, CallSelect2 çağrılıyor");

        $('.Select2-Autocomplete').select2({
            dropdownParent: $('#PageModal1 .modal-content'),
        });
    });
}

$(function () {
    CallSelect2();
});

View Page
<div class="modal fade" id="PageModal1" tabindex="-1" aria-labelledby="PageModal1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title Rb" id="titleModal1">Add New Component</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">                            
                <div class="row">
                    <div class="col col-12">
                        <label class="FormLabel-b">Used Poduct / Raw</label>
                        
                        <select class="form-select Select2-Autocomplete" Title="Product" id="M_UsedProductID" Params="">
                            <option value="0">Select</option> 
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a id="BtnUpsert" onclick="OptModal1()" class="btn btn-primary">Add New Item</a>
            </div>
        </div>
    </div>
</div>
<script src="~/js/Views/Commerce/Product_Component.js"></script>

Answer 1

您的问题是由于加载和初始化modal组件和select2组件的过程不正确造成的。这是您可以参考的示例代码。

查看页面

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="modal fade" id="PageModal1" tabindex="-1" aria-labelledby="PageModal1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title Rb" id="titleModal1">Add New Component</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col col-12">
                        <label class="FormLabel-b">Used Poduct / Raw</label>

                        <select class="form-select Select2-Autocomplete" Title="Product" id="M_UsedProductID" Params="">
                            <option value="0">Select</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a id="BtnUpsert" onclick="OptModal1()" class="btn btn-primary">Add New Item</a>
            </div>
        </div>
    </div>
</div>

<script src="~/js/Tools.js"></script>
<script src="~/js/Product.js"></script>

产品.js

function OpenModal1() {
    $('#PageModal1').modal('show').on('shown.bs.modal', function () {
        console.log("Modal is shown, initializing Select2 components.");
        CallSelect2(); // Call this function to initialize Select2 components in the modal.
    });
}

$(function () {
    OpenModal1();  //Your code snippet is not complete and this part is confusing, so I changed it to start the modal
});

工具.js

function CallSelect2() {
    $('.Select2').select2({
        escapeMarkup: function (markup) {
            return markup;
        }
    });

    $('.Select2-Autocomplete').each(function () {
        var selectElement = $(this);
        var modalContent = selectElement.closest('.modal').find('.modal-content');

        selectElement.select2({
            dropdownParent: modalContent.length ? modalContent : $('body'),
            closeOnSelect: true,
            placeholder: 'Select',
            minimumInputLength: 3,
            width: '100%',
            ajax: {
                url: '/Base/Search_Select2',
                type: 'post',
                dataType: 'json',
                delay: 250, // Increased the delay to prevent too many requests
                data: function (params) {
                    return {
                        prefix: params.term,
                        Params: selectElement.attr("Params"),
                        TargetID: selectElement.attr("TargetID"),
                        TableName: selectElement.attr("TableName")
                    };
                },
                processResults: function (data) {
                    return {
                        results: $.map(data, function (item) {
                            return { id: item.Id, text: item.Name };
                        })
                    };
                },
                cache: true
            },
            escapeMarkup: function (markup) { return markup; }
        });
    });
}

最后，如果您对 select2 的引用可能不正确，这是我的 _Layout 配置。

<!DOCTYPE html>
<html lang="en">
<head>
    …
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/Jquery2.styles.css" asp-append-version="true" />
</head>
<body>
…
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>