Behandlung von Daten mit Asp.Net MVC und KnockoutJS

Ich persönlich denke, die JSON.NET Lösung ist die beste, einfach, weil es auferlegt, die weniger auf dem client. Alle anderen Lösungen erfordern zusätzliche client-Analyse oder zusätzliche client-code.

Habe ich umgeschaltet, um mit JSON.NET für alle meine ASP .NET-code, verwendet von JSON, weil es ein viel mehr anpassbare Bibliothek.

So habe ich zum Beispiel hatte zu implementieren, der die JSON-Daten in MVC, entsprach Google Chart API (in Kombination mit Knockout für paging, etc.) und die Standard - JavascriptSerializer einfach nicht tun es.

Zusätzlich mit JSON.NET Sie können es tatsächlich spuckte voller Knockout-Modelle anzeigen, so dass Sie nicht sogar brauchen, zu beschäftigen das mapping plugin.

Schrieb ich eine sample library namens FluentJson.NET, die lässt Sie Dinge tun, in Gestochen wie:

var viewModel = @JsonObject.Create()
    .AddProperty("name", "value")
    .AddObservable("knockoutProperty", 123)

Und erhalten:

var viewModel = {"name":"value","knockoutProperty":ko.observable(123)}

So können Sie ein Knockout-view-Modell ohne client-side Reifen zu springen durch.

Könnte man leicht erweitern, etwas wie das zu handhaben, Datums-Werte, jedoch, das Sie bevorzugen würden.

InformationsquelleAutor der Antwort Paul Tyng

Den besseren Weg zu behandeln, Termine in knockoutjs ist die Nutzung moment Bibliothek und verarbeiten Daten wie boss.
Sie können leicht befassen sich mit Daten wie Datum /(-62135578800000)/. Keine Notwendigkeit zu kümmern, wie Ihre serialisieren Datum im controller.

Ansatz 1 : Direkt im Blick:

Lets sagen, dass Ihre knockout-Modell bekommt wie ein Datum in einer beobachtbaren genannt sentDate und jetzt ist es schon Wert /Datum(-62135578800000)/. Binden Sie Sie in der Ansicht können Sie tun :

<p><label>Date</label>: <span data-bind="moment(sentDate).format('MM/DD/YYYY')"></span></p>

Ansatz 2 : In benutzerdefinierte Bindung

ko.bindingHandlers.date = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var jsonDate = valueAccessor();     
        var ret = moment(jsonDate).format('MM/DD/YYYY');
        element.innerHTML = ret;
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {

    }
};

Nutzung derselben, wie Sie gesagt hatte :

<td data-bind="date: sentDate">
</td>

momentjs unterstützt viele Datums -, Zeit-Formate und utility-Funktionen auf Daten.

InformationsquelleAutor der Antwort Ajay Kelkar

Gerade kam auf diese Frage, weil wir auch begonnen, mit knockout.js auf unserer MVC3 app.
Da wir bereits über jQuery-datepicker und wir müssen das formatieren von Daten anders als durch locale (portal hat verschiedenen Sprachen und unterschiedlichen Formaten präsentiert werden, pro Sprache), so vielleicht dieses mashup von technologischen Anforderungen entstehen woanders und wird nützlich sein:

var jsDateFormat = "@CultureHelper.JsDateFormat"; //can be something like yy-mm-dd

//...

 ko.bindingHandlers.date = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var value = valueAccessor();
        if (value != null) {
            var jsonDate = new Date(parseInt(valueAccessor().substr(6)));
            element.innerHTML = jQuery.datepicker.formatDate(jsDateFormat, jsonDate);
        }
    },
    update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    }
};

Und in der Ansicht dann zum Beispiel:

<p><label>Date</label>: <span data-bind="date: SentDate"></span></p>

InformationsquelleAutor der Antwort povilasp

Ich liebte Andres Toro Antwort, außer dass in meinem Fall, Eingabefelder erwarten formatierten strings. So bin ich mit Hilfe von JQuery zu formatieren, meine Termine nach meinem Lieblings-format von meinem Helfer @Html.ConvertDateFormat()
Hoffe, dies hilft jemand Tag.

var mapping = {
    'ActualDateTime': {
        update: function (options) {
            var d = /\/Date\((\d*)\)\//.exec(options.data);
            return (d) ? $.datepicker.formatDate('@Html.ConvertDateFormat()', new Date(+d[1])) : value;
            //return "5/10/2017";
        }
    }
};
var paymentModel = ko.mapping.fromJS(modelJSON, mapping);

InformationsquelleAutor der Antwort Ashi