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

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

现在我最终得到了一个与以前完全相同的表，但具有一个 OK 或 REMOVE 的类。

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

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

有什么想法吗？

Answer 1

问题与添加类名本身无关，而是在执行 if 或 else if 块中的代码的 ant 时生成的无效 html。在这些块中，您正在创建带有结束标记的 <label> 元素，但没有输入（不清楚在这些情况下是否需要复选框），因此当您组合 visibleField + invisibleField 时，您会得到不平衡的 <label> 标签（@ 987654326@ 有开始和结束标签，但invisibleField 只有一个结束</label> 标签。

您在 if 块中生成 visibleField 的代码需要与您在原始代码中生成的类似 - 即只是一个带有复选框的 HTML 开头的 <label>。

正如您在 cmets 中所承认的，这是非常脆弱且容易出错的代码，难以调试。当您打算重写它时，请考虑在您的 ajax 调用中返回部分视图（与模型紧密绑定），或者如果您需要返回 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 选择器中使用这些字符，它们会失败（例如 @ 987654340@ 将被解释为类名），因此它们应在 html 中省略