如何使用Selected2搜索栏在我的ASP.. NET Core MVC项目?

Question

我是Selected2和ASP的新手。NET Core，所以任何建议都会很棒。我目前正在为我的应用程序的一个页面，这是一个表单样式。其中一个字段是多个下拉菜单。我发现Selected2可以制作一些非常酷的多选择搜索栏。我添加了选中的两个下拉菜单代码:

<label for="id_label_multiple">
<select class="form-control" id="dropdown" multiple style="width: 75%">
@*<option selected disabled="true"> Select Your Games</option>*@
<option value="Game1"> Game1</option>
<option value="Game2"> Game2</option>
<option value="Game3"> Game3</option>
<option value="Game4"> Game4</option>
<option value="Game5"> Game5</option>
<option value="Game6"> Game6</option>
</select>
</label>

<script>
$(document).ready(function () {
$('#dropdown').select2({
placeholder: "Next Game",
});
});
</script>

还必须在我的页面顶部添加以下三行:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous"></script>
<link rel=  "stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" />

但是，它没有选择2 css的格式，直到我把:'Layout = null;'在我的页面顶部与我的ViewData["Title"]。因此，我从中理解的是，我需要重写主布局，让它实际使用Selected2 CSS和js?有谁知道我怎样才能保持我的主布局，并有选择的酒吧仍然看起来很好，功能如预期?

Answer 1

但是，直到我在页面顶部放置:'Layout = null;'，它才采用selected 2 css的格式

这是因为bootstrap.css与你的select2.css冲突，所以你需要自定义一些css样式。

Bootstrap v4.3.1，你只需要添加如下的CSS:

<label for="id_label_multiple">
<select class="form-control" id="dropdown" multiple style="width: 75%">
@*<option selected disabled="true"> Select Your Games</option>*@
<option value="Game1"> Game1</option>
<option value="Game2"> Game2</option>
<option value="Game3"> Game3</option>
<option value="Game4"> Game4</option>
<option value="Game5"> Game5</option>
<option value="Game6"> Game6</option>
</select>
</label>
@section Scripts
{
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js" integrity="sha512-2ImtlRlf2VVmiGZsjm9bEyhjGW4dU7B6TNwh/hx/iSByxNENtj3WVE6o/9Lj4TJeVXPi4bnOIMXFIJJAeufa0A==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" integrity="sha512-nMNlpuaDPrqlEls3IX/Q56H36qvBASwb3ipuo3MxeWbsQB1881ox0cRv7UPTgBlriqoynt35KjEwgGUeUXIPnw==" crossorigin="anonymous" />
<style>
.select2-container {
position: absolute;
}  
.select2-container--default .select2-search--inline .select2-search__field {
width: initial !important;
}
</style>
<script>
$("#dropdown").select2({
placeholder: "Next Game"
});
</script>
}