MVC4 Kendo Grid DateTime模板编辑器

时间:2013-06-21 15:36:42

标签: asp.net-mvc grid kendo-ui datetimepicker

我有这个型号:

public class MainModel 
{
private Guid m_id;
        public Guid Id
        {
            get { return m_id; }
            set { m_id = value; }
        }

        private string m_name;
        public string Name
        {
            get { return m_name; }
            set { m_name = value; }
        }
private ObservableCollection<Foundation> m_foundations;
        public ObservableCollection<Foundation> Foundations
        {
            get 
            {
                if (m_foundations== null)
                    m_foundations= new ObservableCollection<Foundation>();
                return m_foundations;
            }
            set { m_foundations= value; }
        }
}

public class Foundation
{
private ObservableCollection<Worker> m_workers;
        public ObservableCollection<Worker> Workers
        {
            get 
            {
                if (m_workers == null)
                {
                    m_workers = new ObservableCollection<Worker>();
                }
                return m_workers; 
            }
            set { m_workers = value; }
        }
}

public class Worker
{
[HiddenInput(DisplayValue = false)]
        public Guid Id
        {
            get { return m_id; }
            set { m_id = value; }
        }
[DataType(DataType.DateTime), DisplayFormat(DataFormatString = "{0:dd-MM-yyyy}", ApplyFormatInEditMode = true)]
        public DateTime BirthDate
        { get; set; }

}

我有一个接收此MainModel的partialView:

@using (Html.BeginForm("Save", "Controller", FormMethod.Post, new { ReturnUrl = ViewBag.ReturnUrl }))
    {
        @Html.TextBoxFor(m => m.Name)
        @Html.HiddenFor(m => m.Id)
<div id="workers">
@(Html.Kendo().Grid(Model.Foundations[0].Workers)
 .Name("grid")
                .Columns(columns =>
                {
                    columns.Command(command => { command.Edit().Text("Edit"); command.Destroy().Text("Delete"); }).Width(200);
                    columns.Bound(p => p.Name);
                    columns.Bound(p => p.BirthDate).Width(100).Format("{0: dd-MM-yyyy}").EditorTemplateName("BirthDate");
})
.Editable(editable => editable.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))
.DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                    .Model(model => model.Id(p => p.Id))
                    .Create(update => update.Action("EditingInline_Create", "Controller"))
                    .Update(update => update.Action("EditingInline_Update", "Controller"))
                    .Destroy(update => update.Action("EditingInline_Destroy", "Controller"))
                    ))
</div>

BirthDate编辑器有这样的东西

@model DateTime
@(
    Html.Kendo().DatePickerFor(m=>m).Name("birthDatePicker")
)

该模型适用于所有属性和日期时间。 问题是: model.Foundations [0] .Workers [] .LirthDate有一个有效的日期,但在模板编辑器中给我一个带有minvalue模型的日期时间。

当我编辑列时,显示的值将类似于01-01-0001而不是15-03-2006。 好的我只是更改日期,但是当我单击更新时,DateTime的值始终是DateTime.Now。在EditingInline_Update中,参数'worker'将BrithDate更改为DateTime.Now ...我改变的值无处可去。

我在某处读到这可能是一个文化形成问题,但我完全按照他们的说法做了: 创建了一个DateModelBinder并在global.asax中注册了它,但是在调试时,传递的值是DateTime.Now ...它已经在那里更改了。 Web.config有 我更改了线程当前文化和UIculture,更改了kendo.culture,检查了调试,一切似乎都是正确的。 我甚至在编辑器中放了javascript验证器:

$("#birthDatePicker").kendoValidator({
        rules: {
            date: function (input) {
                var d = kendo.parseDate(input.val(), "dd-MM-yyyy");
                return d instanceof Date;
            }
        }
    });

这返回true,在这里我可以看到我想要更改的日期,但是当它转到模型绑定器时它会以某种方式更改为DateTime.now

我很抱歉,但这让我发疯,我不知道这是否是收藏品内藏品的错误,或者是否有其他我错过的东西。 Thanx提前

1 个答案:

答案 0 :(得分:0)

我的一个项目中有一个MVC kendo-ui网格,它在编辑模式下的日期工作得很好。我注意到与您的代码不同的是我没有在模型中的DateTime属性上写任何属性。我的模型看起来像这样:

public class TransactionViewModel
{
    [Key]
    public int TransactionId { get; set; }

    public string Description { get; set; }

    [Required]
    public DateTime TransactionDate { get; set; }

    [Required]
    public decimal Amount { get; set; }
}

在网格中,我按以下方式绑定了列:

columns.Bound(p => p.TransactionDate).Title("Date").Format("{0:yyyy-MM-dd}").EditorTemplateName("TransactionDate");

而且,即使我的编辑器模板看起来与你的有点不同,你提供的代码也很好,当我测试用你的代替我的时候。

@model DateTime?
@(Html.Kendo().DatePicker()
    .Name("TransactionDate")
    .Value(Model == null ? DateTime.Now.Date : ((DateTime)@Model).Date)
)

为了处理文化问题,我还添加了以下代码:

@{
    var culture = System.Threading.Thread.CurrentThread.CurrentCulture.ToString();
}
<script src="@Url.Content("~/Scripts/cultures/kendo.culture." + culture + ".min.js")"></script>
<script>
    kendo.culture("@culture");
</script>

我建议您尝试以下方法:

  • 删除模型中的属性以验证它们是否不会导致任何问题。您可以稍后在它们全部工作时添加它们。
  • 尝试指定不同的日期格式,或者不指定日期格式。如果您指定一种格式并且用户的浏览器想要以其他格式呈现它,则可能会遇到麻烦。