时间戳

首页 > 解决方案 > 如何通过 ajax 在局部中使用引导多选控件呈现局部视图

jquery - 如何通过 ajax 在局部中使用引导多选控件呈现局部视图

问题描述

目前通过 ajax 返回部分视图。局部视图返回页面正常。显示了所有元素，除了一个，引导多选下拉菜单。我怀疑因为部分是在服务器端构建的，所以它没有引用引导多选库。我怎样才能得到这个部分来呈现引导多选下拉菜单。

带有剃须刀页面的 Asp.net Core 2.2 应用程序。使用 David Stutz 的引导多选库，请参阅链接多选。我通过不使用多选库来完成这项工作，但这不是一个选项，因为它使整个 UI 看起来很糟糕而且不流畅。

我知道下拉菜单确实有效，因为我尝试在页面加载时不使用 ajax 自行渲染此部分，并且在应用程序的许多其他区域中使用了下拉菜单。

这是元素，这就是我应用多选工具的方式。

@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>

标签： jqueryajaxasp.net-corerazor-pagesbootstrap-multiselect

解决方案

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

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

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

如果您在那之后进行更改，例如将您的部分视图动态注入父视图，则需要再次触发多选才能工作，因为它不会监控您的 HTML。

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

推荐阅读