要素が動的に追加されたフォームを送信しようとしていますが、コントローラーで受信する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);
});
いくつかの追加の後、このマークアップは次のようになります (inspect から)
<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;
}
アクションがヒットしたため、ルートは問題ありません。ブレークポイントを設定して確認しました。フォーム コレクションを受信できない理由を教えてください。ありがとうございました