解析Jquery UI中的JSON对象自动完成

我有一种感觉，这有一个简单的答案，但我在将JSON数据返回给JQuery UI自动完成功能时遇到问题。我正在使用“标签”和“值”字段，以便可以存储ID字段。问题是我无法解析对象中的值，一旦它们传回给JQuery函数。解析Jquery UI中的JSON对象自动完成

在ASP.NET C＃

，我有一个对象：

public class AutoCompleteItem 
{ 
    public string label { get; set; } 
    public string value { get; set; } 
}

，并设定他们到一个列表，格式为JSON，然后返回：传递给JQuery的后

List<AutoCompleteItem> autoCompleteItems = new List<AutoCompleteItem>(); 
// Loop through data, add objects to list 
var oSerializer = new JavaScriptSerializer(); 
string sJSON = oSerializer.Serialize(autoCompleteItems); 
return sJSON;

JSON数据：

"[{"label":"Steve","value":"ID4545"},{"label":"Joe","value":"ID1212"},{"label":"Rick","value":"ID6767"}]"

这是我用来试图从JSON获取数据的函数：

success: function (data) { 
     response($.map(data.d, function (item) { 
      return { 
       label: item.label, 
       value: item.value 
      } 
           })); 
},

我注意到在我使用'label'，'value'格式之前，我只使用了IList字符串。通过没有在外面的报价，而我原来的示例中的数据确实

["Steve", "Joe", "Rick"]

我不知道这是相关的问题或没有，但我已经尝试了许多事情都无济于事。任何帮助表示赞赏！

来源

2012-04-12 Drew

查看data.d是否正确。你需要在jquery响应中转换数据？ – Jones 2012-04-12 19:08:48

你为什么试图将data.d映射到包含完全相同结构的对象的数组？不应该使用data.d直接相同？（或者你想保留原始的响应吗？）。此外，您正在使用data.d，但在您之前显示的JSON数据中没有看到任何“d”属性。也许如果你直接使用数据？ – 2012-04-12 19:10:21

我相信'd'是.NET独有的东西，它容纳了我的对象。 – Drew 2012-04-12 19:11:39

在您显示的JSON中没有.d属性。所以：

success: function (data) { 
    response(
     $.map(data, function (item) { 
      return { 
       label: item.label, 
       value: item.value 
      }; 
     }) 
    ); 
},

但如果你使用ASP.NET页面的方法，那么你有.D财产，你不需要手动序列化JSON的。例如，你可以有以下PageMethod的背后代码：

[WebMethod] 
public static List<AutoCompleteItem> GetAutoCompleteValues(string term) 
{ 
    // the term variable will contain what the user entered so far 

    var autoCompleteItems = new List<AutoCompleteItem>(); 
    // Loop through data, add objects to list 
    return autoCompleteItems; 
}

然后：

source: function(request, response) { 
    $.ajax({ 
     url: '/foo.aspx/GetAutoCompleteValues', 
     type: 'POST', 
     contentType: 'application/json', 
     data: JSON.stringify({ term: request.term }), 
     success: function(data) { 
      response(
       $.map(data.d, function(item) { 
        return { 
         label: item.label, 
         value: item.value 
        }; 
       }); 
      ); 
     }) 
    }); 
});

来源

2012-04-12 19:18:36

ASP.NET在d属性中序列化JSON响应。他所拥有的是正确的。 – villecoder 2012-04-12 19:21:47

@villecoder，是的，但他没有使用ASP.NET来序列化。他手动执行此操作。查看他正在使用的JavaScriptSerializer类？查看他在问题中显示的JSON。没有任何'.d'的痕迹。现在看看我在答案中显示的页面方法。这将使用'.d'属性。 – 2012-04-12 19:22:37

的确，他正在通过JavaScriptSerializer来抽取它。但是，所做的只是将d属性从JSON对象更改为String。 ASP.NET仍然使用使用d属性作为数据的JSON对象来响应AJAX请求。 – villecoder 2012-04-12 19:42:52

你不应该需要转换JSON响应 - jQuery用户界面已经期待这些令牌。

从jQuery用户界面文档：

$(function() { 
     function log(message) { 
      $("<div/>").text(message).prependTo("#log"); 
      $("#log").scrollTop(0); 
     } 

     $("#birds").autocomplete({ 
      source: "search.php", 
      minLength: 2, 
      select: function(event, ui) { 
       log(ui.item ? 
        "Selected: " + ui.item.value + " aka " + ui.item.id : 
        "Nothing selected, input was " + this.value); 
      } 
     }); 
    });

你必须的项目（S）作为第二个参数的jQuery传递给那些事件处理程序（在文档示例select:）的value和id性质的直接访问。不需要转换。

来源

2012-04-12 19:19:27 lukiffer

为什么首先使用JavaScriptSerializer()？您只需要

public ActionResult GetUserAutoComplete(string term) 
{ 
     var users = _userRepository.GetUsersByTerm(term); 
     var autoCompleteData = users.Select(x => new { label = x.Name + " " + x.Surname, value = x.Name + " " + x.Surname, id = x.UserId, }).ToArray(); 
     return Json(data, JsonRequestBehavior.AllowGet); 
}

来源

2012-04-12 19:26:22

他没有使用ASP.NET MVC（或者至少他没有提到它）。 – villecoder 2012-04-12 19:44:12

你是正确的villecoder，我不是。 – Drew 2012-04-12 19:48:52

解析Jquery UI中的JSON对象自动完成

回答

相关问题