0

我正在尝试提交一个其中动态添加元素的表单，但是当我在控制器中收到它时，它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" });

但是在我的控制器中，当我试图从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;

    }

当动作被击中时，路线没问题，我已经通过设置断点检查了它。谁能指导我为什么我无法收到我的表格集合。谢谢你

4

1 回答 1

2

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

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

Twitter Boostrap 是这样做的：

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

您可以使用类似的方法。

附录disabled：这是关于元素的另一个问题的链接：禁用的表单输入不会出现在请求中

于 2013-07-16T21:10:49.307 回答