[C#][ASP.NET MVC] 序列化日期為 Json 時踩到的地雷

今天幫同事找問題時碰到 Mvc 序列化 Json 的地雷，問題出在 Controller.Json() 是使用 JavaScriptSerializer 序列化物件成 Json 字串，日期經轉換後無法讓前端 JavaScript 直接套用 new Date()。

原 Json 方法

程式碼：

public ActionResult Test()
{
    var data = new
    {
        Id = 1,
        Name = Guid.NewGuid().ToString(),
        Now = DateTime.Now
    };

    return Json(data, JsonRequestBehavior.AllowGet);
}

回傳：

{
  "Id": 1,
  "Name": "450dd1c9-034c-490e-aa05-8e5a2983c5fb",
  "Now": "/Date(1545478289178)/"
}

首先使用預設的 Controller.Json() 來測試一次的結果如上，微軟預設的 JavaScriptSerializer 將日期轉換成 /Date(1545478289178)/，如果直接將轉換結果塞到 new Date() 會噴錯誤訊息。

複寫 Json 方法

程式碼：

public class JsonNetResult : JsonResult
{
    public JsonSerializerSettings SerializerSettings { get; set; }
    public Formatting Formatting { get; set; }

    public JsonNetResult()
    {
        SerializerSettings = new JsonSerializerSettings();
    }

    public override void ExecuteResult(ControllerContext context)
    {
        if (context == null)
        {
            throw new ArgumentNullException("context");
        }

        HttpResponseBase response = context.HttpContext.Response;
        response.ContentType = !string.IsNullOrWhiteSpace(ContentType) ? ContentType : "application/json";

        if (ContentEncoding != null)
        {
            response.ContentEncoding = ContentEncoding;
        }

        if (Data != null)
        {
            using (var writer = new JsonTextWriter(response.Output) { Formatting = Formatting })
            {
                JsonSerializer serializer = JsonSerializer.Create(SerializerSettings);
                serializer.Serialize(writer, Data);
                writer.Flush();
            }
        }
    }
}

protected override JsonResult Json(object data, string contentType, Encoding contentEncoding, JsonRequestBehavior behavior)
{
    // 模擬原本阻擋 GET 的機制
    if (behavior == JsonRequestBehavior.DenyGet &&
        string.Equals(this.Request.HttpMethod, "GET", StringComparison.OrdinalIgnoreCase))
    {
        return new JsonResult();
    }

    return new JsonNetResult()
    {
        Data = data,
        ContentType = contentType,
        ContentEncoding = contentEncoding
    };
}

回傳：

{
  "Id": 1,
  "Name": "e42ba764-0497-494a-99b2-90c035ddf169",
  "Now": "2018-12-22T19:46:31.9098858+08:00"
}

上面的程式碼 override 掉原本 Controller.Json() 並採用 Json.NET 這個高效能的 Json 序列化套件，它將日期格式依照 ISO 8601 標準轉換成 2018-12-22T19:46:31.9098858+08:00，效能也比原本的 JavaScriptSerializer 來的高(測試數據)，接著丟到 new Date() 試試果然成功。