我有一个 MVC 应用程序,我使用得很好。我使用 Knockout.js 进行绑定(bind)并在编辑页面上使用它,您也可以在其中编辑子记录。一切似乎都工作正常,除了当我单击“保存”时,所有日期选择器都重置为今天的日期。保存的数据会持久保存到数据库中,但该页面上所有日期选择器中的数据都会发生变化。刷新页面会显示正确的持久数据。
之前:
之后:
这是我的代码:
编辑页面:
@model SPMVC.Models.SeasonViewModel
@using Newtonsoft.Json
@{
ViewBag.Title = "Edit Season";
}
@{ string data = JsonConvert.SerializeObject(Model); }
@section scripts
{
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery-ui-1.11.1.js"></script>
<script src="~/Scripts/knockout-3.2.0.js"></script>
<script src="~/Scripts/knockout.mapping-latest.js"></script>
<script src="~/Scripts/moment.js"></script>
<link href="~/Content/select2.css" rel="stylesheet" />
<script src="~/Scripts/select2.js"></script>
<script>
$(document).ready(function () { $("#e1").select2(); });
</script>
<script src="~/Scripts/seasonsviewmodel.js"></script>
<script type="text/javascript">
var seasonViewModel = new SeasonViewModel(@Html.Raw(data));
ko.applyBindings(seasonViewModel);
</script>
}
@Html.Partial("_EditSeason")
编辑部分 View :
<h2>@ViewBag.Title</h2>
<p data-bind="text: MessageToClient"></p>
<div class="form-group">
<label class="control-label" for="SeasonDescription">Season Description</label>
<input class="form-control" name="SeasonDescription" id="SeasonDescription" data-bind="value: SeasonDescription, event: {change: flagSeasonAsEdited}, hasfocus: true" />
</div>
<div class="form-group">
<label class="control-label" for="StartDate">Start Date</label>
<input class="form-control" type="text" name="StartDate" id="StartDate" data-bind="datepicker: StartDate, datepickerOptions: {dateFormat: 'DD, MM d, yy'}, event: {change: flagSeasonAsEdited}" />
</div>
<div class="form-group">
<label class="control-label" for="Publish">Publish</label>
<input class="checkbox" name="Publish" id="Publish" type="checkbox" data-bind="checked: Publish, event: {change: flagSeasonAsEdited}" />
</div>
<table class="table table-striped">
<tr>
<th>Game Description</th>
<th>Game Type</th>
<th>Game Date</th>
<th>Publish to Schedule</th>
<th>Publish Results</th>
<th><button data-bind="click: addGame" class="btn btn-info btn-xs">Add</button></th>
</tr>
<tbody data-bind="foreach: Games">
<tr>
<td class="form-group"><input class="form-control input-sm" data-bind="value: GameDescription, event: {change: flagGameAsEdited}, hasfocus: true" /></td>
<td class="form-group"><select data-bind="options: $parent.gameTypes, optionsText: 'GameTypeDescription', optionsValue: 'Id', value: GameTypeId, select2: { }, event: {change: flagGameAsEdited}"></select></td>
<td class="form-group"><input class="form-control input-sm" type="text" data-bind="datepicker: GameDate, datepickerOptions: {dateFormat: 'DD, MM d, yy'}, event: {change: flagGameAsEdited}" /></td>
<td class="form-group"><input class="checkbox" type="checkbox" data-bind="checked: PublishToSchedule, event: {change: flagGameAsEdited}"></td>
<td class="form-group"><input class="checkbox" type="checkbox" data-bind="checked: PublishResults, event: {change: flagGameAsEdited}"></td>
<td class="form-group"><button data-bind="click: $parent.deleteGame" class="btn btn-danger btn-xs">Delete</button></td>
</tr>
</tbody>
</table>
<p><button data-bind="click: save" class="btn btn-primary">Save</button></p>
<p><a href="/Admin/Seasons/" class="btn btn-default btn-sm">« Back to List</a></p>
knockout View 模型:
SeasonViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, gameMapping, self);
self.save = function () {
$.ajax({
url: "/Seasons/Save/",
type: "POST",
data: ko.toJSON(self),
contentType: "application/json",
success: function (data) {
// TODO: When re mapping the view model after save, all dates are in date2??
if (data.seasonViewModel != null)
ko.mapping.fromJS(data.seasonViewModel, {}, self);
if (data.newLocation != null)
window.location = data.newLocation;
}
});
},
self.flagSeasonAsEdited = function () {
if (self.ObjectState() != ObjectState.Added) {
self.ObjectState(ObjectState.Modified);
}
return true;
},
self.addGame = function () {
// Game defaults
var game = new GameViewModel({ Id: 0, GameDescription: "", GameTypeId: 1, GameDate: new Date(), PublishToSchedule: false, PublishResults: false, ObjectState: ObjectState.Added })
self.Games.push(game);
},
self.deleteGame = function (game) {
self.Games.remove(this);
if (game.Id() > 0 && self.GamesToDelete.indexOf(game.Id()) == -1)
self.GamesToDelete.push(game.Id());
};
};
GameViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, gameMapping, self);
self.flagGameAsEdited = function () {
if (self.ObjectState() != ObjectState.Added) {
self.ObjectState(ObjectState.Modified);
}
return true;
};
};
GameTypeViewModel = function (data) {
var self = this;
ko.mapping.fromJS(data, gameTypeMapping, self);
ko.applyBindings(new GameTypeViewModel());
};
var gameMapping = {
'Games': {
key: function (game) {
return ko.utils.unwrapObservable(game.Id);
},
create: function (options) {
return new GameViewModel(options.data);
}
}
};
var gameTypeMapping = {
'gameTypes': {
key: function (gameType) {
return ko.utils.unwrapObservable(gameType.Id);
},
create: function (options) {
return new GameTypeViewModel(options.data);
}
}
};
var ObjectState = {
Unchanged: 0,
Added: 1,
Modified: 2,
Deleted: 3
};
// Custom Knockout binding handler for date picker
ko.bindingHandlers.datepicker = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
ko.utils.registerEventHandler(element, "change", function () {
var observable = valueAccessor();
observable($(element).datepicker("getDate"));
});
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).datepicker("destroy");
});
},
update: function (element, valueAccessor) {
var value = new Date(ko.utils.unwrapObservable(valueAccessor()));
var current = $(element).datepicker("getDate");
// Prevents the datepicker from popping up a second time
if (value - current !== 0) {
// For some stange reason, Chrome subtracts a day when first displaying the date
if (navigator.userAgent.indexOf('Chrome') > -1 && value != '') {
var date = value.getDate() + 1;
var month = value.getMonth();
var year = value.getFullYear();
value = new Date(year, month, date);
};
$(element).datepicker("setDate", value);
}
}
};
// Custom knockout binding handler for read-only date display
ko.bindingHandlers.dateString = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
var value = valueAccessor();
var allBindings = allBindingsAccessor();
var pattern = allBindings.datePattern || 'dd/MM/yyyy';
var momentObj = moment(ko.utils.unwrapObservable(value), moment.ISO_8601);
$(element).text(momentObj.format(pattern));
}
};
ko.bindingHandlers.select2 = {
init: function (element, valueAccessor, allBindingsAccessor) {
// var options = ko.toJS(valueAccessor()) || {};
// setTimeout(function () {
// $(element).select2(options);
// }, 0);
//}
var obj = valueAccessor(),
allBindings = allBindingsAccessor(),
lookupKey = allBindings.lookupKey;
$(element).select2(obj);
if (lookupKey) {
var value = ko.utils.unwrapObservable(allBindings.value);
$(element).select2('data', ko.utils.arrayFirst(obj.data.results, function (item) {
return item[lookupKey] === value;
}));
}
}
};
任何人都可以解释为什么会发生这种行为吗?
感谢您花时间阅读这篇文章。
保罗。
最佳答案
如果没有看到你的 Controller 方法,很难判断这是否是确切的问题,但我在我正在从事的项目中遇到了类似的问题。
这与 MVC 默认 JSON 格式化程序相对于 JSON.NET JsonConvert.SerializeObject
的工作方式有关。
在ajax调用的success
函数中,您访问data.seasonViewModel
(我假设这是传递给“/Seasons/的数据集的潜在操纵副本” Save/"调用)您可能会恢复所有日期的 MVC 默认序列化日期格式(看起来像“/Date(1239018869048)/”)。因此,您的 knockout 模型将在返回时使用此值进行初始化,而不是首次加载页面时由 JsonConvert.SerializeObject
创建的更可用的格式。
现在,当自定义日期选择器绑定(bind)的 update
函数从可观察对象中提取该值时,它使用 new Date(ko.utils.unwrapObservable(valueAccessor()))
它将尝试从 MVC 默认序列化日期格式创建日期,但会失败。
如果是这种情况,解决方案是将 MVC 的默认 JSON 格式化程序切换为使用 JSON.NET,或创建一个使用 JSON.NET 进行这些调用序列化的 JsonResult。
几个例子:
How do I sub in JSON.NET as model binder for ASP.NET MVC controllers?
Using JSON.NET as the default JSON serializer in ASP.NET MVC 3 - is it possible?
关于javascript - 带有 Knockout.js 和 MVC 的 jQuery 日期选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27697229/