0

我将 jqgrid 与 MVC 3 一起使用。

我有这个页面，其代码如下所示：

@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 list 的表是一个包含发票行的 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).metadat...

我查看了源代码，我很确定这是因为您打开对话框以创建它包含一个表单标签，即使在您关闭它之后，它仍保留在页面上，但已禁用。

有谁知道如何处理这个问题？也许如何在按下更新按钮之前摆脱对话框创建的标记？

4

1 回答 1

1

我想存在所描述的问题是因为您<table id="list"></table><div id="pager"></div>将@using (Html.BeginForm()) {...}. 在网格中，您使用与网格中相同的列名。所以你会在主窗体的名称和 jqGrid 的 Add 表单中的名称发生冲突。

我建议你搬到<table id="list"></table><div id="pager"></div>外面@using (Html.BeginForm()) {...}。

作为另一种解决方法，您可以尝试在关闭后销毁编辑表单。jqGrid 的默认行为是仅隐藏表单。即使设置recreateForm: true在这里也没有帮助，因为它仅在下次打开表单时才删除先前隐藏的网格。所以我建议你在关闭时直接onClose使用which 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 回答