У меня есть страница с ценами, которая отображает список продуктов вместе с их ценами. Пользователь может добавить несколько товаров в корзину (активная корзина отображается в правой части страницы). В настоящее время это то, как я реализовал это, используя Ajax / Jquery ...
Фрагмент кода из моего представления (ASPX). Цикл доступных продуктов в ViewModel и отображение деталей:
<% foreach (var _product in _supplier.HotelProducts)
{ %>
<tr>
<td colspan="2" align="left" valign="top"><% = _product.Description %></td>
<td align="left">
<% using (Html.BeginForm("AddToCart", "ShoppingCart", FormMethod.Post, new { @class = "addProductToCartForm" }))
{ %>
<input type="hidden" name="hSupplierID" id="hSupplierID" value="<% = _supplier.ID %>" />
<input type="hidden" name="hProductCode" id="hProductCode" value="<% = _product.Code %>" />
<input type="hidden" name="hProductDescription" id="hProductDescription" value="<% = _product.Description %>" />
<input type="hidden" name="hProductPrice" id="hProductPrice" value="<% = _product.TotalPrice %>" />
<input type="submit" value="+ Add to cart" />
<% } %>
</td>
<td valign="top" align="center">
<span id="spanProductPrice" class="_price">$<% = _product.TotalPrice %></span>
</td>
</tr>
<% } %>
Как вы можете видеть из приведенного выше фрагмента кода, у меня есть кнопка «+ Добавить в корзину» для каждого продукта, и мое требование - передать идентификатор поставщика и сведения о продукте (код, стоимость и цена) на мой контроллер и корзину. Обратите внимание, что я получаю список продуктов и их цены от внешнего веб-сервиса, и у меня нет возможности просто передать код продукта и получить соответствующее описание и цену на стороне сервера, поэтому мне нужно собирать необходимые сведения о продукте, когда пользователь добавляет это в корзину.
$(function () {
$(".addProductToCartForm").submit(function (e) {
e.preventDefault();
var HiddenCartForm = {
SupplierID: $(this.hSupplierID).val(),
Code: $(this.hProductCode).val(),
Description: $(this.hProductDescription).val(),
TotalPrice: $(this.hProductPrice).val()
};
$.post($(this).attr("action"), HiddenCartForm, function (data) {
//alert("Success");
renderCart(data);
});
return false; // form already submitted using ajax, don't submit it again the regular way
});
});
function renderCart(data) {
$("#rightColumn").html(data);
}
Вот мой пользовательский объект HiddenCartForm, который я использую для передачи информации из View в Controller через JQuery
public class HiddenCartForm
{
public string SupplierID { get; set; }
public string Code { get; set; }
public string Description { get; set; }
public decimal? TotalPrice { get; set; }
//public ProductView Product { get; set; }
}
У меня ДВА вопроса:
[1] Есть ли лучший способ справиться с этим сценарием? Мне немного не по себе от такого количества форм и скрытых полей (для хранения идентификатора поставщика и сведений о продукте) в представлении. Эти формы и скрытые поля будут видны, когда кто-то просматривает источник.
[2] Мне нужна почти вся информация из "_product", когда пользователь добавляет определенный продукт в корзину. Есть ли лучший способ передать эту информацию через JQuery вместо использования скрытых полей, когда я зацикливаюсь на продуктах foreach (var _product in _supplier.HotelProducts) на мой взгляд?
Я сейчас нахожусь на MVC 2.