ASP.NET WebForm移除JSON响应__type字段，实现JQuery自动完成

一、移除__type字段的两种方案 #

方案1：返回匿名类型（最简单直接） #

ASP.NET的JavaScriptSerializer会给强类型对象自动添加__type字段，改用匿名类型返回即可避免这个问题，同时保留需要的Id和Value字段：

// 供Ajax调用的WebMethod
[WebMethod]
public static object GetDataList(string term)
{
    // 实际场景请根据term参数过滤匹配数据，此处为示例固定值
    int id = 123;
    string value = "My Name";
    return new { Id = id, Value = value };
}

注意：给方法添加了term参数，匹配你前端传递的查询关键词，之前的代码未接收该参数，实际业务中需要用它做数据过滤。

方案2：使用Newtonsoft.Json手动序列化（强类型场景适用） #

如果需要保留MyData强类型定义，可通过Newtonsoft.Json（需NuGet安装）手动序列化，完全控制输出格式：

using Newtonsoft.Json;

// 自定义数据类型类
public class MyData
{
    public int Id { get; set; }
    public string Value { get; set; }
}

[WebMethod]
public static string GetDataList(string term)
{
    MyData data = new MyData { Id = 123, Value = "My Name" };
    // 直接序列化对象，不会生成__type字段
    return JsonConvert.SerializeObject(data);
}

对应修改前端success回调，解析返回的字符串：

success: function (data) {
    var result = JSON.parse(data.d);
    // jQuery Autocomplete需要数组格式，包装成数组返回
    response([result]);
},

二、更优的WebForm实现思路 #

1. 改用一般处理程序（.ashx）替代WebMethod #

WebMethod的序列化规则受限，.ashx可以完全控制输出内容和格式，灵活性更高：

using System.Collections.Generic;
using System.Linq;
using Newtonsoft.Json;

public class AutoCompleteHandler : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        string term = context.Request["term"];

        // 模拟根据term查询数据的逻辑
        List<MyData> dataList = new List<MyData>
        {
            new MyData { Id = 123, Value = "My Name" },
            new MyData { Id = 456, Value = "Another Name" },
            new MyData { Id = 789, Value = "Test Name" }
        }.Where(d => d.Value.Contains(term)).ToList();

        // 映射为Autocomplete期望的格式（label显示建议文本，value和id存对应数据）
        var output = dataList.Select(d => new { label = d.Value, value = d.Value, id = d.Id });
        context.Response.Write(JsonConvert.SerializeObject(output));
    }

    public bool IsReusable => false;
}

前端对应修改source的请求逻辑，改用GET方式更简洁：

$(function () {
    $("#autocomplete").autocomplete({
        source: function (request, response) {
            $.ajax({
                type: 'GET',
                url: 'AutoCompleteHandler.ashx',
                data: { term: request.term },
                dataType: 'json',
                success: function (data) {
                    response(data);
                },
                error: function () {
                    console.log('Error fetching items.');
                }
            });
        },
        minLength: 1,
        select: function (event, ui) {
            $('#selectedValue').val(ui.item.value);
            $('#selectedId').val(ui.item.id);
        }
    });
});

2. 适配Autocomplete的标准数据格式 #

jQuery UI Autocomplete默认期望数据源是包含label（显示的建议文本）和value（选中后填充到输入框的值）的对象数组，提前在后端做好格式映射，能减少前端的额外处理逻辑。

内容的提问来源于stack exchange，提问作者arafat