Bootstrap 选择器问题 - 没有出现下拉菜单
[英]Bootstrap selectpicker problems - no dropdown menu appears
问题描述
I am using Blazor and trying to include this: https://developer.snapappointments.com/bootstrap-select/ plugin.
我正在使用 Blazor 并尝试包含以下内容： https://developer.snapappointments.com/bootstrap-select/插件。
When the page loads, there is no menu to be seen.页面加载时，看不到任何菜单。 But when I enter:但是当我输入时：
$('.selectpicker').selectpicker();
into the DevTools console, the menu appears.进入 DevTools 控制台，出现菜单。 A question very similar to mine is: Bootstrap-select not working , and I have tried to implement some of these solutions to no avail.一个与我非常相似的问题是： Bootstrap-select not working ，我尝试实施其中一些解决方案无济于事。 Here is my html (in the _Host.cshtml file):这是我的 html（在 _Host.cshtml 文件中）：
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SystematicReviewlution</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-select-1.13.14/dist/css/bootstrap-select.css">
<link href="css/bootstrap/bootstrap-select-1.13.14/dist/css/bootstrap-select.min.css" rel="stylesheet">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script type="text/javascript" src="css/bootstrap/bootstrap-select-1.13.14/dist/js/bootstrap-select.js"></script>
<script src="_framework/blazor.server.js"></script>
</body>
And here is where I use the selectpicker class:这里是我使用选择器 class 的地方：
<select class="selectpicker" multiple>
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
Thanks in advance for any suggestions.在此先感谢您的任何建议。
2 个解决方案
解决方案1
0 已采纳 2021-02-03 07:06:52
This is not how blazor works.这不是 blazor 的工作方式。 In earlier technologies they used to have dom load so that you can run certain javascript methods or initialize certain plugins when document is loaded either using vanilla javascript or jQuery.在早期的技术中，它们曾经有 dom 加载，因此您可以在使用 vanilla javascript 或 jQuery 加载文档时运行某些 javascript 方法或初始化某些插件。
function initSelectPicker()
{
$('.selectpicker').selectpicker();
}
window.onload = initSelectPicker();
or或者
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
In blazor things works differently.在 blazor 中，情况有所不同。 To integrate third-party UI Component you require to call javascript method from blazor Learn how to Call JavaScript functions from .NET methods in ASP.NET Core Blazor . To integrate third-party UI Component you require to call javascript method from blazor Learn how to Call JavaScript functions from .NET methods in ASP.NET Core Blazor . After setting up the prerequisites you need to write an interop method just like below in your JS file.设置好先决条件后，您需要在 JS 文件中编写如下所示的互操作方法。
window.selectPickerService = {
init: () => {
$('.selectpicker').selectpicker();
}
}
From your components you can next call your javascript interop methods in following way.接下来，您可以从您的组件中以下列方式调用您的 javascript 互操作方法。
@inject IJSRuntime JSRuntime
protected override Task OnAfterRenderAsync(bool firstRender)
{
if(firstRender)
{
await JSRuntime.InvokeVoidAsync("selectPickerService.init");
}
}
解决方案2
0 2021-02-03 10:25:36
You can still use bootstrap like this:您仍然可以像这样使用引导程序：
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" @onclick="ToggleDropdown">
Dropdown button
</button>
<div class="@myclass">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Then code down:然后编码：
@code{
bool Isshow = false;
string myclass => "dropdown-menu" + (Isshow ? " show" : "");
void ToggleDropdown()
{
Isshow = !Isshow;
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.