我在Visual Studio 2012中有一个MVC Razor项目，并且正在使用Kendo UI Web HTML控件。我有一个通过弹出窗口编辑的网格。当我编辑记录时，我的模型会使用所有控件的值进行更新，除了两个DatePickers。在Firebug中，我可以看到日期值以“Tue May 14 2013 00:00:00 GMT + 1000（AUS东部标准时间）”的格式发布，但模型被发送到数据源的transport：update函数（UpdateRegisterEntry） ）将这些字段设为null。谁能帮帮我吗？以下是相关代码：
_Layout.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="@Url.Content("~/Scripts/EditorHookup.js")" type="text/javascript"></script>
<!-- Common Kendo UI Web CSS -->
<link href="~/Content/kendo/2013.1.319/kendo.common.min.css" rel="stylesheet" />
<!-- Default Kendo UI Web theme CSS -->
<link href="~/Content/kendo/2013.1.319/kendo.default.min.css" rel="stylesheet" />
<!-- jQuery JavaScript -->
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<!-- Kendo UI Web combined JavaScript -->
<script src="~/Scripts/kendo/2013.1.319/kendo.web.min.js"></script>
<script src="~/Scripts/kendo/2013.1.319/cultures/kendo.culture.en-AU.min.js"></script>
<script type="text/javascript">
//set the Kendo UI culture
kendo.culture("en-AU");
</script>
</head>
<body>
<div id="body">@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">@RenderBody()
</section>
<p class="content-wrapper">
<label style="color: Red; font-weight: bold; margin-left: 10px" id="lblStatus" runat="server">@ViewBag.Status</label>
</p>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© @DateTime.Now.Year - FAI Register</p>
</div>
</div>
</footer>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
主要观点：
@model IEnumerable<FaiRegisterMvc.Models.RegisterEntry>
@{
ViewBag.Title = "Register";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script>
var faistatuses = [];
$(document).ready(function ()
{
var dataSource = new kendo.data.DataSource({
error: function (e)
{
debugger;
var xhr = e.xhr;
var statusCode = e.status;
var errorThrown = e.errorThrown;
var msg = xhr.responseText;
},
transport: {
read: {
url: "api/register",
dataType: "json"
},
destroy: {
url: "api/register/Delete/DeleteRegisterEntry",
dataType: "json",
type: "POST"
},
create: {
url: "api/register/Insert/InsertRegisterEntry",
dataType: "json",
type: "POST"
},
update: {
url: "api/register/Update/UpdateRegisterEntry",
dataType: "json",
type: "POST"
},
parameterMap: function (data, type)
{
switch (type)
{
case "create":
return data;
break;
case "destroy":
return data;
break;
case "update":
return data;
break;
}
}
},
batch: false,
pageSize: 20,
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false, nullable: false },
FaiNumber: { type: "string" },
ApNumber: { type: "number", validation: { required: true } },
WorkOrder: { type: "string", validation: { required: true } },
FaiReportUrl: { type: "string" },
IsAssembly: { type: "boolean" },
IsDelta: { type: "boolean" },
EngineeringNumber: { type: "string" },
ModelRevision: { type: "string" },
ManufacturingNumber: { type: "string" },
Description: { type: "string" },
InitiatingDocumentNumber: { type: "string" },
QaInitiator: { type: "string" },
Qap: { type: "string" },
QapDate: { type: "date" },
FaiStatusId: { type: "number", defaultValue: 1 },
OpQap: { type: "string" },
CompletionDate: { type: "date" } }
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
autoBind: false, // disable autobinding as we should wait for the fai statues to be loaded
pageable: true,
height: "80%",
width: "100%",
toolbar: ["create", { name: "destroy", template: "<a class='k-button k-button-icontext k-grid-delete' onclick='removeSelectedRow()'><span class='k-icon k-delete' title='Click to delete item.'></span>Delete</a>" }],
selectable: "row",
columns:
[
"Id",
{
command: [
{ name: "edit", text: "", template: function () { return "<a class='k-button k-button-icontext k-grid-edit' href='#'><span class='k-icon k-edit' title='Click to edit item.' />" } }
], title: " ", width: "57px", attributes: { "style": "text-align: center" }
},
{ field: "Id", title: "Id", width: "50px", hidden: true },
{ field: "FaiNumber", title: "FAI Number", width: "130px" },
{ field: "ApNumber", title: "Ap Number", width: "85px", format: "{0:n0}" },
{ field: "WorkOrder", title: "Work Order", width: "85px" },
{
field: "FaiReportUrl",
template: function (dataItem)
{
return "<a href='" + kendo.htmlEncode(dataItem.FaiReportUrl) + "' target='_blank'><img alt='FAI Report' src='Images/report.gif' title='" + kendo.htmlEncode(dataItem.FaiReportUrl) + "' /></a>"
},
title: "FAI Report", width: "80px", attributes: { "style": "text-align: center" }
},
{ field: "IsAssembly", title: "Is Assembly", width: "85px", attributes: { "style": "text-align: center" } },
{ field: "IsDelta", title: "Is Delta", width: "60px", attributes: { "style": "text-align: center" } },
{ field: "EngineeringNumber", title: "Engineering No.", width: "110px" },
{ field: "ModelRevision", title: "Model Rev.", width: "80px" },
{ field: "ManufacturingNumber", title: "Manufacturing No.", width: "125px" },
{ field: "Description", title: "Description", width: "175px" },
{ field: "InitiatingDocumentNumber", title: "Initiating Doc. No.", width: "125px" },
{ field: "QaInitiator", title: "Qa Initiator", width: "100px" },
{ field: "Qap", title: "Qap", width: "100px" },
{ field: "QapDate", title: "Qap Date", width: "100px", format: "{0:dd/MM/yyyy}" },
{ field: "CompletionDate", title: "Completion Date", width: "100px", format: "{0:dd/MM/yyyy}" },
{
field: "FaiStatusId", title: "Fai Status", width: "150px", editor: faiStatusDropDownEditor, template: "#=getRegistryStatusName(FaiStatusId)#"
} ],
editable: {
confirmation: "Are you sure you want to delete this item?",
mode: "popup",
template: $("#popupTemplate").html(),
createAt: "top"
},
edit: function () { try { HookUpEditors(); } catch (e) { } }
});
//get fai statuses and rebind the grid
$.getJSON("api/register/statuses", function (data)
{
faistatuses = data;
dataSource.fetch();
});
});
var removeSelectedRow = function ()
{
$.each($("#grid").data("kendoGrid").tbody.find(".k-state-selected"), function (index, value)
{
$("#grid").data("kendoGrid").removeRow(value);
});
};
$("#grid").kendoGrid({
dataBound: onDataBound
});
function onDataBound()
{
// get a reference to the grid widget
var grid = $("#grid").data("dataSource");
}
function faiStatusDropDownEditor(container, options)
{
$('<div data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "RegistryStatusName",
dataValueField: "Id",
dataSource: faistatuses
});
}
function getRegistryStatusName(faiStatusId)
{
for (var idx = 0, length = faistatuses.length; idx < length; idx++)
{
if (faistatuses[idx].Id === faiStatusId)
{
return faistatuses[idx].RegistryStatusName;
}
}
}
</script>
<h2>Register</h2>
<div id="grid" style="min-height: 650px">
</div>
<script type="text/x-kendo-template" id="popupTemplate">
<text>
@Html.Partial("~/Views/Shared/EditorTemplates/_PopUpRegisterEditor.cshtml", new FaiRegisterMvc.Models.RegisterEntry())
</text>
</script>
弹出编辑器局部视图
@model FaiRegisterMvc.Models.RegisterEntry
@using(Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<style>
td
{
text-align: left;
}
.editor-label
{
font-size: .7em;
margin: 4px 2px 4px 2px !important;
padding: 4px 2px 4px 2px !important;
text-align: left;
white-space: nowrap;
}
.editor-field
{
margin: 4px 2px 4px 2px !important;
padding: 4px 2px 4px 2px !important;
height: .7em !important;
font-size: .7em;
}
</style>
@Html.HiddenFor(model => model.Id)
<table style="vertical-align: top; border: 0; margin-bottom: 25px; padding-bottom: 25px">
<tr>
<td colspan="2">
<div class="editor-label">
@Html.LabelFor(model => model.FaiNumber)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.FaiNumber, new
{
style = "width:200px"
})
@Html.ValidationMessageFor(model => model.FaiNumber)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.WorkOrder)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.WorkOrder, new
{
style = "width:200px"
})
@Html.ValidationMessageFor(model => model.WorkOrder)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.IsAssembly)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.IsAssembly)
@Html.ValidationMessageFor(model => model.IsAssembly)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.EngineeringNumber)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.EngineeringNumber, new
{
style = "width:200px"
})
@Html.ValidationMessageFor(model => model.EngineeringNumber)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.InitiatingDocumentNumber)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.InitiatingDocumentNumber, new
{
style = "width:200px"
})
@Html.ValidationMessageFor(model => model.InitiatingDocumentNumber)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.Qap)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.Qap, new
{
style = "width:200px"
})
@Html.ValidationMessageFor(model => model.Qap)
</div>
<div style="padding: 5px 0px 0px 0px; white-space: nowrap">
<div class="editor-label">
@Html.LabelFor(model => model.FaiStatusId)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.FaiStatusId, new
{
style = "width:200px"
})
@Html.ValidationMessageFor(model => model.FaiStatusId)
</div>
</div>
<div class="editor-label">
@Html.LabelFor(model => model.OpQap)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.OpQap, new
{
style = "width:200px"
})
@Html.ValidationMessageFor(model => model.OpQap)
</div>
</td>
<td colspan="3">
<div class="editor-label">
@Html.LabelFor(model => model.ApNumber)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ApNumber, new
{
style = "width:200px"
})
@Html.ValidationMessageFor(model => model.ApNumber)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ModelRevision)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ModelRevision, new
{
style = "width:200px"
})
@Html.ValidationMessageFor(model => model.ModelRevision)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.IsDelta)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.IsDelta)
@Html.ValidationMessageFor(model => model.IsDelta)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ManufacturingNumber)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ManufacturingNumber, new
{
style = "width:200px"
})
@Html.ValidationMessageFor(model => model.ManufacturingNumber)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.QaInitiator)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.QaInitiator, new
{
style = "width:200px"
})
@Html.ValidationMessageFor(model => model.QaInitiator)
</div>
<div style="padding: 5px 0px 4px 0px; white-space: nowrap">
<div class="editor-label">
@Html.LabelFor(model => model.QapDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.QapDate)
@Html.ValidationMessageFor(model => model.QapDate)
</div>
</div>
<div class="editor-label">
@Html.LabelFor(model => model.CompletionDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CompletionDate)
@Html.ValidationMessageFor(model => model.CompletionDate)
</div>
</table>
}
RegisterEntry模型
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace FaiRegisterMvc.Models
{
public class RegisterEntry
{
public RegisterEntry()
{
}
public decimal Id
{
get
{
return _ID;
}
set
{
if(_ID != value)
{
_ID = value;
}
}
}
private decimal _ID;
[DisplayName("FAI Number")]
public string FaiNumber
{
get
{
return _FAI_NUMBER;
}
set
{
_FAI_NUMBER = value;
}
}
private string _FAI_NUMBER;
[DisplayName("Ap Number")]
public decimal? ApNumber
{
get
{
return _AP_NUMBER;
}
set
{
_AP_NUMBER = value;
}
}
private decimal? _AP_NUMBER;
[DisplayName("Work Order")]
public string WorkOrder
{
get
{
return _WORK_ORDER;
}
set
{
_WORK_ORDER = value;
}
}
private string _WORK_ORDER;
[DisplayName("FAI Report")]
public string FaiReportUrl
{
get
{
return _FAI_REPORT_URL;
}
set
{
_FAI_REPORT_URL = value;
}
}
private string _FAI_REPORT_URL;
[DisplayName("Is Assembly?")]
public bool IsAssembly
{
get
{
return _IS_ASSEMBLY;
}
set
{
_IS_ASSEMBLY = value;
}
}
private bool _IS_ASSEMBLY;
[DisplayName("Is Delta?")]
public bool IsDelta
{
get
{
return _IS_DELTA;
}
set
{
_IS_DELTA = value;
}
}
private bool _IS_DELTA;
[DisplayName("Engineering No.")]
public string EngineeringNumber
{
get
{
return _ENGINEERING_NUMBER;
}
set
{
_ENGINEERING_NUMBER = value;
}
}
private string _ENGINEERING_NUMBER;
[DisplayName("Model Rev.")]
public string ModelRevision
{
get
{
return _MODEL_REV;
}
set
{
_MODEL_REV = value;
}
}
private string _MODEL_REV;
[DisplayName("Manufacturing No.")]
public string ManufacturingNumber
{
get
{
return _MANUFACTURING_NUMBER;
}
set
{
_MANUFACTURING_NUMBER = value;
}
}
private string _MANUFACTURING_NUMBER;
public string Description
{
get
{
return _DESCRIPTION;
}
set
{
_DESCRIPTION = value;
}
}
private string _DESCRIPTION;
[DisplayName("Initiating Doc. No.")]
public string InitiatingDocumentNumber
{
get
{
return _INITIATING_DOC_NUMBER;
}
set
{
_INITIATING_DOC_NUMBER = value;
}
}
private string _INITIATING_DOC_NUMBER;
[DisplayName("Qa Initiator")]
public string QaInitiator
{
get
{
return _QA_INITIATOR;
}
set
{
_QA_INITIATOR = value;
}
}
private string _QA_INITIATOR;
public string Qap
{
get
{
return _QAP;
}
set
{
_QAP = value;
}
}
private string _QAP;
[UIHint("DateTime")]
[DisplayName("Qap Date")]
public DateTime? QapDate
{
get
{
return _QAP_DATE;
}
set
{
_QAP_DATE = value;
}
}
private DateTime? _QAP_DATE;
[UIHint("FaiStatuses")]
[DisplayName("Fai Status")]
public decimal? FaiStatusId
{
get
{
return _FAI_STATUS_ID;
}
set
{
_FAI_STATUS_ID = value;
}
}
private decimal? _FAI_STATUS_ID;
[DisplayName("Op QAP")]
public string OpQap
{
get
{
return _OP_QAP;
}
set
{
_OP_QAP = value;
}
}
private string _OP_QAP;
[UIHint("DateTime")]
[DataType(DataType.Date)]
[DisplayName("Completion Date")]
public DateTime? CompletionDate
{
get
{
return _COMPLETED_DATE;
}
set
{
_COMPLETED_DATE = value;
}
}
private DateTime? _COMPLETED_DATE;
}
DateTime编辑器模板
@model DateTime?
@Html.TextBox("", Model.GetValueOrDefault(), "dd/MM/yyyy", new
{
@class = "date",
style = ViewData["style"]
})
相关Javascript
var faistatuses = [];
function HookUpEditors()
{
//get fai statuses and rebind the grid
$.getJSON("api/register/statuses", function (data)
{
faistatuses = data;
});
$(".date").kendoDatePicker({
value: new Date(),
min: new Date(1950, 0, 1),
max: new Date(2049, 11, 31),
culture: "en-AU",
format: "dd/MM/yyyy",
parseFormats: ["dd/MM/yyyy"]
});
$(".currency").kendoNumericTextBox({
format: "c2"
});
$(".decimal").kendoNumericTextBox({
format: "n0",
min: 0
});
$(".percentage").kendoNumericTextBox({
format: "p0"
});
$(".faistatuses").kendoDropDownList({
dataTextField: "RegistryStatusName",
dataValueField: "Id",
dataSource: faistatuses
});}
}
答案 0 :(得分：2)
我已经想出如何解决这个问题。我需要重新格式化日期，以便json和其他服务都可以。
在kendo ui数据源的参数map函数中，我正在执行以下操作：
parameterMap: function (data, type)
{
if ( type != "read")
{
data.DateField = fixDateFormat(data.DateField);
}
}
function fixDateFormat(date)
{
var formatted;
if (date != null)
{
formatted = date.getFullYear() + "-" +
("0" + (date.getMonth() + 1)).slice(-2) + "-" +
("0" + date.getDate()).slice(-2);
}
return formatted;
}
希望这很清楚并有助于其他人。