如何通过 ajax 在部分视图中使用 bootstrap multi-select 控件呈现部分视图

Question

目前正在通过 ajax 返回部分视图。页面的部分视图 returns 正常。除了 bootstrap multi-select 下拉列表之外，所有元素都已显示。我怀疑因为部分是在服务器端构建的，所以它没有引用 bootstrap multi-select 库。我怎样才能得到这个部分来呈现 bootstrap multi-select 下拉列表。

Asp.net 带有剃须刀页面的 Core 2.2 应用程序。使用 David Stutz 的 bootstrap multi-select 库，请参阅 link multi-select。我通过不使用 multi-select 库来实现此功能，但是这不是一个选项，因为它使整个 UI 看起来很糟糕并且无法正常工作。

我知道下拉菜单确实有效，因为我尝试在页面加载时不 ajax 单独渲染这部分内容，并且在许多其他领域使用了下拉菜单应用程序。

这就是元素，这就是我应用 multi-select 工具的方式。

@Html.DropDownListFor(x => x.SelectedItemIds, Model.ItemList, new { @class = "selectpicker", @multiple = "true" })

我也试过将以下脚本添加到部分脚本中（尽管这行不通）

<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

Answer 1

由于您是通过 Ajax 加载局部视图，这意味着您的父视图很可能已经加载。我猜你有一个脚本部分，你可以在其中做类似的事情；

<!-- Initialize the selectlist plugin: -->
<script type="text/javascript">
    $(document).ready(function() {
        $('#example').multiselect();
    });
</script>`

您可以看到它只会运行一次。在 $(document).ready() 事件上。

如果您在那之后进行更改，例如将局部视图动态注入父视图，则需要再次触发 multi-select 才能起作用，因为它不会监视您的 HTML .

因此，当您的 Ajax 调用完成后，执行 $('#example').multiselect();

如何通过 ajax 在部分视图中使用 bootstrap multi-select 控件呈现部分视图

How to render partial view via ajax with bootstrap multi-select control within the partial

jquery

ajax

asp.net-core

razor-pages

bootstrap-multiselect