使用Asp.Net MVC和KnockoutJS处理日期

Question

我最近开始使用KnockoutJs并很快意识到使用默认的Json(myModelWithADate)导致默认的json编码为\\/Date(-62135578800000)\\/通过一些研究我找到了四种可能的方法来处理我的日期显示dom元素。

1）创建一个绑定，处理从Json日期到您想要的格式的转换

ko.bindingHandlers.date = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var jsonDate = valueAccessor();
        var value = new Date(parseInt(jsonDate.substr(6)));
        var ret = value.getMonth() + 1 + "/" + value.getDate() + "/" + value.getFullYear();
        element.innerHTML = ret;
    },
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {

    }
};

用法

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

2）从控制器返回“字符串”

return Json(new {MyDate = DateTime.Now.ToShortDateString()});

3）使用JSON.NET指定在james.newtonking.com上看到的日期时间格式

例

string isoJson = JsonConvert.SerializeObject(entry, new IsoDateTimeConverter());
// {"Details":"Application started.","LogDate":"2009-02-15T00:00:00Z"}

4）使用JSON.parse来处理您的日期，如此stackoverflow答案中所示。

JSON.parse(jsonText, function(key, value) {
    // Check for the /Date(x)/ pattern
    var match = /\/Date\((\d+)\)\//.exec(value);
    if (match) {
        var date = new Date(+match[1]); // Convert the ticks to a Date object
        return humanReadable(date); // Format the date how you want it
    }

    // Not a date, so return the original value
    return value;
});

他们似乎都工作，但我仍然在努力与哪一个感觉“正确”。 现在，我的内心正在与绑定和返回的字符串混合。 正如我可以看到自己扩展绑定以使用jQuery UI datepicker控件处理输入。

处理显示日期或其他类型（如货币）时是否有可接受的做法？ 我还缺少另一个可以解决这个问题的选择吗？

Answer 1

我个人认为JSON.NET解决方案是最好的，因为它对客户端的影响较小。 所有其他解决方案都需要额外的客户端解析或其他客户端代码。

我已经切换到使用JSON.NET来使用所有使用JSON的ASP .NET代码，因为它是一个更可定制的库。

例如，我必须在MVC中实现符合Google的Chart API （与Knockout结合用于分页等）的JSON数据，而默认的JavascriptSerializer根本无法做到。

除了JSON.NET，你可以自定义它以实际吐出完整的Knockout视图模型，这样你甚至不需要使用映射插件。

我写了一个名为FluentJson.NET的示例库，它允许您在Razor中执行以下操作：

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

得到：

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

因此，您可以获得一个Knockout视图模型，而无需任何客户端箍跳过。

你可以轻松地扩展这样的东西来处理日期值，但你更喜欢。

Answer 2

我建议通过ko.mapping.fromJS( data, mapping )的中间人方法ko.mapping.fromJS( data, mapping )这将允许您甚至使用用户定义的对象进行自定义。

var $data = { _ID : '1', _Created : someDate };  
var $mapping = {
    '_Created' : {
       update: function (options) {
           return convertdata( options.data );
       }
    }
}
var viewDataModel = ko.mapping( data, mapping );  
ko.applyBindings( viewDataModel );

mapping参数允许您轻松处理更改，也可以轻松地使用数组。

Answer 3

在knockoutjs中处理日期的更好方法是使用时刻库​​并处理像boss这样的日期。 您可以轻松处理/ Date（-62135578800000）/等日期。 无需担心控制器中序列化日期的方式。

方法1：直接在视图中：

让我们说你的淘汰模型在一个名为sentDate的可观察对象中得到这样的日期，现在它有值/日期（-62135578800000）/。 要在视图中绑定它，您可以：

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

方法2：在自定义绑定中

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) {

    }
};

用法和你说的一样：

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

momentjs支持日期上的大量日期时间格式和实用程序功能。

Answer 4

我正在使用以下代码生成短日期字符串。 我将它用于我的日期字符串和jQueryUi日期选择器。

class T
    {
        public DateTime d { get; set; }
    }

static void Main(string[] args)
    {
        var k = new T { d = DateTime.Now };

        var formatter = new IsoDateTimeConverter();
        formatter.DateTimeFormat = "d";
        var s = JsonConvert.SerializeObject(k, formatter);
    }

这会生成以下JSON

"{"d":"4/21/2012"}"

这样可以为我提供干净的JavaScript代码。

Answer 5

刚刚提出这个问题，因为我们也开始在我们的MVC3应用程序上使用knockout.js。 由于我们已经有了jQuery datepicker，我们需要通过locale以不同的方式格式化日期（门户网站有不同的语言，每种语言都有不同的格式），所以也许这个技术要求的混搭会出现在其他地方，并且会很有用：

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) {
    }
};

然后在视图中，例如：

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

Answer 6

@ photo_tom答案的一个更清晰的替代方法是通过JsonConverter属性使用IsoDateTimeConverter来装饰属性，如下所示：

public class MyClass
{
    [JsonConverter(typeof(IsoDateTimeConverter))]
    public DateTime Timestamp { get; set; }
}

Answer 7

我喜欢Andres Toro的答案，但在我的情况下，输入字段需要格式化的字符串。 因此，我使用JQuery根据我的帮助器@Html.ConvertDateFormat()提供的格式来格式化我的日期。希望这有助于某一天。

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);

Answer 8

我总是使用数据转换器而不是直接向服务器发送数据来修复任何客户端编码或解析问题，而无需使用其他工具。

在Knockout JS视图模型文件中，我在视图模型设置之前添加以下代码，它拦截视图模型的选定proeprries并使用moment.js来处理日期转换：

// converting data before sending to controller
var dataConverter = function (key, value) {  
    if (key === 'InvoiceDate') {
        return moment(value).format("YYYY MMMM DD");
    }

    return value;
};

然后我使用dataConverter而不是视图模型中的ajax save方法中的data ：

// Example view model for sales invoice
SalesInvoiceViewModel = function (data) {
    var self = this;
    ko.mapping.fromJS(data, {}, self);
    self.SaveInvoice = function () {
        $.ajax({
            url: '/SalesInvoices/SaveInvoice/',
            type: 'POST',
            data: ko.toJSON(self, **dataConverter**),
            contentType: 'application/json',
            success: function (data) {
                if (data.invoiceViewModel !== null) {
                    ko.mapping.fromJS(data.invoiceViewModel, {}, self);
                }
                if (data.redirectToLocation !== null) {
                    window.location = data.redirectToLocation;
                }
            },
            error: function (xhr, ajaxOptions, thrownError) {
                // report error to user
            }
        });
    }