How can I pass the list of Id s to Login method by Java script for My Cart, in ASP.NET

Question

this is my script and I can save ChefFoodIds in local Strorage, But I can not pass all ChefFoodIds that get, to Login Method:

Script:

       $(document).ready(function () {
           $(document).on("click", ".add-to-cart", function (e) {
               e.preventDefault();

               var cartCount = +$(".cart-counter").html();
               $(".cart-counter").html(cartCount + 1);

               // استفاده از .attr('data-id') به جای .data('id')
               var chefFoodId = $(this).attr('data-id');
               console.log('ChefFoodId = ', chefFoodId);  

             
               var chefFoodIdsStored = localStorage.getItem('chefFoodIds');
               var chefFoodIds = chefFoodIdsStored ? JSON.parse(chefFoodIdsStored) : [];

             
               chefFoodIds.push(chefFoodId);

           
               localStorage.setItem('chefFoodIds', JSON.stringify(chefFoodIds));

            
               console.log('Updated chefFoodIds = ', chefFoodIds);
           });
       });


      
       $("#cart-link").click(function (e) {
           e.preventDefault();

           var isAuthenticated = $('#isAuthenticated').val() === 'true';

           if (isAuthenticated) {
               var chefFoodIdsStored = localStorage.getItem('chefFoodIds');
               var chefFoodIdsArray = chefFoodIdsStored ? JSON.parse(chefFoodIdsStored) : [];
               var chefFoodIdsString = chefFoodIdsArray.join(',');
               var returnUrl = $('#hidden-returnUrl').val() || '/UserPanel/AddToCart';

               if (!returnUrl || chefFoodIdsArray.length === 0) {
                   window.location.href = '/UserPanel/AddToCart';
                   return;
               }

               $("#cart-chefFoodIds").val(chefFoodIdsString);
               $("#cart-form").attr('action', returnUrl);
               $("#cart-form").submit();

               localStorage.removeItem('chefFoodIds');
           } else {
               var returnUrl = $('#hidden-returnUrl').val() || '/UserPanel/AddToCart';

               $('#Login').modal('show');
               $('#Login').find('.modal-content').load('/Account/Login', function () {
                   var chefFoodIdsStored = localStorage.getItem('chefFoodIds');
                   var chefFoodIdsArray = chefFoodIdsStored ? JSON.parse(chefFoodIdsStored) : [];
                   $('#hidden-chefFoodIds').val(chefFoodIdsArray.join(','));
                   $('#hidden-returnUrl').val(returnUrl);
               });
           }
       });
});
 

and this is part of my view login view to get this data:

                                <form  method="post" action="@Url.Action("Login", "Account")">
 
                                        
                                        <input type="hidden" id="hidden-chefFoodIds" name="ChefFoodIds"/>
                               
                                    <input type="hidden" id="hidden-returnUrl" name="ReturnUrl"/>

and in my Cart Icon in header I get it and set the Id s , But the list of ChefFoodId s do not pass th login method:

     <!-- فرم برای ارسال اطلاعات به سبد خرید -->
     <form id="cart-form" asp-controller="Home" asp-action="AddToCart" asp-area="UserPanel" method="get" style="display: none;">
         <input type="hidden" id="cart-chefFoodIds" name="chefFoodIds" />

     </form>

     <!-- لینک سبد خرید -->
     <a href="#" id="cart-link" class="position-relative my-auto">
         <i class="fa fa-shopping-bag fa-2x"></i>
         <span class="cart-counter position-absolute bg-secondary rounded-circle d-flex align-items-center justify-content-center text-dark px-1">0</span>
     </a>

     @{
         System.Diagnostics.Debug.Assert(User.Identity != null, "User.Identity != null");
     }
     @if (User.Identity.IsAuthenticated)
     {
         <input type="hidden" id="isAuthenticated" value="@User.Identity.IsAuthenticated" />

         <div class="nav-item dropdown">
             <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">@User.Identity.Name WellCome </a>
             <div class="dropdown-menu m-0 bg-secondary rounded-0">
                 <a asp-controller="home" asp-action="AddToCart" asp-area="UserPanel" class="dropdown-item">User Panel</a>
 
                 <a href="/Logout" class="dropdown-item">Exit</a>
             </div>
         </div>
     }
     else
     {
         <div id="placeHolderHere"></div>

         <button id="login-button" data-toggle="ajax-modal" data-url="@Url.Action("Login", "Account")" class="mobile-call-menu login-border bg-white">
             <i class="fas fa-user fa-2x"></i>
         </button>

     }
          

Answer 1

According to your codes, the reason why your login-button doesn't pass any data to login method is, the login-button doesn't contain the form tag with the submit button.

To post the data to the backend, you need write the form tag and put the input tag to store the data and then the post method will post the data to the backend.

I suggest you could modify the login button's form to add the input and bind the data by using the js when clicking the submit button.

Like this:

<div id="Login" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="LoginModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <!-- Content will be loaded here via JavaScript -->
            <form method="post" action="@Url.Action("Login", "Account")">
                <input type="hidden" id="hidden-chefFoodIds" name="ChefFoodIds"/>
                <input type="hidden" id="hidden-returnUrl" name="ReturnUrl"/>
                <!-- Other login form fields -->
            </form>
        </div>
    </div>
</div>