0

MVC 3でjqgridを使用しています。

コードが以下に示されているこのページがあります。

@model VectorCheck.ViewModels.InsertUpdateInvoiceViewModel
@{
    ViewBag.Title = "Edit Invoice " + @Model.Invoice.InvoiceNumber;
    ViewBag.InvoiceId = (int)@Model.Invoice.InvoiceId;
}
<header class="controllerheader">
    <h1>Edit Invoice @Model.Invoice.InvoiceNumber</h1>
</header>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.16.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/EditorHookup.js")" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" media="screen" href="../../Scripts/jquery.jqGrid-4.1.1/css/ui.jqgrid.css" />

<script src="../../Scripts/jquery.jqGrid-4.1.1/js/i18n/grid.locale-en.js" type="text/javascript"></script>

<script src="../../Scripts/jquery.jqGrid-4.1.1/js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script src="../../Scripts/Views/Invoice/create.js" type="text/javascript"></script>

<script src="../../Scripts/Views/Invoice/edit.js" type="text/javascript"></script>
@using (Html.BeginForm()) {
    @Html.ValidationSummary()
    <input type="hidden" id="invoiceid" value="@Model.Invoice.InvoiceId" />
    <input type="hidden" id="organisationid" value="@Model.Invoice.OrganisationId" />
    <fieldset>
        <legend>Invoice</legend>
            @Html.HiddenFor(model => model.Invoice.InvoiceId)
@Html.HiddenFor(model => model.Invoice.InvoiceAttachmentId)
@Html.HiddenFor(model => model.Invoice.CreatedByUserName)
@Html.HiddenFor(model => model.Invoice.CreatedDateTime)
@Html.HiddenFor(model => model.Invoice.ProgramManagerId, new { @id = "programmanagerid"})
<div class="columnRightCreate editor-label">
    @Html.LabelFor(model => model.Invoice.AreaId)
</div>
<div class="dataRightCreate editor-field">
    @Html.DropDownListFor(model => model.Invoice.AreaId, Model.AreaList, new { @id = "areaddl" }, Model.Invoice.ActiveInvoiceLines.Count() == 0)
    @Html.ValidationMessageFor(model => model.Invoice.AreaId, "!")
</div>
<div class="invoiceHeaderCreate">
    <div class="columnLeftCreate editor-label">
        @Html.LabelFor(model => model.Invoice.OrganisationId)
    </div>
    <div class="dataLeftCreate editor-field">
        @Html.DropDownListFor(model => model.Invoice.OrganisationId, Model.OrganisationList, new { @id = "organisationddl" })
        @Html.ValidationMessageFor(model => model.Invoice.OrganisationId, "!")
    </div>
    <div class="columnLeftCreate editor-label">
        @Html.LabelFor(model => model.Invoice.InvoiceNumber)
    </div>
    <div class="dateLeftCreate editor-field">
        @Html.EditorFor(model => model.Invoice.InvoiceNumber)
        @Html.ValidationMessageFor(model => model.Invoice.InvoiceNumber, "!")
    </div>
    <div class="columnLeftCreate editor-label">
        @Html.LabelFor(model => model.Invoice.InvoiceDate)
    </div>
    <div class="dataLeftCreate editor-field" id="datepicker">
        @Html.EditorFor(model => model.Invoice.InvoiceDate)
        @Html.ValidationMessageFor(model => model.Invoice.InvoiceDate, "!")
    </div>
    <div class="columnRightCreate editor-label">
        @Html.LabelFor(model => model.Invoice.TotalExcludingGst)
    </div>
    <div class="dataRightCreate editor-field">
        @Html.EditorFor(model => model.Invoice.TotalExcludingGst)
        @Html.ValidationMessageFor(model => model.Invoice.TotalExcludingGst, "!")
    </div>
    <div class="columnRightCreate editor-label">
        @Html.LabelFor(model => model.Invoice.TotalIncludingGst)
    </div>
    <div class="dataRightCreate editor-field">
        @Html.EditorFor(model => model.Invoice.TotalIncludingGst)
        @Html.ValidationMessageFor(model => model.Invoice.TotalIncludingGst, "!")
    </div>
    <div class="columnRightCreate editor-label">
        @Html.LabelFor(model => model.Invoice.AllowMoreThanAllowedPercentageToBePaidOverride)
        @Html.CheckBoxFor(model => model.Invoice.AllowMoreThanAllowedPercentageToBePaidOverride)
    </div>
    <div class="columnRightCreate editor-label">
        @Html.LabelFor(model => model.Invoice.AllowNumberOfProgressPaymentsOverride)
        @Html.CheckBoxFor(model => model.Invoice.AllowNumberOfProgressPaymentsOverride)
    </div>
    @if (Model.Invoice.ApprovedForPayment == false) {
        <div class="columnRightCreate editor-label">
            @Html.LabelFor(model => model.Invoice.Rejected)
            @Html.CheckBoxFor(model => model.Invoice.Rejected)
        </div>
    }
</div>

<input type="submit" value="Update" />
    </fieldset>
    <fieldset>
        <legend>Invoice Lines</legend>
        <table id="list">
        </table>
        <div id="pager">
        </div>
    </fieldset>
}

これは、請求書とそれに関連付けられた請求書明細を扱います。最初の部分は、請求書の詳細に関する基本的な MVC の更新です。テキストボックス、選択などがあり、更新ボタンを押して詳細を送信して保存します。請求書の詳細を変更するだけであれば、これは問題なく機能します。

ただし、ID リストを持つテーブルは、請求明細行を含む jqgrid です。コードは次のとおりです。

$("#list").jqGrid({
        url: '/InvoiceLine/GridData/' + invoiceId,
        datatype: 'json',
        mtype: 'POST',
        colNames: ['InvoiceLineId', 'InvoiceId', 'Project', 'Amount', 'CreatedByUserName', 'CreatedDateTime', ''],
        colModel: [

              { name: 'InvoiceLineId', index: 'InvoiceLineId', hidden: true, key: true, editable: true, editrules: { required: false} },
              { name: 'InvoiceId', index: 'InvoiceId', hidden: true, editable: true, editrules: { required: false }, editoptions: { defaultValue: invoiceId} },
              { name: 'Project', index: 'Project' },
              { name: 'Amount', index: 'Amount', width: 150, align: 'right', formatter: 'number', formatoptions: { thousandsSeparator: "," }, editable: true, editrules: { required: true, custom: true, custom_func: iscurrencycheck} },
              { name: 'CreatedByUserName', index: 'CreatedByUserName', hidden: true, editable: true, editrules: { required: false} },
              { name: 'CreatedDateTime', index: 'CreatedDateTime', hidden: true, editable: true, editrules: { required: false} },
              { name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions',
                  formatoptions: { keys: true,
                      delbutton: false,
                      //Reload grid so that the price group gets updated after a save
                      onSuccess: function (rowid) { reload(); }
                  }
              }
              ],
        pager: $('#pager'),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        viewrecords: true,
        imgpath: '',
        caption: 'Invoice Lines',
        editurl: '/InvoiceLine/Save/',
        grouping: true,
        groupingView: {
            groupColumnShow: false,
            groupField: ['Project']
        }
    });
    $("#list").navGrid('#pager', { edit: false, add: true, del: true, search: false }, {  }, { width: 500 }, { url: "/../InvoiceLine/Delete" });
});

これにより、更新がうまく行われます。問題は、MVC の更新で問題が発生することです。請求明細行の作成ダイアログを開き、閉じた後に更新ボタンをクリックして請求書の詳細を保存すると、jquery 検証エラーがスローされます。

d は定義されていません [このエラーでブレーク]

....data(a.form,"validator").settings.meta;return b?c(a).metadata()[b]:c(a).metadata...

ソースを確認しましたが、作成のためにダイアログを開くとフォームタグが含まれており、閉じた後でも無効になっているにもかかわらずページに残っているためだと確信しています。

誰でもこれに対処する方法を知っていますか? おそらく、更新ボタンが押される前にダイアログによって作成されたマークアップを取り除く方法は?

4

1 に答える 1

1

<table id="list"></table><div id="pager"></div>の中に配置したため、記載されている問題が存在すると思います@using (Html.BeginForm()) {...}。グリッドでは、グリッドと同じ列名を使用します。そのため、メイン フォームの名前と jqGrid の追加フォームの名前で競合が発生します。

<table id="list"></table><div id="pager"></div>の外側に移動することをお勧めします@using (Html.BeginForm()) {...}。

別の回避策として、閉じた後に編集フォームを破棄してみてください。jqGrid のデフォルトの動作は、フォームのみを非表示にします。recreateForm: true次回フォームを開いたときにのみ、以前に非表示にしたグリッドを削除するため、設定もここでは役に立ちません。そのため、編集/追加フォームを閉じるときに直接onClosewhich destroyを使用することをお勧めします。次のコードは、の呼び出し前のどこかで使用できます。navGrid

$.extend($.jgrid.edit, {
    onClose: function () {
        setTimeout(function() {
            $("#editmodlist").remove(); // "list" part is the id of the grid
        }, 100);
    }
});
于 2012-05-15T06:10:20.977 に答える