如何在asp.net core中使用select2选项？

Question

我在asp.net核心工作。 我正在使用打字稿。 我想使用 Select2。 如何在asp.net core中使用select2？ 是否有任何软件包要安装以使用 select2？

Answer 1

如果您使用的是Angle angular 2 ，则可以使用ng2-select 。 这是github仓库 。 让我知道您是否需要更多帮助来进行设置。

运行npm i ng2-select --save

对于angular 4 号角 ，请改用ng2-select-compat 。 这是ng2-select上方的分叉，针对4号角进行了自定义。

Answer 2

参加聚会有点晚，但遇到了同样的问题。

我的需要是添加一个 select2-multiselector，其中数据是通过 ajax 加载的。 所以可能你需要稍微改变一下。

你可以添加这个js和css：

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

我的视图（模型是一个IEnumerable ）：

...
@for (int index = 0; index < Model.Count; index++)
{
    <div>
        <input type="hidden" asp-for="@Model[index].Id"/>
        <input type="text" asp-for="@Model[index].Title">

        <select class="js-example-basic-multiple" style="width: 100%;" asp-for="@Model[index].TagIds" multiple="multiple">
            @foreach (TagDetailModel tag in Model[index].Tags)
            {
                <option value="@tag.Id" selected="selected">@tag.Name</option>
            }
        </select>
    </div>
}
...

我做了什么：在视图中添加了一个select ，给它一个类，我可以稍后使用 javascript 访问它。 如果需要添加多个值，则添加multiple="multiple"在我的模型中，我添加了已经分配给模型的标签。 它们不会通过 select2 自动添加，您需要自己添加。 如果您没有启用多个，您的Tags可能只是一个Tag ，您不需要枚举。

$(document).ready(function() {
    $('.js-example-basic-multiple').select2({
    ajax: {
            url: '/Tag/GetTags',
            dataType: 'json',
            type: "GET",
            quietMillis: 50,
            data: function (term) {
                return {
                    term: term
                };
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.name,
                            id: item.id
                        }
                    })
                };
            }
        }
    });
});

在这个脚本中，当文档完全加载时，我将select作为select2运行，只需使用$('.js-example-basic-multiple').select2() 。 我想让 select2 通过 ajax 加载选项（因此是ajax属性） - 如果您不想使用 ajax，您可以添加可能的值，例如在视图中使用<option value="@tag.Id">@tag.Name</option> 。

在我的控制器（我的应用程序中的ImageController.cs ）中，我刚刚为 ajax 请求添加了一个函数：

public async Task<JsonResult> Tags(int id)
{
    return Json(await _imageService.Get(id));
}