Remove Item from cart in ASP.NET in stepForm

Question

this is my method for add and remove Items from session :

   public async Task<IActionResult> AddToCart(int chefFoodId, bool stayInCartPage = false)
   {
       var item = await _orderService.GetItemByChefFoodId(chefFoodId);
       if (item != null)
       {
           _siteService.SaveInSession(item);
       }

       // Save returnUrl in session
       var returnUrl = stayInCartPage ? "/UserPanel/ShowCart" : "/";
       HttpContext.Session.SetString("returnUrl", returnUrl);

       // Check value in Both View: FoodMenu & ShowCart
       if (stayInCartPage)
       {
           return RedirectToAction("ShowCart", "Home", new { area = "UserPanel" });
       }
       else
       {
           return RedirectToAction("Index", "Home", new { area = "" });
       }
   }



   public async Task<IActionResult> RemoveFromCart(int chefFoodId)
   {
       var item = await _orderService.GetItemByChefFoodId(chefFoodId);
       if (item != null)
       {
           _siteService.RemoveFromSession(item);
       }

       return RedirectToAction("ShowCart");
   }
  

My cart View is a step form that have some internal Form , and first form have an Id for control of StepForm:

 <form action="#" id="step-form-horizontal" class=" ">
...

in part of + , - for add and remove item I have these forms:

      <td class="col-3">
          <div class="input-group mb-3 input-group-sm">
              <div class="input-group-prepend">
                  <form asp-controller="Home" asp-action="RemoveFromCart" method="post" class="d-inline">
                      <input type="hidden" name="chefFoodId" value="@item.ChefFoodId" />
                      <button class="btn btn-outline-secondary" type="submit">-</button>
                          @Html.AntiForgeryToken()
                  </form>
              </div>
              <input type="text" class="form-control text-center quantity-input" value="@item.Quantity" readonly data-id="@item.ChefFoodId">
              <div class="input-group-append">
                  <form asp-controller="Home" asp-action="AddToCart" method="post" class="d-inline">
                      <input type="hidden" name="chefFoodId" value="@item.ChefFoodId" />
                      <input type="hidden" name="stayInCartPage" value="true" />
                      <button class="btn btn-outline-secondary" type="submit">+</button>
                          @Html.AntiForgeryToken()
                  </form>
              </div>
          </div>
      </td>

but just addTocart work and remove does not work, when I change main form to section , both of methods work
But I Can not change this part to section like:

<Section action="#" id="step-form-horizontal" class=" ">
If I change to section , how ever removefromCart method will be work , but form does not work.
How do I do to have both , stem form work correct , and Remove method work correct

Answer 1

Nested forms are invalid html and not supported. To achieve your requirement,you could remove the nested form and set asp-route-xxx in the button to send the value you want(e.g asp-route-chefFoodId="@item.ChefFoodId", asp-route-stayInCartPage="true"), pls follow the code below:

@model CartModel
<form asp-action="YourAction" method="YourMethod">
    <table>
        @foreach (var item in Model.CartItems)
        {
            <tr>
                <td class="col-3">
                    <div class="input-group mb-3 input-group-sm">
                        <div class="input-group-prepend">
                            <button asp-controller="Home" asp-action="RemoveFromCart" asp-route-chefFoodId="@item.ChefFoodId" method="post" class="btn btn-outline-secondary" type="submit">-</button>
                        </div>
                        <input type="text" class="form-control text-center quantity-input" value="@item.Quantity" readonly data-id="@item.ChefFoodId">
                        <div class="input-group-append">                            
                             <button asp-controller="Home" asp-action="AddToCart" asp-route-chefFoodId="@item.ChefFoodId" asp-route-stayInCartPage="true" method="post" class="btn btn-outline-secondary" type="submit">+</button>                             
                        </div>
                    </div>
                </td>
            </tr>
        }
    </table>
    <input type="submit" value="post" />
</form>