web-dev-qa-db-ja.com

ASP.NET MVC JsonResultの日付形式

モデルのJsonResultを効果的に返すコントローラーアクションがあります。だから、私の方法では、次のようなものがあります:

return new JsonResult(myModel);

1つの問題を除いて、これはうまく機能します。モデルには日付プロパティがあり、これは次のようにJsonの結果で返されるようです:

"\/Date(1239018869048)\/"

日付が必要な形式で返されるように、日付をどのように処理する必要がありますか?または、この形式を上記のスクリプトでどのように処理しますか?

226
Jon Archway

casperOne's answer を展開するだけです。

JSON仕様 は、日付値を考慮しません。 MSは呼び出しを行う必要があり、選択したパスは文字列のjavascript表現の小さなトリックを活用することでした。文字列リテラル「/」は「\ /」と同じで、文字列リテラルはnever「\ /」にシリアル化されます(「\ /」も「\\ /」にマッピングする必要があります)。

http://msdn.Microsoft.com/en-us/library/bb299886.aspx#intro_to_json_topic2 を参照して、より適切な説明を確認してください(「JavaScriptリテラルからJSONへ」までスクロールダウン)

JSONの問題点の1つは、日付/時刻リテラルの欠如です。多くの人々は、JSONに最初に出会ったとき、これを学ぶことに驚き、失望しています。日付/時刻リテラルが存在しないことの簡単な説明(慰めるかどうか)は、JavaScriptには1つもなかったことです。JavaScriptでの日付および時刻の値のサポートは、Dateオブジェクトを通じて完全に提供されます。したがって、JSONをデータ形式として使用するほとんどのアプリケーションでは、一般に文字列または数値を使用して日付と時刻の値を表現する傾向があります。文字列を使用する場合、通常はISO 8601形式であると予想できます。代わりに数値が使用される場合、エポックは1970年1月1日午前0時(UTC)として定義されているため、エポック以降の協定世界時(UTC)のミリ秒数を意味する値が通常使用されます。繰り返しますが、これは単なる規約であり、JSON標準の一部ではありません。別のアプリケーションとデータを交換する場合は、ドキュメントをチェックして、JSONリテラル内で日付と時刻の値をエンコードする方法を確認する必要があります。たとえば、MicrosoftのASP.NET AJAXは、説明されている規則のいずれも使用しません。むしろ、.NET DateTime値をJSON文字列としてエンコードします。文字列のコンテンツは/ Date(ticks)/であり、tickはエポック(UTC)以降のミリ秒を表します。したがって、1989年11月29日、午前4時55分30秒、UTCは「\/Date(628318530718)\ /」としてエンコードされます。

解決策は、単にそれを解析することです:

value = new Date(parseInt(value.replace("/Date(", "").replace(")/",""), 10));

ただし、シリアライザーがnew Date(xxx)構文を使用してDateTimeオブジェクトを出力するようにするための設定があると聞いています。掘り下げてみます。


JSON.parse()の2番目のパラメーターは、reviver関数を受け入れます。この関数では、値が返される前に元々どのように生成されたかを規定します。

日付の例を次に示します。

var parsed = JSON.parse(data, function(key, value) {
  if (typeof value === 'string') {
    var d = /\/Date\((\d*)\)\//.exec(value);
    return (d) ? new Date(+d[1]) : value;
  }
  return value;
});

JSON.parse() のドキュメントを参照してください

184
JPot

Javascriptでの私のソリューションは次のとおりです-JPotに非常によく似ていますが、短い(そしておそらく少し高速です):

value = new Date(parseInt(value.substr(6)));

「value.substr(6)」は「/ Date(」部分を取り出し、parseInt関数は最後に出現する数字以外の文字を無視します。

編集:私は意図的に基数(parseIntの2番目の引数)を省略しました。 以下の私のコメント を参照してください。また、この古い形式よりもISO-8601の日付が優先されることに注意してください。したがって、通常、この形式は新しい開発には使用しないでください。 ISO-8601形式を使用して日付をシリアル化する優れた代替手段については、優れた Json.NET ライブラリを参照してください。

ISO-8601形式のJSON日付の場合、文字列をDateコンストラクターに渡すだけです。

var date = new Date(jsonDate); //no ugly parsing needed; full timezone support
94
Roy Tinker

クライアント側を処理するための回答はかなりありますが、必要に応じて出力サーバー側を変更できます。

これにアプローチする方法はいくつかあります。基本から始めましょう。 JsonResultクラスをサブクラス化し、ExecuteResultメソッドをオーバーライドする必要があります。そこから、いくつかの異なるアプローチを使用して、シリアル化を変更できます。

アプローチ1:デフォルトの実装では JsonScriptSerializer を使用します。ドキュメントを見ると、RegisterConvertersメソッドを使用してカスタム JavaScriptConverters を追加できます。ただし、これにはいくつかの問題があります。JavaScriptConverterはディクショナリにシリアライズされます。つまり、オブジェクトを取得し、Jsonディクショナリにシリアライズされます。オブジェクトを文字列にシリアル化するには、ちょっとしたハッカーが必要です。 post を参照してください。この特定のハックも文字列をエスケープします。

public class CustomJsonResult : JsonResult
{
    private const string _dateFormat = "yyyy-MM-dd HH:mm:ss";

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

        HttpResponseBase response = context.HttpContext.Response;

        if (!String.IsNullOrEmpty(ContentType))
        {
            response.ContentType = ContentType;
        }
        else
        {
            response.ContentType = "application/json";
        }
        if (ContentEncoding != null)
        {
            response.ContentEncoding = ContentEncoding;
        }
        if (Data != null)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();

            // Use your custom JavaScriptConverter subclass here.
            serializer.RegisterConverters(new JavascriptConverter[] { new CustomConverter });

            response.Write(serializer.Serialize(Data));
        }
    }
}

アプローチ2(推奨):2番目のアプローチは、オーバーライドされたJsonResultから開始し、別のJsonシリアライザー、私の場合は Json .NET シリアライザー。これには、アプローチ1のハッカーが必要ありません。これは、JsonResultサブクラスの実装です。

public class CustomJsonResult : JsonResult
{
    private const string _dateFormat = "yyyy-MM-dd HH:mm:ss";

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

        HttpResponseBase response = context.HttpContext.Response;

        if (!String.IsNullOrEmpty(ContentType))
        {
            response.ContentType = ContentType;
        }
        else
        {
            response.ContentType = "application/json";
        }
        if (ContentEncoding != null)
        {
            response.ContentEncoding = ContentEncoding;
        }
        if (Data != null)
        {
            // Using Json.NET serializer
            var isoConvert = new IsoDateTimeConverter();
            isoConvert.DateTimeFormat = _dateFormat;
            response.Write(JsonConvert.SerializeObject(Data, isoConvert));
        }
    }
}

使用例:

[HttpGet]
public ActionResult Index() {
    return new CustomJsonResult { Data = new { users=db.Users.ToList(); } };
}

追加クレジット:James Newton-King

63
Perishable Dave

Moment.jsは、これもサポートする広範な日時ライブラリです。 http://momentjs.com/docs/#/parsing/asp-net-json-dates/

例:moment( "/ Date(1198908717056-0700)/")

役立つかもしれません。 plunker出力

30
Eric

JQueryを使用して$.parseJSONで日付を自動変換する

:この回答は、自動ISOを追加するjQuery拡張機能を提供し、 .net日付形式のサポート。

Asp.net MVCを使用しているため、クライアント側でjQueryを使用していると思われます。 このブログ投稿 を読むことをお勧めします。これには$.parseJSONを使用して日付を自動的に変換するコードがあります。

コードは、あなたが言及したようなAsp.net形式の日付とISO形式の日付をサポートします。 $.parseJSON()を使用して、すべての日付が自動的にフォーマットされます。

19
Robert Koritnik

新しいJsonResultを作成し、それを返すことは不十分であることがわかりました。return Json(obj)へのすべての呼び出しをreturn new MyJsonResult { Data = obj }で置き換える必要があるのは苦痛です。


それで、なぜJsonResultを使用してActionFilterをハイジャックしないのかを考えました。

public class JsonNetFilterAttribute : ActionFilterAttribute
{
    public override void OnActionExecuted(ActionExecutedContext filterContext)
    {
        if (filterContext.Result is JsonResult == false)
        {
            return;
        }

        filterContext.Result = new JsonNetResult(
            (JsonResult)filterContext.Result);
    }

    private class JsonNetResult : JsonResult
    {
        public JsonNetResult(JsonResult jsonResult)
        {
            this.ContentEncoding = jsonResult.ContentEncoding;
            this.ContentType = jsonResult.ContentType;
            this.Data = jsonResult.Data;
            this.JsonRequestBehavior = jsonResult.JsonRequestBehavior;
            this.MaxJsonLength = jsonResult.MaxJsonLength;
            this.RecursionLimit = jsonResult.RecursionLimit;
        }

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

            var isMethodGet = string.Equals(
                context.HttpContext.Request.HttpMethod, 
                "GET", 
                StringComparison.OrdinalIgnoreCase);

            if (this.JsonRequestBehavior == JsonRequestBehavior.DenyGet
                && isMethodGet)
            {
                throw new InvalidOperationException(
                    "GET not allowed! Change JsonRequestBehavior to AllowGet.");
            }

            var response = context.HttpContext.Response;

            response.ContentType = string.IsNullOrEmpty(this.ContentType) 
                ? "application/json" 
                : this.ContentType;

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

            if (this.Data != null)
            {
                response.Write(JsonConvert.SerializeObject(this.Data));
            }
        }
    }
}

これは、JsonResultを返す任意のメソッドに適用して、代わりにJSON.Netを使用できます。

[JsonNetFilter]
public ActionResult GetJson()
{
    return Json(new { hello = new Date(2015, 03, 09) }, JsonRequestBehavior.AllowGet)
}

で応答します

{"hello":"2015-03-09T00:00:00+00:00"}

望んだ通りに!


リクエストごとにis比較を呼び出すことを気にしない場合は、これをFilterConfigに追加できます。

// ...
filters.Add(new JsonNetFilterAttribute());

jSONはすべて、組み込みのJavaScriptSerializerではなくJSON.Netでシリアル化されます。

17
dav_i

クライアントとサーバー間のAjax通信には、多くの場合、JSON形式のデータが含まれます。 JSONは文字列、数値、およびブール値に対して適切に機能しますが、ASP.NETがそれらをシリアル化する方法のために、日付に対していくつかの困難を引き起こす可能性があります。日付の特別な表現がないため、プレーン文字列としてシリアル化されます。ソリューションとして、ASP.NET WebフォームとMVCのデフォルトのシリアル化メカニズムは、特別な形式で日付をシリアル化します-/ Date(ticks)/-ここでticksは1970年1月1日からのミリ秒数です。

この問題は2つの方法で解決できます。

クライアント側

受信した日付文字列を数値に変換し、ティックをパラメーターとして使用して、日付クラスのコンストラクターを使用して日付オブジェクトを作成します。

function ToJavaScriptDate(value) {
  var pattern = /Date\(([^)]+)\)/;
  var results = pattern.exec(value);
  var dt = new Date(parseFloat(results[1]));
  return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();

}

サーバー側

前のソリューションでは、クライアント側スクリプトを使用して、日付をJavaScript Dateオブジェクトに変換します。また、選択した形式で.NET DateTimeインスタンスをシリアル化するサーバー側コードを使用することもできます。このタスクを実行するには、独自のActionResultを作成し、必要な方法でデータをシリアル化する必要があります。

参照: http://www.developer.com/net/dealing-with-json-dates-in-asp.net-mvc.html

11
Mischa

同じ問題が発生し、実際の日付値を返す代わりに、その上でToString( "dd MMM yyyy")を使用しました。次に、javascriptで新しいdate(datevalue)を使用しました。datevalueは「01 Jan 2009」です。

7
Joe

このスレッドを参照してください:

http://forums.asp.net/p/1038457/1441866.aspx#1441866

基本的に、Date()形式は有効なjavascriptですが、有効なJSONではありません(違いがあります)。古い形式が必要な場合は、ファサードを作成して値を自分で変換するか、JsonResultで型のシリアライザーを取得し、日付にカスタム形式を使用する方法を見つける必要があります。

4
casperOne

Knockoutjsで日付を処理するより良い方法は、モーメントライブラリを使用して、ボスのような日付を処理することです。/Date(-62135578800000)/のような日付を簡単に処理できます。コントローラーで日付をシリアル化する方法を気にする必要はありません。

function jsonToDate(date,format) {
   return moment(date).format(format);
}

のように使用します

var formattedDate = jsonToDate(date,'MM/DD/YYYY')

momentjs は、日付に関する多くの日時形式とユーティリティ関数をサポートしています。

2
Ajay Kelkar

最もエレガントな方法ではありませんが、これは私にとってはうまくいきました:

var ms = date.substring(6, date.length - 2);
var newDate = formatDate(ms);


function formatDate(ms) {

    var date = new Date(parseInt(ms));
    var hour = date.getHours();
    var mins = date.getMinutes() + '';
    var time = "AM";

    // find time 
    if (hour >= 12) {
        time = "PM";
    }
    // fix hours format
    if (hour > 12) {
        hour -= 12;
    }
    else if (hour == 0) {
        hour = 12;
    }
    // fix minutes format
    if (mins.length == 1) {
        mins = "0" + mins;
    }
    // return formatted date time string
    return date.getMonth() + 1 + "/" + date.getDate() + "/" + date.getFullYear() + " " + hour + ":" + mins + " " + time;
}
2
Gabe

上記の回答のどれも本当に私を助けなかったので、私はこの問題の解決に取り組んできました。私はjqueryウィークカレンダーを使用しており、日付がサーバーとページのローカルにタイムゾーン情報を持っている必要がありました。かなり掘り下げた後、私は他人を助けるかもしれない解決策を見つけました。

Asp.net 3.5と2008、asp.net MVC 2、jquery week calendarを使用しています。

まず、Steven Levithanが作成した、クライアント側の日付の処理に役立つライブラリ Steven Levithanの日付ライブラリ を使用しています。 isoUtcDateTime形式は、必要なものに最適です。私のjquery AJAX呼び出しでは、isoUtcDateTime形式のライブラリで提供される形式関数を使用し、ajax呼び出しがアクションメソッドにヒットすると、日時の種類がローカルに設定され、サーバー時刻が反映されます。

AJAX経由でページに日付を送信するとき、「ddd、dd MMM yyyy HH ':' mm ':' s 'GMT'zzzz」を使用して日付をフォーマットすることにより、テキスト文字列として送信します。この形式は、クライアント側で簡単に変換されます

var myDate = new Date(myReceivedDate);

以下は、Steve Levithanのソースを除いた完全なソリューションです。ダウンロードできます。

コントローラ:

public class HomeController : Controller
{
    public const string DATE_FORMAT = "ddd, dd MMM yyyy HH':'mm':'ss 'GMT'zzzz";

    public ActionResult Index()
    {
        ViewData["Message"] = "Welcome to ASP.NET MVC!";

        return View();
    }

    public ActionResult About()
    {
        return View();
    }


    public JsonResult GetData()
    {
        DateTime myDate = DateTime.Now.ToLocalTime();

        return new JsonResult { Data = new { myDate = myDate.ToString(DATE_FORMAT) } };
    }

    public JsonResult ReceiveData(DateTime myDate)
    {
        return new JsonResult { Data = new { myDate = myDate.ToString(DATE_FORMAT) } };
    }
}

Javascript:

<script type="text/javascript">

function getData() {
    $.ajax({
        url: "/Home/GetData",
        type: "POST",
        cache: "false",
        dataType: "json",
        success: function(data) {
            alert(data.myDate);
            var newDate = cleanDate(data.myDate);
            alert(newDate);
            sendData(newDate);
        }
    });
} 

function cleanDate(d) {
    if (typeof d == 'string') {
        return new Date(d) || Date.parse(d) || new Date(parseInt(d));
    }
    if (typeof d == 'number') {
        return new Date(d);
    }
    return d;
}

function sendData(newDate) {
    $.ajax({
        url: "/Home/ReceiveData",
        type: "POST",
        cache: "false",
        dataType: "json",
        data:
        {
            myDate: newDate.format("isoUtcDateTime")
        },
        success: function(data) {
            alert(data.myDate);
            var newDate = cleanDate(data.myDate);
            alert(newDate);
        }
    });
}

// bind myButton click event to call getData
$(document).ready(function() {
    $('input#myButton').bind('click', getData);
});
</script>

この簡単な例が、私と同じ状況で他の人を助けてくれることを願っています。現時点では、Microsoft JSONシリアル化で非常にうまく機能し、タイムゾーン間で日付を正確に保ちます。

2
Jesse

クエリ内の日付をフォーマットします。

var _myModel = from _m in model.ModelSearch(Word)
    select new { date = ((DateTime)_m.Date).ToShortDateString() };

このソリューションの唯一の問題は、いずれかの日付値がnullの場合、結果が得られないことです。これを回避するには、日付nullを無視する日付を選択する前にクエリに条件文を置くか、すべての結果を取得してからforeachループを使用してその情報全体をループして値を割り当てるクエリを設定することができます新しいSELECTを実行する前にnullであるすべての日付に。

両方の例:

var _test = from _t in adc.ItemSearchTest(Word)
                        where _t.Date != null
                        select new { date = ((DateTime)_t.Date).ToShortDateString() };

2番目のオプションでは、すべてのnullに値を割り当てることができるように、別のクエリが完全に必要です。これとforeachループは、値を選択するクエリの前にある必要があります。

var _testA = from _t in adc.ItemSearchTest(Word)
                         select _i;

            foreach (var detail in _testA)
            {
                if (detail.Date== null)
                {
                    detail.Date= Convert.ToDateTime("1/1/0001");
                }
            }

すべてのjavascriptの例よりも簡単だと思ったアイデア。

1
Chad

次の方法を使用できます。

String.prototype.jsonToDate = function(){
    try{
        var date;
        eval(("date = new " + this).replace(/\//g,''));
        return date;
    } 
    catch(e){
        return new Date(0);
    }
};
1
eladmat

サーバーの日付形式を返します。独自の関数を定義する必要があります。

function jsonDateFormat(jsonDate) {

// Changed data format;
return (new Date(parseInt(jsonDate.substr(6)))).format("mm-dd-yyyy / h:MM tt");

};

0
Manish Kundu

ページにjquery uiプラグインを追加します。

function JsonDateFormate(dateFormate, jsonDateTime) {
    return $.datepicker.formatDate(dateFormate, eval('new ' + jsonDateTime.slice(1, -1)));
};
0
Thulasiram

これをサーバー側で変更する最も簡単な方法であることがわかりました。

using System.Collections.Generic;
using System.Web.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;
using Newtonsoft.Json.Serialization;

namespace Website
{
    /// <summary>
    /// This is like MVC5's JsonResult but it uses CamelCase and date formatting.
    /// </summary>
    public class MyJsonResult : ContentResult
    {
        private static readonly JsonSerializerSettings Settings = new JsonSerializerSettings
        {
            ContractResolver = new CamelCasePropertyNamesContractResolver(),
            Converters = new List<JsonConverter> { new StringEnumConverter() }
        };

        public FindersJsonResult(object obj)
        {
            this.Content = JsonConvert.SerializeObject(obj, Settings);
            this.ContentType = "application/json";
        }
    }
}
0

ASP.NET MVCから渡された日付から<input type="date">値を設定するJavaScriptコードをいくつか紹介します。

    var setDate = function (id, d) {
    if (d !== undefined && d !== null) {
        var date = new Date(parseInt(d.replace("/Date(", "").replace(")/", ""), 10));
        var day = ('0' + date.getDate()).slice(-2);
        var month = ('0' + (date.getMonth() + 1)).slice(-2);
        var parsedDate = date.getFullYear() + "-" + (month) + "-" + (day);
        $(id).val(parsedDate);
    }
};

この関数は次のように呼び出します。

setDate('#productCommissionStartDate', data.commissionStartDate);

CommissionStartDateは、MVCから渡されたJSON日付です。

0
Tribal Coder

迷惑ですね。

私の解決策は、WCFサービスを変更して、DateTimesをより読みやすい(Microsoft以外の)形式で返すようにすることでした。下の「UpdateDateOriginal」はWCFのデフォルトの日付形式であり、私の「UpdateDate」はより読みやすい形式になっています。

enter image description here

方法は次のとおりです。

WCF日付形式の変更

お役に立てれば。

0
Mike Gledhill

無料ではありませんが、別の方法があります。まず、LINQクエリを作成します。次に、列挙結果のクエリを作成し、適切な形式の形式を適用します。

var query = from t in db.Table select new { t.DateField };
var result = from c in query.AsEnumerable() select new { c.DateField.toString("dd MMM yyy") };

私は言わなければならない、余分なステップは迷惑ですが、それはうまく機能します。

0
skrile

コントローラJson/JsonResultをオーバーライドして、JSON.Netを返します。

これは御treat走になります

0
Ian

私のために働いたのは、文字列として日付プロパティを含むビューモデルを作成することでした。ドメインモデルからDateTimeプロパティを割り当て、viewmodelに値を割り当てながら、dateプロパティで.ToString()を呼び出します。

MVCアクションメソッドからのJSON結果は、ビューと互換性のある形式で日付を返します。

モデルを見る

public class TransactionsViewModel
{
    public string DateInitiated { get; set; }
    public string DateCompleted { get; set; }
}

ドメインモデル

public class Transaction{
   public DateTime? DateInitiated {get; set;}
   public DateTime? DateCompleted {get; set;}
}

コントローラーアクションメソッド

public JsonResult GetTransactions(){

var transactions = _transactionsRepository.All;
        var model = new List<TransactionsViewModel>();

        foreach (var transaction in transactions)
        {
            var item = new TransactionsViewModel
            {
                ...............
                DateInitiated = transaction.DateInitiated.ToString(),
                DateCompleted = transaction.DateCompleted.ToString(),
            };

            model.Add(item);
        }
        return Json(model, JsonRequestBehavior.AllowGet);
}
0
Oladipo Olasemo