C#将控制器数据返回到JSONP输出以进行自动完成[重复]

Posted 2023-03-03

【中文标题】C#将控制器数据返回到JSONP输出以进行自动完成[重复]

【英文标题】：C# Return Controller data to JSONP output for autocomplete [duplicate]

【发布时间】：2016-06-28 18:34:11

【问题描述】：

我在将 C# MVC 中的控制器数据输出到 JSONP 以与 JQuery 自动完成一起使用时遇到了一些困难。我想要做的就是获取 2 个参数和一个回调以使 JSONP 工作，并且查询会根据搜索返回可用的匹配课程标题。

CourseController.cs

    public JsonResult GetPredictiveCourseTitleSearchResults()
    
        var jsonbuilder = "";
        var q = HttpContext.Request.Params["q"];
        var year = HttpContext.Request.Params["year"];
        var callback = HttpContext.Request.Params["callback"];
        var model = new courseModel
        
            SearchList = GetCourses(q,year)
        ;
        var results = model.SearchList.Items.ToList();
        int count = results.Count();
        int resultCount = 0;

        if (callback != "")
        
            jsonbuilder += callback + "(";
        
        jsonbuilder += "[";
        foreach(var result in results)
        

            if(resultCount+1 == count)
            
                jsonbuilder += "\"title\":" + "\"" + result.Fields["title"].ToString() + "\"";
            
            else
            
                jsonbuilder += "\"title\":" + "\"" + result.Fields["title"].ToString() + "\",";
            

            resultCount++;
        
        jsonbuilder += "]";
        if (callback != "")
        
            jsonbuilder += ")";
        
        return Json(jsonbuilder, JsonRequestBehavior.AllowGet);
    

CourseModel.cs

public class courseModel

    public ListModel<Item> SearchList  get; set; 
    public string title  get; set; 

App.js

 $("#course_search_input")
     .bind("keydown", function (event) 
         if (event.keyCode === $.ui.keyCode.TAB &&
             $(this).autocomplete("instance").menu.active) 
             event.preventDefault();
         
     )
    .autocomplete(
        source: function( request, response ) 
            $.ajax(
                url: "http://leedsbeckett/search/getpredictivecoursetitlesearchresults/",
                dataType: "jsonp",
                type: "POST",
                data: 
                    q: request.q,
                    year: $("#selectedyear").val()
                ,
                success: function (data) 
                    response( $.map( data.stuff, function ( item ) 
                        return 
                            label: item.title,
                            value: item.title
                        ;
                    ));
                ,
                error: function (XHR, textStatus, errorThrown, data) 

                    alert("Data"+data);
                    alert("XHR error: " + XHR);
                    alert("error: " + textStatus);
                    alert("error: " + errorThrown);
                
            );
        ,
        minLength: 3,
        select: function( event, ui ) 
            log( ui.item ?
              "Selected: " + ui.item.label :
              "Nothing selected, input was " + this.value);
        ,
        open: function() 
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        ,
        close: function() 
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        

JSON 文件的输出

"jQuery1111023084966000169516_1457628798511([\"title\":\"Course title example\"])"

但这并没有加载，它只是 JQuery 中的错误，数据未知。

我也试过了：

javascriptSerializer js = new JavaScriptSerializer();
        CourseJSON [] courses = js.Deserialize<CourseJSON[]>(jsonbuilder);
return Json(courses, JsonRequestBehavior.AllowGet);

但是由于它无法识别回调前缀而导致错误。

任何帮助将不胜感激，因为我不确定我哪里出错了！

谢谢，

安迪

【参考方案1】：

您必须设置正确的内容类型。在 $.ajax 调用中应该是 application/Javascript。

Best content type to serve JSONP?

更新： 您必须使用 URL 或 $.ajax 添加回调术语，如下所示。

http://leedsbeckett/search/getpredictivecoursetitlesearchresults&callback=?

或

url: "http://leedsbeckett/search/getpredictivecoursetitlesearchresults/",
            dataType: "jsonp",
            type: "POST", **jsonp:"callback"**,

【讨论】：

感谢您的回答。我已经尝试过了，但我仍然收到 err:r "parsererror" 的错误另外，“未调用 Jquery 9083450845098345_509348598340598”这可能是 C# 的东西而不是 JQuery 端？任何帮助表示赞赏！安迪

我已经更新了上面的答案。

您好，感谢您修改答案。在尝试了上述两个建议后，我仍然遇到解析错误。

【参考方案2】：

我发现了为什么 JSONP 没有从 C# 正确返回的问题

我有jsonresult返回json的地方，它需要是actionresult，返回contenttype，在这里经过大量搜索后发现：Can I convert a JSON string into JsonResult?

添加内容类型然后将字符串转换为真正的 JSON，JS 可以读取：

public ActionResult GetPredictiveCourseTitleSearchResults()
    
        var jsonbuilder = "";
        var q = HttpContext.Request.Params["q"];
        var year = HttpContext.Request.Params["year"];
        var callback = HttpContext.Request.Params["callback"];
        var model = new courseModel
        
            SearchList = GetCourses(q,year)
        ;
        var results = model.SearchList.Items.ToList();
        int count = results.Count();
        int resultCount = 0;

        if (callback != "")
        
            jsonbuilder += callback + "(";
        
        jsonbuilder += "[";
        foreach(var result in results)
        

            if(resultCount+1 == count)
            
                jsonbuilder += "\"title\":\"" + result.Fields["title"].ToString() + "\"";
            
            else
            
                jsonbuilder += "\"title\":\"" + result.Fields["title"].ToString() + "\",";
            

            resultCount++;
        
        jsonbuilder += "]";
        if (callback != "")
        
            jsonbuilder += ")";
        
        return new ContentResult  Content = jsonbuilder, ContentType = "application/json" ;
        //return Json(jsonbuilder, JsonRequestBehavior.AllowGet);
    

感谢您帮助诊断问题 Thanigainathan。