使用字符串元素列表作为 Select2 组件的源

Using a list of string elements as source for Select2 component

本文关键字:Select2 组件 字符串 元素 列表      更新时间:2023-09-26

我正在尝试为我正在处理的这个网站制定一个标签控制器,但我无法让 json 部分正常工作。

顶部开始,我在我的cshtml视图中有一个隐藏的输入元素(JS从这个SO帖子中获取):

<input type="hidden" id="tagController" style="width: 350px;" />
...
    $(document).ready(function () {
        var lastResults = [];
        $("#tagController").select2({
            multiple: true,
            placeholder: "Please enter tags",
            tokenSeparators: [","],
            ajax: {
                multiple: true,
                url: "/UnitDetails/GetTagsAsJson/",
                dataType: "json",
                type: "POST",
                data: function (term, page) {
                    return {
                        json: JSON.stringify({ results: [{ id: "foo", text: "foo" }, { id: "bar", text: "bar" }] }),
                        q: term
                    };
                },
                results: function (data, page) {
                    lastResults = data.results;
                    return data;
                }
            },
            createSearchChoice: function (term) {
                var text = term + (lastResults.some(function (r) { return r.text == term }) ? "" : " (new)");
                return { id: term, text: text };
            },
        });
    });

然后,我的控制器中有一个操作:

[HttpPost]
public JsonResult GetTagsAsJson()
{
    return Json(Model.TagsAvailable, JsonRequestBehavior.AllowGet);
}

然后,在我的索引操作中填充列表TagsAvailable

...
foreach (var tag in GetAvailableTags())
{
    Model.TagsAvailable.Add(tag.Name);
}
...

最后,GetAvailableTags()调用一个 wcf 服务,该服务在BaseTagController中返回一组 TagContracts:

public List<TagContract> GetAvailableTags()
{
    return UnitClient.GetAllUnitTags().Select(unitTag => new TagContract
                                                             {
                                                                 Id = unitTag.Id,
                                                                 Name = unitTag.Name
                                                             }).ToList();
}

在 chrome 中检查控制台时,出现以下错误: Failed to load resource: the server responded with a status of 500 (Internal Server Error)

作为记录,我知道服务返回请求的数据,我想这更多的是我编写的代码的问题:)

遇到了一个教程,它帮助我完成了我想要的。只需重写代码以匹配我的值即可。

Github代码可以在这里找到。