ASP.NET MVC Ajax.BeginForm возвращает неожиданные результаты

Question

Я отрисовываю частичное представление так:

    <div id="cart">
    <%Html.RenderPartial("Cart", Model); %>
</div>

Для каждой строки в корзине я использую форму для удаления элементов (важно, чтобы это работало, когда javascript отключен, следовательно, нет Ajax.ActionLink):

    <%using (Ajax.BeginForm("RemoveFromCart", "Cart", new AjaxOptions { UpdateTargetId="cart"}))
  {%>                           
        <%=Html.Hidden("ProductId", line.Product.Id)%>
        <%=Html.Hidden("returnUrl", ViewData["returnUrl"])%>
        <input type="image" src="<%=AppHelper.ImageUrl("delete.gif")%>" value="Remove item"  />
<%} %>

И мое действие контроллера:

        [HttpPost]
    public ActionResult RemoveFromCart(Cart cart, int productId, string returnUrl)
    {
        Product p = _catalogService.GetProduct(productId);
        cart.RemoveLine(p); // TODO - what about if null?

        if (Request.IsAjaxRequest())
            return PartialView("Cart", cart);
        else
            return RedirectToAction("Index",  new { returnUrl });
    }

Насколько я понимаю, при включенном javascript нажатие кнопки «Удалить» сделает асинхронную запись для действия и заменит содержимое контейнера «cart» обновленным частичным представлением. Если js отключен, выполняется полный постбэк, и пользователь снова перенаправляется на страницу индекса.

Если я добавлю несколько товаров в корзину и удалю товар, он будет работать нормально. Однако, если я попытаюсь удалить другой элемент, ничего не произойдет. Причина этого заключается в том, что при просмотре источника страницы после успешного удаления в скрытом поле, содержащем идентификатор продукта для удаления, отображается идентификатор уже удаленного элемента.

До успешного удаления:

<input id="ProductId" name="ProductId" type="hidden" value="6" />
<input id="ProductId" name="ProductId" type="hidden" value="22" />
<input id="ProductId" name="ProductId" type="hidden" value="47" />

После удаления третьего продукта (47) на оставшихся элементах отображается скрытое поле значения 47. Моя модель, безусловно, обновилась, так как я вижу, что элемент удален при выполнении действия контроллера, но это как если бы мое частичное представление не связывает должным образом.

Буду признателен за любую помощь.

Спасибо Ben

Answer 1

Поместите идентификатор продукта в значения маршрута для расширения формы вместо скрытого поля. Я думаю, что это позволит полностью избежать этой проблемы.

<%using (Ajax.BeginForm("RemoveFromCart", "Cart", new { id = line.Product.Id }, new AjaxOptions { UpdateTargetId="cart"}))
  {%>                           
        <%=Html.Hidden("returnUrl", ViewData["returnUrl"])%>
        <input type="image" src="<%=AppHelper.ImageUrl("delete.gif")%>" value="Remove item"  />
<%} %>