Я работаю над корзиной покупок, используя asp.net mvc. Я сделал полную функциональность корзины покупок, где пользователь может удалить продукт или обновить его количество через текстовое поле. Но мне не нравится часть, где у меня есть две дополнительные ссылки с правой стороны каждого продукта в корзине (количество обновлений и удаление продукта). Я прекрасно разбираюсь с ссылками на продукты, потому что имеет смысл удалить ссылку для каждого продукта. Теперь я хочу иметь только одну кнопку или ссылку с именем save changes. Нажав на эту кнопку/ссылку, я хочу собирать значения из каждого текстового поля количества, передать ее контроллеру и выполнить то, что нужно сделать, и вернуть его как объект json из контроллера. Проблема в том, что я использую ajax только в течение нескольких дней и не знаю, как итерации/собирать значения из текстовых полей в моем представлении и отправлять их контроллеру.Как перебирать значения текстовых полей и отправлять их контроллеру с помощью ajax?
Как выглядит моя корзина покупок. 
Это мой взгляд
@model OnlineShop.ViewModels.ShopingCartViewModel
....
<p class="button">
@Html.ActionLink("Checkout >>", "AddressAndPayment", "Checkout")
</p>
<table class="table-bordered">
<tr>
headers
</tr>
@for (int i = 0; i < Model.CartItems.Count; i++)
{
<tr id="[email protected][i].RecordID">
<td>
<img src="@Url.Content(Model.CartItems[i].Product.ProductImg)" class="img-responsive" style="width:60px;height:60px;padding:5px;"/>
</td>
@*need to be done later*@
<td>
@Html.ActionLink(Model.CartItems[i].Product.ProductName, "Details", "Store", new{id =Model.CartItems[i].ProductID}, null)
</td>
<td>
@Model.CartItems[i].Product.ProductPrice
</td>
<td>
@Html.TextBoxFor(model=>model.CartItems[i].CartCount,new { style="width:60px;text-align:center;"})
</td>
<td>
<a href="#" class="UpdateLink" data-id="@Model.CartItems[i].RecordID" txt-id="[email protected](i)__CartCount">
Update Quantity
</a> |
</td>
<td>
<a href="#" class="RemoveLink" data-id="@Model.CartItems[i].RecordID">
Remove from
cart
</a>
</td>
</tr>
}
<tr>
<td>
</td>
<td></td>
<td></td>
<td></td>
<td align="center"> <b>Total</b></td>
<td id="cart-total" align="center">
<b> @Model.CartTotal</b>
</td>
</tr>
</table>
</div>
Сценарии
@section scripts {
<script type="text/javascript">
$(function() {
// Document.ready -> link up remove event handler
$(".RemoveLink").click(function() {
// Get the id from the link
var recordToDelete = $(this).attr("data-id");
if (recordToDelete != '') {
// Perform the ajax post
$.post("/ShopingCart/RemoveFromCart", { "id": recordToDelete }, function (data) {
// Successful requests get here
// Update the page elements
if (data.ItemCount == 0) {
$('#row-' + data.DeleteID).fadeOut('slow');
} else {
$('#item-count-' + data.DeleteID).text(data.ItemCount);
}
$('#cart-total').text(data.CartTotal);
$('#update-message').text(data.Message);
$('#cart-status').text('Cart (' + data.CartCount + ')');
});
}
});
});
$(function() {
// Document.ready -> link up remove event handler
$(".UpdateLink").click(function() {
// Get the id from the link
var recordToUpdate = $(this).attr("data-id");
var countToUpdate=$("#" + $(this).attr("txt-id")).val();
if (recordToUpdate != '') {
// Perform the ajax post
$.post("/ShopingCart/UpdateCartQuantity", { "id": recordToUpdate, "cartCount": countToUpdate}, function (data) {
// Successful requests get here
// Update the page elements
if (data.ItemCount == 0) {
$('#row-' + data.DeleteID).fadeOut('slow');
} else {
$('#item-count-' + data.DeleteID).text(data.ItemCount);
}
$('#cart-total').text(data.CartTotal);
$('#update-message').text(data.Message);
$('#cart-status').text('Cart (' + data.CartCount + ')');
});
}
});
});
function handleUpdate() {
// Load and deserialize the returned JSON data
var json = context.get_data();
var data = Sys.Serialization.JavaScriptSerializer.deserialize(json);
// Update the page elements
if (data.ItemCount == 0) {
$('#row-' + data.DeleteID).fadeOut('slow');
} else {
$('#item-count-' + data.DeleteID).text(data.ItemCount);
}
$('#cart-total').text(data.CartTotal);
$('#update-message').text(data.Message);
$('#cart-status').text('Cart (' + data.CartCount + ')');
}
</script>
}
Спасибо за тяжелую работу, но меня смущает еще больше :) ... Я буду стараться лучше объясните, чего я пытаюсь достичь ... это мой метод управления
[HttpPost]
public ActionResult UpdateCartQuantity(int id , int cartCount)
{
var cart = ShopingCart.GetCart(this.HttpContext);
string productName = storeDB.Carts.Single(
item => item.RecordID == id).Product.ProductName;
Product product = storeDB.Carts.Single(
item => item.RecordID == id).Product;
int oldCount = (int)storeDB.Carts.Single(
item => item.RecordID == id).CartCount;
int itemCount = 0;
if (oldCount==cartCount)
{
itemCount = oldCount;
}
else if (cartCount>oldCount)
{
itemCount = oldCount;
int sub = cartCount-oldCount;
for (int i = 0; i < sub; i++)
{
cart.AddToCart(product);
itemCount++;
}
}
else
{
itemCount = (int)cart.UpdateCartCount(id, cartCount);
}
var results = new ShopingCartRemoveViewModel
{
Message = Server.HtmlEncode(productName) +
" has quantity updated.",
CartTotal = cart.GetTotal(),
CartCount = (int)cart.GetCount(),
ItemCount = itemCount,
DeleteID = id
};
return Json(results);
}
Так я смотрел на некоторые учебники и думал использовать <input type="text"> поле вместо @html.TextBoxFor(model=>model.CartItems[i].CartCount) и $ajax() размещать только RecordId и значение каждого из <input> ... Я мог бы сделать это возможно для одного cartitem с уникальным именем/ID или класса, но с учетом что у меня есть список CartItems, мне нужно динамически создавать поля количества полей <input> с инструкцией для каждого картотека. Поэтому, когда пользователь нажимает кнопку сохранения изменений, ему нужно считывать значения из каждого поля ввода и обрабатывать с помощью метода UpdateCartQuantity вместе с recordID. Основная проблема для меня заключается в том, как динамически обрабатывать классы/идентификаторы этого <input>, поэтому каждый имеет уникальный идентификатор и как читать/отправлять этот идентификатор записи и вводимое значение. Также я отредактировал мой взгляд немного теперь, у меня есть для оператора вместо foreach, как вы можете видеть.
Почему бы вам не просто отправить форму (есть ли причина, по которой вы хотите остаться на одной странице?). И вы не можете использовать цикл foreach' для создания элементов управления формой для элементов коллекции. Вам нужен циферблат 'for' или пользовательский' EditorTemplate' для 2-сторонней модели, ожидающей работы - см. [Этот ответ] (http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943 # 30094943) –