-2

Visual Studio 2012 に MVC Razor プロジェクトがあり、Kendo UI Web HTML コントロールを使用しています。ポップアップを介して編集されるグリッドがあります。レコードを編集すると、2 つの DatePicker を除くすべてのコントロールの値でモデルが更新されます。Firebug では、日付の値が「Tue May 14 2013 00:00:00 GMT+1000 (AUS Eastern Standard Time)」という形式で投稿されているのがわかりますが、モデルはデータソースの 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>&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"]
})

関連する 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
});}
}
4

1 に答える 1