Verwenden von moment.js zum Formatieren von Viewmodel-Daten in ASP.NET MVC

Question

Ich verwende Razor als View-Engine in ASP.NET MVC 5. Ich habe Daten von einem Back-End-Service, die in UTC sind. Ich möchte diejenigen formatieren, die JavaScript (z. B. moment.js) auf dem Client verwenden. Ich möchte das nicht auf dem Server machen, weil ich mir keine Sorgen darüber machen muss, in welcher Zeitzone sich der Client auf der Serverseite befindet (der Server kümmert sich ja nicht wirklich).

Ich denke von Locale Date formatting with MVC, AJAX and Moment.js, dass es eine Möglichkeit gibt, diese Server-Seite zu tun, wenn ich muss, obwohl es nicht genug Informationen für mich gibt, um es zu erarbeiten, und das ist nicht, was ich sowieso tun möchte.

So etwas wie ASP.NET MVC ViewModel mapping with custom formatting oder Where is the best place to format Model properties in ASP.NET MVC(3)? oder How to format date in asp.net mvc 5 funktioniert nicht, da die Server-Seite ist (oder tut es in irgendeine Weise verstehe ich nicht?)

Was ist der „beste“/„richtige“ Weg, dies zu tun sauber und zuverlässig?

EDIT: Um klar zu sein, weiß ich alles über die moment.js Seite. Ich hätte es nicht genannt, wenn ich es nicht getan hätte. Worum ich gebeten habe, ist die Integration von ASP.NET MVC View - wie kann ich das "richtig" machen?

EDIT 2: Ich weiß, wie man das Skript macht. Was ich nicht weiß ist, wenn ich diese Ausgabe von einer Skriptvariablen habe, wie bekomme ich den Inhalt dieser Variablen in die Informationen, die dem Benutzer in der Ansicht angezeigt werden? Ich möchte nicht so etwas wie den Inhalt des HTML-Elements bearbeiten oder etwas, wenn ich ihm helfen kann. das ist überhaupt nicht sauber. Vielleicht sollte ich das viel einfacher machen, um dies sehr deutlich zu machen:

Stellen Sie sich eine Ansicht in Razor vor. Diese Ansicht sagt:

@foreach (var item in Model) { 
    <!-- something to do javascript manipulation of item --> 
    <p>The result of manipulating @item.startDate is <!-- WHAT DO I DO HERE? --></p> 
} 

Die Kommentare sind, was ich nicht weiß, wie man jetzt sauber macht.

Answer 1

können Sie versuchen, diese (JS mit rasiermesser):

var date = moment('@YourDateTime.ToString("s", System.Globalization.CultureInfo.InvariantCulture)'); 

Von momentjs doc:

Wenn Sie einen Moment aus einem String erstellen, wir zunächst prüfen, ob die Zeichenfolge Spielen vorhanden ISO 8601-Formate

(Source)

Von .NET doc:

Das "s" Standardformatbezeich spiegelt einen definierten Standard (ISO 8601)

(Source)

bearbeiten

Solu

@foreach (var item in Model) { 
    <p data-utcdate="@item.startDate.ToString("s", System.Globalization.CultureInfo.InvariantCulture)"></p> 
} 

JS (mit JQuery):

<script type="text/javascript"> 
    $(function() { 
     $('[data-utcdate]').each(function() { 
      var d = moment($(this).attr('data-utcdate')); 
      $(this).html(d.format()); 
     }); 
    }); 
</script> 

Wenn Sie anzeigen möchten tion momentjs mit Razor zu kombinieren, um eine Reihe von DateTime

HTML/Razor anzuzeigen Ihr Datum mit einem anderen Format: http://momentjs.com/docs/#/displaying/format/

Answer 2

Sie müssen den Moment Zeitzone Funktionen verwenden. http://momentjs.com/timezone/docs/#/using-timezones/converting-to-zone/

Vergessen Sie nicht, auf die Zeitzonendatendatei zu verweisen.

Der Link How to turn Razor Model into JS object in a Razor For Loop? erklärt, wie es gemacht wird.

Answer 3

Wenn Sie Ansichten haben, die einige Daten oder Zeitstempel in Razor und einige in Javascript angezeigt werden, hier ist eine Javascript-Funktion, die eine .NET-Format-String wie {0:MM/dd/yyyy} in eine moment.js (eigentlich moment-timezone.js) Format-String übersetzen wird:

// Convert a single .NET date format to use with moment.js. 
DotNetToMomentFormat = function (s0) { 
    s0 = s0.replace(/\{\d+:(.*)\}/, "$1"); // remove placeholder 
    var m = s0.match(/((.)\2*)/g); 
    var s1 = m.reduce(function (a,s) { 
      switch (s) { 
       case "d": s = "MM/DD/YYYY"; break; 
       case "dd": s = "DD"; break; 
       case "ddd": s = "ddd"; break; 
       case "dddd": s = "dddd"; break; 
       case "D": s = "DD MMMM YYYY"; break; 
       case "f": s = "DD MMMM YYYY HH:mm"; break; 
       case "fff": s = "SSS"; break; 
       case "F": s = "DD MMMM YYYY HH:mm:ss"; break; 
       case "FFF": s = "SSS"; break; // no trailing 0s 
       case "g": s = "DD/MM/YYYY HH:mm"; break; 
       case "G": s = "DD/MM/YYYY HH:mm:ss"; break; 
       case "hh": s = "hh"; break; 
       case "HH": s = "HH"; break; 
       case "m": s = "MMMM DD"; break; 
       case "mm": s = "mm"; break; 
       case "M": s = "MMMM DD"; break; 
       case "MM": s = "MM"; break; 
       case "MMM": s = "MMM"; break; 
       case "MMMM": s = "MMMM"; break; 
       case "o": s = "YYYY-MM-DD HH:mm:ssZ"; break; 
       case "O": s = "YYYY-MM-DD HH:mm:ssZ"; break; 
       case "r": s = "ddd, DD MMM YYYY, H:mm:ss z"; break; 
       case "R": s = "ddd, DD MMM YYYY, H:mm:ss z"; break; 
       case "s": s = "YYYY-MM-DDTHH:mm:ss"; break; 
       case "ss": s = "ss"; break; 
       case "t": s = "HH:mm"; break; 
       case "tt": s = "A"; break; 
       case "T": s = "HH:mm:ss"; break; 
       case "u": s = "YYYY-MM-DD HH:mm:ssZ"; break; 
       case "y": s = "MMMM, YYYY"; break; 
       case "yy": s = "YY"; break; 
       case "yyyy": s = "YYYY"; break; 
       case "Y": s = "MMMM, YYYY"; break; 
      } 
      return a + s; 
     }, 
     ""); 
    return s1; 
} 

Dann in Razor, einige Beispiel-Code wäre:

@{ 
    var today = DateTime.Today; 
    string dateFormat = "{0:MM/dd/yyyy}"; 
} 
<div>The MVC-formatted date is @(string.Format(dateFormat, today)).</div> 
<div>The moment-formatted date is <span id="today"></span>.</div> 

<script type="text/javascript"> 
    var x = window.document.getElementById("today"); 
    var y = moment("@today.ToString("O")"); 
    x.innerHTML = y.format(DotNetToMomentFormat("@dateFormat")); 
</script> 

Ab diesem Beitrag der entsprechende Ausgang wäre:

The MVC-formatted date is 02/03/2017. 
The moment-formatted date is 02/03/2017. 

Die andere Information, die Sie benötigen, ist die lokale Zeitzone des Benutzers und verwenden Sie die Zeitzone tz(timezonename), um sie vor dem Formatieren einzustellen.