带有远程数据和 asp.net 的 jQuery select2

Posted

技术标签:

【中文标题】带有远程数据和 asp.net 的 jQuery select2【英文标题】:jQuery select2 with remote data and asp.net 【发布时间】:2013-01-27 16:35:07 【问题描述】:

我正在使用 select2 库来替换选择框。我重新排列了您可以在 Select2 library 页面上找到的示例 7(使用 id 向下滚动 $("#e7").select2 等等...)。我制作了自己的通用处理程序,它返回序列化的 json 数据:

GetData.asxh 视图: 公共类GetData:IHttpHandler 公共布尔 IsReusable 得到 返回假;

    public class RecipesList
    
        public int total  get; set; 
        public List<TopRecipeTable> recipes  get; set; 

        public RecipesList()  

        public RecipesList(int total, List<TopRecipeTable> recipes)
        
            this.total = total;
            this.recipes = recipes;
        
    

    private string GenerateJsonSerializedObject(int languageId, string orderBy)
                
        RecipesList recipeList = new RecipesList(15, DBDataBase.GetTopRecipesByNumberOfRecipes(languageId, 15));
        return new javascriptSerializer().Serialize(recipeList);
    

    public void ProcessRequest(HttpContext context)
    
        int languageId;            
        bool languageParsed = int.TryParse(context.Request["languageId"], out languageId);
        string orderBy = (string)context.Request["orderBy"];

        if (languageParsed && orderBy != string.Empty)
        enter code here
            context.Response.ContentType = "application/json";
            var jsonValue = GenerateJsonSerializedObject(languageId, orderBy);
            context.Response.Write(jsonValue);
        
    

这个通用处理程序返回正确的 json 格式(我用 this URL 检查了它)。我的结果(json)也与上述页面上的示例相同。但是在这个 jquery 不再触发之后。

我的脚本:

$(document).ready(function () 
        $("#e8").select2(
            placeholder: "Search for a recipe",
            //minimumInputLength: 1,
            ajax:                                
                url: "/Handlers/GetData.ashx",
                dataType: 'jsonp',
                data: function (term, page) 
                    return 
                        languageId: 1,
                        orderBy: "TA"
                    ;
                ,
                results: function (data, page) 
                    alert(data.total);
                    var more = (page * 10) < data.total; // whether or not there are more results available

                    // notice we return the value of more so Select2 knows if more results can be loaded
                    return  results: data.recipes, more: more ;
                
            ,
            formatResult: movieFormatResult, // omitted for brevity, see the source of this page
            formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
            dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
            escapeMarkup: function (m)  return m;  // we do not want to escape markup since we are displaying html in results
        );
    );

我尝试在原始示例中编写相同的 alert(data.total) 并且它有效,但在我的版本中没有。所以我有正确的 json 格式,jquery 调用我的通用处理程序并收到参数 languageId ...并且还返回正确的 json 格式,但不是什么都没有。我不知道我是否在这里遗漏了一些东西,因为我确信这个东西也可以与通用处理程序一起使用。我希望我就我的问题提供了足够的信息。

I can also add my result in jquery .ajax error handler : 
xhr.status = 200
ajaxOptions = parsererror
horwnError = SyntaxError : invalid label
If this is any helpful information

【问题讨论】:

你正在序列化 JavaScript,它会得到一个 json 响应。然而,在 ajax 调用中,您已经指定了 jsonp 的 dataType。将其更改为 json,它应该可以工作,除非您有其他问题。 【参考方案1】:

这个问题已经很老了,所以很确定你现在有一个解决方案......但是:

删除所有这些功能:

格式结果:电影格式结果 格式选择:电影格式选择 下拉Css类:... 转义标记:....

您没有提供这些函数来格式化您的数据,是吗?仅当您要自定义项目下拉列表时,才需要所有这些。

您正在返回 data.recipes - 它需要是一个 Text:"", Id:"" 数组,或者您需要从那里返回的内容构建它。

首先,让它使用包含非常基本数据的非常基本的列表......然后从那里开始。

此外,当您开始工作时,请尝试使用 WebApi 或 ServiceStack 来处理您的数据,而不是使用 IHttpHandler。

【讨论】:

以上是关于带有远程数据和 asp.net 的 jQuery select2的主要内容,如果未能解决你的问题,请参考以下文章

ASP.NET 使用带有展开/折叠功能的嵌套、可编辑 GridView 的 JQuery

如何使用带有 asp.net 的 jQuery 进行 onclientclick 回发

ASP.NET MVC - 使用带有匿名类型和 Jquery 的 JavaScriptStringEncode()

带有复选框控件的 ASP.Net GridView 和 Jquery dataTable

带有 ASP.NET 的 Jquery - 我的页面方法不返回所有记录

ASP.NET MVC 在 jQuery 数据表中使用带有按钮 onclick 的模态弹出窗口