Как сделать сайт отзывчивым без обратной передачи?

Question

До сих пор я сделал свой сайт отзывчивым без обратной передачи при добавлении продуктов в корзину (добавляет Product.Id в файл cookie с JQuery).

Когда пользователь заходит на страницу «Корзина/Оформить покупку», я прочитал все файлы Id из файла cookie в контроллерах и поместил все записи в cartList и передал их в Вид.

Теперь я застрял, поскольку не знаю, как его решить без обратной передачи, когда я хочу удалить продукт из корзины.

Можно ли сделать что-то подобное /, соответствующие как:

cartList.Remove(db.Products.SingleOrDefault(x=> x.Id == /*Id to remove from cart*/)); 

в View?

Мой код:

Я добавил Product.Id в печенье с JQuery (получает идентификаторdata-id="@item.ID"из Еогеасп цикла):

$('.add-to-cart').click(function() { 

    if ($.cookie("AddedProductId") != null) { 
     var previousValues = $.cookie("AddedProductId"); 
     $.cookie("AddedProductId", previousValues + '_' + $(this).data('id')); 
    }else{ 
     $.cookie("AddedProductId", $(this).data('id')); 
    } 
}); 

Это, как я поддерживать cartList с добавлением продуктов, внутри Контроллер, когда вы посещаете страницу с доставкой/оплатой:

public ActionResult Cart(){ 

     var cart = Request.Cookies["AddedProductId"].Value; 

     String[] elements = Regex.Split(cart, "_");   
     List<Product> cartList = new List<Product>(); 

     foreach (var item in elements){ 
      cartList.Add(db.Products.SingleOrDefault(x => x.ID == new Guid(item))); 
     }  
     return View(cartList); 
} 

Затем я показываю все с петлей foreach внутри /Cart/View.

Что является лучшим вариантом для решения этой проблемы для Asp.Net MVC?

Answer 1

A responsive website и postback - это разные вещи.

Отвечая на ваш вопрос, мы Аякса запрос является решением

в контроллере оных:

[HttpPost] 
public JsonResult Remove(Guid id) 
{  
    cartList.RemoveAll(p => p.ID.Equals(id)); 

    return Json(new { removed = true }); 
} 

JQuery:

$.ajax({ 
      url: '/Cart/Remove', 
      type: 'POST', 
      dataType: 'json', 
      data: { id: <here selected ID> }, 
      success: function (json) { 
       if(json.removed) { 
        // your code... 
       } 

      } 
     });