在 jQuery 建议中正确格式化 JSON 数据答案

【问题标题】：Properly format JSON data in jQuery suggest在 jQuery 建议中正确格式化 JSON 数据
【发布时间】：2015-06-18 22:45:43
【问题描述】：

按照示例 here，我已经能够创建一个 Web 服务来将 JSON 返回到我的 jQuery 自动建议文本框。

我可以获取数据，但它似乎在下拉区域中采用奇怪的格式。 它显示为 ["Example 1, "Example2] 并垂直堆叠，而不是像应有的那样水平堆叠每个名称。 我在 web 服务中使用 JSON 序列化我的数据并返回 json 而不是细绳。这可能与它有关，或者它可能是我的 javascript 中返回的格式类型？

这是我的网络表单上的脚本..

<script type="text/javascript">
     $(document).ready(function () {
         $("#<%=ClientSearch.ClientID %>").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '<%=ResolveUrl("~/GetClients.asmx/GetClientNames") %>',
                data: "{ 'prefix': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            label: item.split('-')[0],
                            val: item.split('-')[1]
                        }
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("#<%=hfClientID.ClientID %>").val(i.item.val);
        },
        minLength: 1
    });
 });
</script>

最后，这里是网络服务..

JavaScriptSerializer js = new JavaScriptSerializer();
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetClientNames(string prefix)
{
    List<string> clients = new List<string>();
    using (SqlCeConnection conn = new SqlCeConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        using (SqlCeCommand cmd = new SqlCeCommand())
        {
            cmd.CommandText = "SELECT [Name], [ID] FROM [Current] WHERE " + "[Name] LIKE " + "'" + prefix + "%'";
            cmd.Connection = conn;
            conn.Open();
            SqlCeDataReader sdr = cmd.ExecuteReader();
            while (sdr.Read())
            {
                clients.Add(string.Format("{0}-{1}", sdr["Name"], sdr["ID"]));
            }

            conn.Close();
        }
        string json = js.Serialize(clients);
        return json;
    }
}

我已经阅读了 jquery 网站上的自动完成文档，但我似乎无法按照我的需要格式化数据。有什么建议吗？

【问题讨论】：

你能展示你的数据示例吗？
@minhcat_vo 从 SQL 数据库中查询数据。有一个名为 [Current] 的表，其中包含各种行。一个特定的行是 call [Name]，这是我的 Web 服务查询的内容。应该格式化为.. Marriott - Omaha，但它是 ["Marriott - Omaha"]，垂直堆叠，每个字母在下拉列表中都是单独的项目。
在 web 服务中 - clients.Add(string.Format("{0}-{1}", sdr["Name"], sdr["ID"])); 在 jquery 中 - ` return { label: item.split('-')[0], val: item.split('-')[1] } ` 数据绑定到

标签： c# jquery asp.net json

【解决方案1】：

为什么要手动进行 JSON 序列化？你不应该。摆脱这个JavaScriptSerializer 并：

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<string> GetClientNames(string prefix)
{
    List<string> clients = new List<string>();
    using (SqlCeConnection conn = new SqlCeConnection())
    {
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
        using (SqlCeCommand cmd = new SqlCeCommand())
        {
            cmd.CommandText = "SELECT [Name], [ID] FROM [Current] WHERE " + "[Name] LIKE " + "'" + prefix + "%'";
            cmd.Connection = conn;
            conn.Open();
            SqlCeDataReader sdr = cmd.ExecuteReader();
            while (sdr.Read())
            {
                clients.Add(string.Format("{0}-{1}", sdr["Name"], sdr["ID"]));
            }

            conn.Close();
        }
        return clients;
    }
}

【讨论】：

太棒了。我正在尝试各种方法，另一位用户建议我序列化数据。我使用了前面提到的示例中的原始代码，但它似乎不起作用。
我现在得到了正确的格式，但是某些名称包含连字符并且名称的第一部分会显示，但其余部分不会。可能与连字符它的自我有关。示例..万豪 - 奥马哈，我刚买了万豪。

【解决方案2】：

让我们试试这个：

while(sdr.Read) 
{
    clients = clients.Add(string.Format("[{0}-{1}]", sdr["Name"], sdr["ID"]);
}

【讨论】：

【解决方案3】：

您不需要进行拆分。使用连字符并不安全，因为您的数据可能包含它们。

[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public List<ItemModel> GetVendors(string prefix)
        {
            var vendors = new List<ItemModel>();
            using (SqlConnection conn = new SqlConnection())
            {
                conn.ConnectionString = ConfigurationManager.ConnectionStrings["DBConn"].ConnectionString;
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandText = "SELECT NAME, VEND_ID FROM VENDORS WHERE NAME LIKE @SearchText + '%'" + " ORDER BY NAME";
                    cmd.Parameters.AddWithValue("@SearchText", prefix.ToUpper().Trim());
                    cmd.Connection = conn;
                    conn.Open();

                    using (SqlDataReader sdr = cmd.ExecuteReader())
                    {
                        while (sdr.Read())
                        {
                            var item = new ItemModel()
                            {
                                Name = sdr["NAME"].ToString(),
                                ID = (int)sdr["VEND_ID"]
                            };
                            vendors.Add(item);
                        }
                    }
                    conn.Close();
                }
                return vendors;
            }
        }

然后在你的脚本中：

success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                label: item.Name,
                                val: item.ID
                            }
                        }))
                    },

【讨论】：