Question

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

Answer 1

如果您使用的是angular 2，则可以使用ng2-select。这是github repo。如果您需要更多帮助来设置它，请告诉我。

运行npm i ng2-select --save

对于angular 4，请改用ng2-select-compat。它是针对角度4定制的ng2-select的分支。

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>。 / p>

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

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

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

2 个答案: