javascript - 使用 MVC 和 Javascript 验证动态添加的字段并将其保存到数据库

Question

我正在尝试验证动态添加的字段并保存到数据库。表单验证正在工作，但是当我将表单提交到 Controller model.Count 时没有改变。(Model.Count = 1)

我相信问题很简单，但由于某些原因我没有看到问题。 我正在等待您的帮助。

您还可以查看工作示例和调试屏幕截图。

编辑

In this screenshot you can see client page,debug mode

型号

    public int BudgetId { get; set; }
    public int DistributionId { get; set; }
    public int InvoiceId { get; set; }
    public bool ExtraBudgetary { get; set; }
    public string ExtraBudgetaryNo { get; set; }
    public string Currency { get; set; }
    [Required]
    public decimal CurrencyRate { get; set; }
    [Required]
    public string Description { get; set; }
    public bool DistributionTemp { get; set; }
    [Required]
    public decimal ActualAmount { get; set; }
    [Required]
    public decimal Percentage { get; set; }
    public DateTime TransactionDate { get; set; }
    public string DistributionName { get; set; }
    public int ProcessedBy { get; set; }
    public string Explanation { get; set; }
    public bool Validity { get; set; }

查看

<div class="row">
    <div class="col-sm-12">
        <section class="panel panel-default">
            <header class="panel-heading">
                <i class="fa fa-bolt"></i>
                Actions
                <span class="tools pull-right">
                    <a href="javascript:;" class="fa fa-chevron-down"></a>
                    <a href="javascript:;" class="fa fa-cog"></a>
                    <a href="javascript:;" class="fa fa-times"></a>
                </span>
            </header>
            <div class="panel-body">
                <a href="/Budget/Home/Index" class="btn btn-white btn-danger btn-round btn-xs">
                    <i class="fa fa-times"></i>
                    Close
                </a>
                <button class="btn btn-white btn-success btn-round btn-xs" type="submit" tabindex="14" value="Create">
                    <i class="fa fa-floppy-o bigger-120 green"></i>
                    Save
                </button>
            </div>
        </section>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <section class="panel panel-success">
            <header class="panel-heading">
                <i class="fa fa-credit-card"></i>
                New Actual(s)
                <span class="tools pull-right">
                    <a href="javascript:;" class="fa fa-chevron-down"></a>
                    <a href="javascript:;" class="fa fa-cog"></a>
                    <a href="javascript:;" class="fa fa-times"></a>
                </span>
            </header>
            <div class="panel-body" style="overflow-x: scroll;">
                <div class="pull-left">
                    <br />
                    <button type="button" class="btn btn-white btn-success btn-round btn-xs addButton"><i class="fa fa-plus"></i></button>
                    <div class="">

                        @if (Model != null && Model.Count > 0)
                        {
                            int j = 0;
                            foreach (var i in Model)
                            {

                                <div class="form-group">
                                    <div class="col-xs-2">
                                        @Html.DropDownListFor(m => m[j].BudgetId, (IEnumerable<SelectListItem>)ViewBag.BudgetId, htmlAttributes: new { @class = "form-control" })
                                    </div>
                                    <div class="col-xs-1">
                                        @Html.DropDownListFor(m => m[j].InvoiceId, (IEnumerable<SelectListItem>)ViewBag.InvoiceId, htmlAttributes: new { @class = "form-control" })
                                    </div>
                                    <div class="col-xs-1">
                                        @Html.TextBoxFor(m => m[j].ActualAmount, new { @class = "form-control", @placeholder = "Actual Amount" })
                                    </div>
                                    <div class="col-xs-1">
                                        @Html.TextBoxFor(m => m[j].Percentage, new { @class = "form-control", @placeholder = "Percentage" })
                                    </div>
                                    <div class="col-xs-1">
                                        @Html.DropDownListFor(m => m[j].ExtraBudgetary, new SelectList(Enum.GetValues(typeof(TrueFalse))), htmlAttributes: new { @class = "form-control", @placeholder = "Is ExtraBudgetary ?" })
                                    </div>
                                    <div class="col-xs-2">
                                        @Html.TextBoxFor(m => m[j].ExtraBudgetaryNo, new { @class = "form-control", @placeholder = "ExtraBudgetary No" })
                                    </div>
                                    <div class="col-xs-1">
                                        @Html.TextBoxFor(m => m[j].CurrencyRate, new { @class = "form-control", @placeholder = "Currency Rate" })
                                    </div>
                                    <div class="col-xs-2">
                                        @Html.TextBoxFor(m => m[j].Description, new { @class = "form-control", @placeholder = "Description" })
                                    </div>
                                </div>

                                <div class="form-group hide" id="actualTemplate">
                                    <div class="col-xs-2">
                                        @Html.DropDownListFor(m => m[j].BudgetId, (IEnumerable<SelectListItem>)ViewBag.BudgetId, htmlAttributes: new { @class = "form-control" })
                                    </div>
                                    <div class="col-xs-1">
                                        @Html.DropDownListFor(m => m[j].InvoiceId, (IEnumerable<SelectListItem>)ViewBag.InvoiceId, htmlAttributes: new { @class = "form-control" })
                                    </div>
                                    <div class="col-xs-1">
                                        @Html.TextBoxFor(m => m[j].ActualAmount, new { @class = "form-control", @placeholder = "Actual Amount" })
                                    </div>
                                    <div class="col-xs-1">
                                        @Html.TextBoxFor(m => m[j].Percentage, new { @class = "form-control", @placeholder = "Percentage" })
                                    </div>
                                    <div class="col-xs-1">
                                        @Html.DropDownListFor(m => m[j].ExtraBudgetary, new SelectList(Enum.GetValues(typeof(TrueFalse))), htmlAttributes: new { @class = "form-control", @placeholder = "Is ExtraBudgetary ?" })
                                    </div>
                                    <div class="col-xs-2">
                                        @Html.TextBoxFor(m => m[j].ExtraBudgetaryNo, new { @class = "form-control", @placeholder = "ExtraBudgetary No" })
                                    </div>
                                    <div class="col-xs-1">
                                        @Html.TextBoxFor(m => m[j].CurrencyRate, new { @class = "form-control", @placeholder = "Currency Rate" })
                                    </div>
                                    <div class="col-xs-2">
                                        @Html.TextBoxFor(m => m[j].Description, new { @class = "form-control", @placeholder = "Description" })
                                    </div>
                                    <div class="col-xs-1">
                                        <button type="button" class="btn btn-white btn-danger btn-round btn-xs removeButton"><i class="fa fa-minus"></i></button>
                                    </div>
                                </div>
                                j++;
                            }
                        }

                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

<script>
    $(document).ready(function () {
        budgetIdValidators = {
            row: '.col-xs-2',   
            validators: {
                notEmpty: {
                    message: 'The budget Id is required'
                },
                numeric: {
                    message: 'The budget Id must be a numeric number'
                }
            }
        },
        invoiceIdValidators = {
            row: '.col-xs-1',   
            validators: {
                notEmpty: {
                    message: 'The invoice Id is required'
                },
                numeric: {
                    message: 'The invoice Id must be a numeric number'
                }
            }
        },
        actualAmountValidators = {
            row: '.col-xs-1',   
            validators: {
                notEmpty: {
                    message: 'The actual amount is required'
                },
                numeric: {
                    message: 'The actual amount must be a numeric number'
                }
            }
        },
        percentageValidators = {
            row: '.col-xs-1',
            validators: {
                notEmpty: {
                    message: 'The percentage is required'
                },
                numeric: {
                    message: 'The percentage must be a numeric number'
                }
            }
        },
        extraBudgetaryValidators = {
            row: '.col-xs-1',
            validators: {
                notEmpty: {
                    message: 'The extrabudgetary is required'
                }
            }
        },
        extraBudgetaryNoValidators = {
            row: '.col-xs-2',
            validators: {
                notEmpty: {
                    message: 'The extrabudgetary no is required'
                }
            }
        },
        currencyRateValidators = {
            row: '.col-xs-1',
            validators: {
                notEmpty: {
                    message: 'The currency rate is required'
                },
                numeric: {
                    message: 'The currency rate must be a numeric number'
                }
            }
        },
        descriptionValidators = {
            row: '.col-xs-2',
            validators: {
                notEmpty: {
                    message: 'The description is required'
                }
            }
        },
        actualIndex = 0;

        $('#actualsCreateForm')
            .formValidation({
                framework: 'bootstrap',
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    '[0].BudgetId': budgetIdValidators,
                    '[0].InvoiceId': invoiceIdValidators,
                    '[0].ActualAmount': actualAmountValidators,
                    '[0].Percentage': percentageValidators,
                    '[0].ExtraBudgetary': extraBudgetaryValidators,
                    '[0].ExtraBudgetaryNo': extraBudgetaryNoValidators,
                    '[0].CurrencyRate': currencyRateValidators,
                    '[0].Description': descriptionValidators,
                }
            })

            .on('click', '.addButton', function () {
                actualIndex++;
                var $template = $('#actualTemplate'),
                    $clone = $template
                                    .clone()
                                    .removeClass('hide')
                                    .removeAttr('id')
                                    .attr('data-actual-index', actualIndex)
                                    .insertBefore($template);

                $clone
                    .find('[name="BudgetId"]').attr('name', '[' + actualIndex + '].BudgetId').end()
                    .find('[name="InvoiceId"]').attr('name', '[' + actualIndex + '].InvoiceId').end()
                    .find('[name="ActualAmount"]').attr('name', '[' + actualIndex + '].ActualAmount').end()
                    .find('[name="Percentage"]').attr('name', '[' + actualIndex + '].Percentage').end()
                    .find('[name="ExtraBudgetary"]').attr('name', '[' + actualIndex + '].ExtraBudgetary').end()
                    .find('[name="ExtraBudgetaryNo"]').attr('name', '[' + actualIndex + '].ExtraBudgetaryNo').end()
                    .find('[name="CurrencyRate"]').attr('name', '[' + actualIndex + '].CurrencyRate').end()
                    .find('[name="Description"]').attr('name', '[' + actualIndex + '].Description').end();

                $('#actualsCreateForm')
                    .formValidation('addField', '[' + actualIndex+ '].BudgetId', budgetIdValidators)
                    .formValidation('addField', '[' + actualIndex+ '].InvoiceId', invoiceIdValidators)
                    .formValidation('addField', '[' + actualIndex+ '].ActualAmount', actualAmountValidators)
                    .formValidation('addField', '[' + actualIndex+ '].Percentage', percentageValidators)
                    .formValidation('addField', '[' + actualIndex+ '].ExtraBudgetary', extraBudgetaryValidators)
                    .formValidation('addField', '[' + actualIndex+ '].ExtraBudgetaryNo', extraBudgetaryNoValidators)
                    .formValidation('addField', '[' + actualIndex+ '].CurrencyRate', currencyRateValidators)
                    .formValidation('addField', '[' + actualIndex+ '].Description', descriptionValidators);
            })
            .on('click', '.removeButton', function () {
                var $row = $(this).parents('.form-group'),
                    index = $row.attr('data-actual-index');

                $('#actualsCreateForm')
                    .formValidation('removeField', $row.find('[name="[' + index + '].BudgetId"]'))
                    .formValidation('removeField', $row.find('[name="[' + index + '].InvoiceId"]'))
                    .formValidation('removeField', $row.find('[name="[' + index + '].ActualAmount"]'))
                    .formValidation('removeField', $row.find('[name="[' + index + '].Percentage"]'))
                    .formValidation('removeField', $row.find('[name="[' + index + '].ExtraBudgetary"]'))
                    .formValidation('removeField', $row.find('[name="[' + index + '].ExtraBudgetaryNo"]'))
                    .formValidation('removeField', $row.find('[name="[' + index + '].CurrencyRate"]'))
                    .formValidation('removeField', $row.find('[name="[' + index + '].Description"]'));

                $row.remove();
            })

            .on('err.field.fv', function (e, data) {
                data.element
                    .data('fv.messages')
                    .find('.help-block[data-fv-for="' + data.field + '"]').hide();
            });
    });
</script>

Controller

        if (ModelState.IsValid)
        {
            var status = statusRepository.FindByName("In Process of Actualization");
            var user = userRepository.FindByName(SessionPersister.Username);
            foreach (var i in acVM)
            {
                var invoice = invoiceRepository.FindById(i.InvoiceId);
                Actual actual = new Actual
                {
                    BudgetId = i.BudgetId,
                    InvoiceId = i.InvoiceId,
                    ActualAmount = i.ActualAmount,
                    ExtraBudgetary = i.ExtraBudgetary,
                    ExtraBudgetaryNo = i.ExtraBudgetaryNo,
                    TransactionDate = DateTime.Now,
                    Currency = "USD",
                    CurrencyRate = i.CurrencyRate,
                    Description = i.Description,
                    //DistributionTemp = i.DistributionTemp,
                    Percentage = i.Percentage
                };
                actualRepository.Create(actual);

                if (actual != null)
                {
                    if (i.DistributionTemp == true)
                    {
                        DistributionTemplate distributionTemp = new DistributionTemplate
                        {
                            DistributionName = i.DistributionName,
                            Percentage = i.Percentage,
                            ProcessedBy = user.UserId,
                            Explanation = i.Description,
                            Validity = i.Validity,
                            ActualAmount = actual.ActualAmount,
                            TransactionDate = DateTime.Now
                        };
                        distributionTempRepository.Create(distributionTemp);
                        if (distributionTemp != null)
                        {
                            actual.DistributionId = distributionTemp.DistributionId;
                            actualRepository.Update(actual);
                        }
                    }

                    Process process = new Process
                    {
                        InvoiceId = i.InvoiceId,
                        StatusId = status.StatusId,
                        ProcessedBy = user.UserId,
                        ProcessDate = DateTime.Now,
                        //Confirmatory = relatedUnitManager.UnitId
                    };
                    processRepository.Create(process); // Yapılan işlemin kaydedilmesi

                    ViewBag.BudgetId = new SelectList(budgetRepository.SelectBudgets(), "BudgetId", "BudgetId", i.BudgetId);
                    ViewBag.DistributionId = new SelectList(distributionTempRepository.SelectDistributions(), "DistributionId", "DistributionName", i.DistributionId);
                    ViewBag.InvoiceId = new SelectList(invoiceRepository.SelectInvoices(), "InvoiceId", "InvoiceNo", i.InvoiceId);

                    if (process != null)
                    {
                        invoice.LastProcessId = process.ProcessId;
                        invoiceRepository.Update(invoice); // Yapılan son işleme dair id bilgisinin fatura tablosuna eklenmesi
                    }
                }
                else
                {
                    TempData["MessageFail"] += "Something went wrong!";
                    return RedirectToAction("Details/" + invoice.InvoiceId, "Invoices");
                }
                acVM = new List<ActualizationVM> { new ActualizationVM { ExtraBudgetary = false, ExtraBudgetaryNo = "", BudgetId = 0, InvoiceId = 0, Description = "", ActualAmount = 0, Percentage = 0, CurrencyRate = 0} };
                TempData["MessageSuccess"] += "Invoice is successfully actualized.";
                return RedirectToAction("Details/" + invoice.InvoiceId, "Invoices");
            }
        }
        return View(acVM);

编辑2

当我更新命名(如以下命名克隆)时工作正常，但当我提交表单计数时仍然没有增加

$clone
                    .find('[name="[' + actualIndex + '].BudgetId"]').attr('name', '[' + actualIndex + '].BudgetId').end()
                    .find('[name="[' + actualIndex + '].InvoiceId"]').attr('name', '[' + actualIndex + '].InvoiceId').end()
                    .find('[name="[' + actualIndex + '].ActualAmount"]').attr('name', '[' + actualIndex + '].ActualAmount').end()
                    .find('[name="[' + actualIndex + '].Percentage"]').attr('name', '[' + actualIndex + '].Percentage').end()
                    .find('[name="[' + actualIndex + '].ExtraBudgetary"]').attr('name', '[' + actualIndex + '].ExtraBudgetary').end()
                    .find('[name="[' + actualIndex + '].ExtraBudgetaryNo"]').attr('name', '[' + actualIndex + '].ExtraBudgetaryNo').end()
                    .find('[name="[' + actualIndex + '].CurrencyRate"]').attr('name', '[' + actualIndex + '].CurrencyRate').end()
                    .find('[name="[' + actualIndex + '].Description"]').attr('name', '[' + actualIndex + '].Description').end();

Answer 1

我认为这是不正确的:

$clone
                    .find('[name="BudgetId"]').attr('name', '[' + actualIndex + '].BudgetId').end()
                    .find('[name="InvoiceId"]').attr('name', '[' + actualIndex + '].InvoiceId').end()
                    .find('[name="ActualAmount"]').attr('name', '[' + actualIndex + '].ActualAmount').end()
                    .find('[name="Percentage"]').attr('name', '[' + actualIndex + '].Percentage').end()
                    .find('[name="ExtraBudgetary"]').attr('name', '[' + actualIndex + '].ExtraBudgetary').end()
                    .find('[name="ExtraBudgetaryNo"]').attr('name', '[' + actualIndex + '].ExtraBudgetaryNo').end()
                    .find('[name="CurrencyRate"]').attr('name', '[' + actualIndex + '].CurrencyRate').end()
                    .find('[name="Description"]').attr('name', '[' + actualIndex + '].Description').end();

我不确定绑定(bind)元素的正确“命名”，尽管我以前遇到过麻烦。我的方法是增加原始列表，循环遍历它，然后完全按照原样复制绑定(bind)的完成方式。