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

Posted 2023-05-07

【中文标题】在asp.net服务器控件上的Select2？

【英文标题】：Select2 on asp.net server controls?

【发布时间】：2014-09-22 08:35:00

【问题描述】：

我正在尝试在我的项目中使用 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());

但我不知道该怎么做。

【参考方案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有一些经验，并且我在几个项目和几个案例中使用了这个插件，它非常强大。

【讨论】：

感谢您的帮助。是的，在我的示例中，我的 texbox 被称为“Codigo”。而且我能够使用该代码从新的 Web api 控制器和 odata 功能中获取 ajax 响应。所以这就是 $filter 出现在那里的原因。感谢您为我指明正确的方向，我能够在后面的代码中获得选定的值。请看我的修改。如果您还可以帮助我在回发后保留所选数据，那就太好了。我还希望看到更多您的 select2 编码，特别是针对级联国家-州-城市选择器，并分享知识。

如果你能在后面的代码中得到选择的值，那么这个问题的问题是什么？如果您有更多与此主题无关​​的问题，您可以为每个问题创建单独的主题，因为在评论部分讨论所有问题有点困难。