javascript - 提交后 Controller 中的 formCollection 为空

Question

我正在尝试提交一个在其中动态添加元素的表单，但是当我在 Controller 中接收它时，formCollection 为空:

我的 html 标记如下所示:

…
<form id="submitCart" name="submitCart" action="submitCart" method="POST" enctype="multipart/form-data">
            <button class="major" value="Done, Proceed to checkout!" id="formSubmitCart" type="submit">Done, Proceed to checkout!</button>
    </div>

    <div class="infosheet">
        <table>
            <thead>
                <tr>
                    <th style="width: 60px">Qty.</th>
                    <th style="width: 240px">Product Name</th>
                    <th style="width: 60px">Price</th>
                </tr>
            </thead>

            <tbody id="cardList">
            </tbody>
            </form>

        </table>
…

元素从此处在 jQuery 中添加到其中:

$('#addtocart').click(function () {
    var itmCnt = parseInt($('#itemCnt').val());
    itmCnt = itmCnt + 1;

    $('#itemCnt').val(itmCnt);
    //var htmlStr = "<tr><td style='width: 60px'><input type='text' name='qntty" + itmCnt + "'  disabled=disabled value='" + $('#qntty').val() + "' style='width: 60px'/></td><td style='width: 240px'><input type='text' name='prdNme" + itmCnt + "'  disabled=disabled value='" + $('#prdNme').val() + "'  style='width: 200px'/></td><td style='width: 60px'><input type='text' name='ttlprce" + itmCnt + "' disabled=disabled value='" + $('#ttlPrce').val() + "'  style='width: 60px'/></td></tr>";

    var htmlStr = "<tr><td style='width: 60px'><input type='text' name='qntty" + itmCnt + "'  readonly=readonly value='" + $('#qntty').val() + "' style='width: 60px'/></td><td style='width: 240px'><input type='text' name='prdNme" + itmCnt + "'  readonly=readonly value='" + $('#prdNme').val() + "'  style='width: 200px'/></td><td style='width: 60px'><input type='text' name='ttlprce" + itmCnt + "' readonly=readonly value='" + $('#ttlPrce').val() + "'  style='width: 60px'/></td></tr>";

    ...
    ...
    $('#cardList').prepend(htmlStr);

});

添加了一些内容后，该标记看起来像这样(来自检查)

<tbody id="cardList">
<tr>
    <td style="width: 60px">
        <input type="text" name="qntty4" value="53" style="width: 60px">
    </td>
    <td style="width: 240px">
        <input type="text" name="prdNme4" value="Rice" style="width: 200px">
    </td>
    <td style="width: 60px">
        <input type="text" name="ttlprce4" value="2480.4" style="width: 60px">
    </td>
</tr>
<tr>
    <td style="width: 60px">
        <input type="text" name="qntty3" value="53" style="width: 60px">
    </td>
    <td style="width: 240px">
        <input type="text" name="prdNme3" value="Rice" style="width: 200px">
    </td>
    <td style="width: 60px">
        <input type="text" name="ttlprce3" value="2480.4" style="width: 60px">
    </td>
</tr>
</tbody>

然后我通过以下方式提交:

$('#submitCart').on('submit', function (e) {
        console.log($(this).serialize()); // still empty
    $.post('submitCart', $(this).serialize(), function (result) {
        $('#msg').val(result);
        console.log(result);
        console.log($(this).serialize()); //Empty Nothing here..
    });
    e.preventDefault();
});

我有这样的路线:

routes.MapRoute(name: "submitCart", url: "submitCart", defaults: new { controller = "Inventory", action = "SubmitCart" });

但是在我的 Controller 中，当我尝试从 formCollection 读取内容时，什么也没有

    public bool SubmitCart(FormCollection submitCart)
    {
        var b = submitCart.Count;

        foreach (var key in submitCart.AllKeys)
        {
            var value = submitCart[key];
            // etc.
        }

        var a = submitCart;
        return true;

    }

当 Action 被击中时，路线没问题，我已经通过设置断点检查了它。任何人都可以指导我为什么我无法收到我的表格集合。谢谢你

Answer 1

FormCollection 为空，因为您在添加元素后禁用了这些元素，并且禁用的元素未在请求中提交。

您可以通过 css 结合 readonly 属性来实现禁用外观。

Twitter Boostrap 是这样实现的:

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  cursor: not-allowed;
  background-color: #eeeeee;
}

您可以使用类似的方法。

附录:这是有关禁用元素的另一个问题的链接:Disabled form inputs do not appear in the request