在asp.net服务器控件上的Select2？

Question

我正在尝试在我的项目中使用 Select2 一段时间，但我无法让它按我的意愿工作。我开发 asp.net webforms 应用程序，所以我需要的是能够在发布后在代码后面选择选择结果。 问题是，无论我做什么，我总是让我的文本框文本填充像“[object OBJECT]”这样的东西，而不是页面上显示的文本。 我想我没有给控件提供适当的数据格式，但我找不到问题。

目前这让我无法使用它。所以我只需要一点 omph 就可以从 select2 开始。

我的示例代码是：

<script>
    $(document).ready(function () {
        $("#<%=Codigo.ClientID%>").select2({
            minimumInputLength: 3,
            quietMillis: 2000,
            ajax: {
                url: '<%=ResolveUrl("~/api/Search/Customers")%>',
                dataType: 'json',
                data: function (term, page) {
                    return {
                        "$filter": "substringof(tolower('" + term + "'), tolower(Name))",
                        page_limit: 10
                        //"$skip": page * 10,
                        //"$top": 10
                    };
                },
                results: function (data, page) {
                    return { results: data }; //, more: true
                },
                params: {
                    contentType: "application/json;odata=verbose",
                    headers: { "accept": "application/json;odata=verbose" }
                }
            },
            id: function (d) { return { id: d.Id }; },
            formatResult: function (d) {
                return d.Name;
            },
            formatSelection: function (p) {
                return p.Id;
            },
            formatNoMatches: function () {
                return "No results found. (Case Sensitive)";
            },
            escapeMarkup: function (m) { return m; },
            dropdownCssClass: "bigdrop",
            initSelection: function (element, callback) {
                var id = $('#<%=hdnCodigo.ClientID%>').val(); //$(element).val();
                if (id !== "") {
                    $.ajax('<%=ResolveUrl("~/api/Search/Customers/")%>' + id, {
                        dataType: 'json'
                    }).done(function (data) { callback(data); });
                }
            }
        }).select2("val", $('#<%=hdnCodigo.ClientID%>').val());

        $('#<%=Codigo.ClientID%>').change(function () {
            $('#<%=hdnCodigo.ClientID%>').attr("value", $('#<%=Codigo.ClientID%>').select2('data').Id);
        });
    });
</script>
<asp:TextBox ID="Codigo" class="input-medium" runat="server" />
<asp:HiddenField ID="hdnCodigo" runat="server" />

这是复制的一些示例，我不知道是否需要隐藏字段周围的所有代码来获取回发之间的初始值或现有值。 提前致谢。

编辑：多亏了 Moshtaf，我能够通过对他的代码进行小的修改来获得我选择的 ID。我也完全抛弃了 HiddenField。

...
            initSelection: function(element, callback) {
                var id = $(element).val();
                if (id !== "") {
                    $.ajax('<%=ResolveUrl("~/api/Search/Customers/")%>' + id, {
                        dataType: 'json'
                    }).done(function(data) { callback(data); });
                }
            }
        }).select2("val", $('#<%=Codigo.ClientID%>').val());

        $("#<%=Codigo.ClientID%>").change(function () {
            $(this).val($(this).select2('data').Id);
        });
    });
</script>

剩下的唯一问题是，在回发之后，一小会儿出现了选定的Id，但突然消失了，控件变成了空的。 肯定是线路有问题：

}).select2("val", $('#<%=Codigo.ClientID%>').val());

但我不知道该怎么做。

Answer 1

好吧，据我了解，您可以毫无问题地使用 select2，并且您可以将 ajax 结果作为下拉列表并在输出中选择它们，但唯一的问题是您无法在代码隐藏中获取选定的值（或值） .如果我的假设是正确的，那么你有一个文本框和一个这样的 javascript 代码：

strSelect2FieldId = "#<% = TextBox1.ClientID%>";
$(strSelect2FieldId).select2({
    //Your Config
});

如果您想访问选定的值，请添加以下代码：

$(strSelect2FieldId).change(function () {
    var strSelectedValues = (JSON.stringify($(this).select2('data')));
    $(this).val(strSelectedValues);
});

然后在代码隐藏中轻松调用 TextBox1.Text，您可以将所选值视为 JSON 字符串。

如果我误解了您的问题，请告诉我为您提供更多信息和细节，我对asp.net中的select2有一些经验，并且我在几个项目和几个案例中使用了这个插件，它非常强大。