解析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對象自動完成

回答

相關問題