1. 홈
  2. 질의 응답
  3. Kendo UI Web DatePicker 값으로 모델이 업데이트되지 않았습니다.

Kendo UI Web DatePicker 값으로 모델이 업데이트되지 않았습니다.

2013-05-06 3 views
-2

Visual Studio 2012에 MVC Razor 프로젝트가 있고 Kendo UI Web HTML 컨트롤을 사용하고 있습니다. 팝업을 통해 편집되는 표가 있습니다. 레코드를 편집 할 때 모델은 두 개의 DatePicker를 제외하고 모든 컨트롤의 값으로 업데이트됩니다. Firebug에서 날짜 값이 "Tue May 14 2013 00:00:00 GMT + 1000 (AUS Eastern Standard Time)"형식으로 게시되지만 모델이 데이터 소스의 전송으로 보내지는 것을 볼 수 있습니다 : update 함수 (UpdateRegisterEntry)이 필드는 null입니다. 아무도 나를 도울 수 있습니까?Kendo UI Web DatePicker 값으로 모델이 업데이트되지 않았습니다.

_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>&copy; @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: "&nbsp;", 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; 

}

날짜 시간 편집기 템플릿

@model DateTime? 

@Html.TextBox("", Model.GetValueOrDefault(), "dd/MM/yyyy", new 
{ 
@class = "date", 
style = ViewData["style"] 
})

관련 자바 스크립트

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

출처

2013-05-06 Lance

+0

아무도 도와 줄 수 있습니까? Telerik? – Lance

답변

2

나는이 문제를 해결하는 방법을 알아 냈어요. 날짜를 다시 포맷해야 json과 나머지 서비스는 괜찮습니다. 검도 UI 데이터 소스의 매개 변수지도 기능에서

, 나는 다음을 수행 오전 : 

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

을 희망이 명확하고 다른 사람을 도움이됩니다.

출처

2013-05-13 22:38:48 Lance

관련 문제

 관련 문제