Question

我有一个简单的ASP.NET MVC应用程序，我们的用户在其中有一个表，该表具有一些用于编辑某些设置的选项。

此表是使用jQuery动态构建的，因为这是一些旧代码。制作表格的代码是：

function setInvoiceTable(result) {
        result.OverduesPaged.forEach(function (item, index) {

            var externalName = 'OverduesPaged[' + index + '].ExternalInvoiceGuid';
            var debtorName = 'OverduesPaged[' + index + '].Debtor';
            var visibleName = 'OverduesPaged[' + index + '].IsSelected';

            var externalInvoiceGuidField = '<input type=\'hidden\' value=\'' + item.ExternalInvoiceGuid + '\' name=\'' + externalName+ '\' />';
            var debtorField = '<input type=\'hidden\' value=\'' + item.Debtor + '\' name=\'' + debtorName + '\' />';
            var invisibleField = '<input type=\'hidden\' value=\'false\' name=\'' + visibleName + '\' id=\'' + visibleName + '\' /></label>';
            var visibleField = '<label><input type=\'checkbox\' value=\'true\' name=\'' + visibleName + '\' id=\'' + visibleName + '\' />  Start sag';

            var insertStr = "<tr>" +
                "<td>" + externalInvoiceGuidField + debtorField + visibleField + invisibleField + "</td>" +
                "<td>" + item.InvoiceId + "</td>" +
                "<td>" + item.Debtor + "</td>" +
                "<td>" + item.DateString +"</td>" +
                "<td>" + item.DaysSinceDueString +"</td>" +
                "<td>" + item.GrossAmountString + "</td>" +
                "<td>" + item.RemainderAmountString + "</td>" +
                "</tr>";
            $('#accounting_invoices_table').append(insertStr);
        });
    }

我发布时，此功能非常适合我们。我们的控制器中有一个具有以下签名的端点：

[System.Web.Mvc.HttpPost]
public ActionResult StartDebtCollectionCases(UpcomingDashboardViewModel vm)
{
    // code
}

我正在构建的集合是OverduesPaged，它是我们的视图模型的一部分：

public class UpcomingDashboardViewModel
{
    public List<OverdueUpcomingInvoiceViewModel> OverduesPaged { get; set; }
    // more stuff not relevant to question
}

这是我的挑战：

我在<tr>行中添加了一个CSS类，如下所示：

            // new code added
            var removeClass = 'ok';
            if (item.IsAlreadyCase) {
                visibleField = '<label type="text">Allerede startet</label>';
                removeClass = 'remove';
            } else if (item.IsBlocked) {
                visibleField = '<label type="text">Sat i bero</label>';
                removeClass = 'remove';
            }
            else if (item.Currency != "DKK") {
                visibleField = '<label type="text">Faktura skal være dansk valuta</label>';
                removeClass = 'remove';
            }

            var insertStr = "<tr class='" + removeClass + "'>" +
                "<td>" + externalInvoiceGuidField + debtorField + visibleField + invisibleField + "</td>" +
            // rest of code from above

现在，我得到的表完全像以前一样，但是有一个可以确定或删除的类。

但是，当我现在进行POST时，整个集合OverduesPaged为空/空：

我尝试将类添加到<td>中，但随后该集合为空/空。

有什么主意吗？

Answer 1

问题与添加类名本身无关，而是与执行if或else if块中的代码蚁产生的无效html有关。在这些块中，您正在创建一个带有结束标记的<label>元素，但是没有输入（在这种情况下，是否需要复选框是不清楚的），因此，当您结合使用visibleField + invisibleField时，会出现{{ 1}}标签（<label>具有开始和结束标签，而visibleField仅具有结束invisibleField标签。

您在</label>块中进行编码以生成if的过程需要与您在原始代码中所产生的过程相似-即，仅以复选框的html开头visibleField。

正如您在评论中所承认的那样，这是非常脆弱且易于出错的代码，难以调试。当您打算重写它时，请考虑在ajax调用中返回部分视图（已牢固绑定到模型），或者如果需要返回<label>，则考虑隐藏模板（在{{1之外） }}标签），您可以在脚本中对其进行克隆和更新，例如

Json

然后您的脚本变为

<form>

请注意，您现有的<div id="newrow" style="display:none"> <tr> <td> <input class="invoice" type="hidden" name="OverduesPaged[#].ExternalInvoiceGuid value /> <input class="debtor" type="hidden" name="OverduesPaged[#].Debtor value /> .... </td> .... </tr> </div>属性无效，因为它们包含var table = $('#accounting_invoices_table'); result.OverduesPaged.forEach(function (item, index) { var clone = $('#newrow').clone(); // Update indexer clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']')); // Update values clone.find('.invoice').val(item.ExternalInvoiceGuid); .... table.append(clone.html()); });，id和.字符（如果您尝试在jQuery选择器中使用它们，它们会失败（例如[将被解释为类名），因此应在html中将其省略

发布集合-在表格行中添加类时为空/空

1 个答案: