CODEWITHSUNDEEP
razor-pagesasp.net-core-3.1
ProgrammerNewbie121
ProgrammerNewbie121

Reputation: 11

Razor Pages Page Handler not passing ID with POST method

I have a basic e-commerce website and i am trying to get the AddToCart feature working. I have an icon on my view which once clicked, should hit my AddToCart page-handler method, passing in the products id. The method is hit by my code, but the id is not being passed.

It works fine in my other page handlers such as OnPostEditProduct:

    public ActionResult OnPostAddToCart(int Id)
    {
        if (Id < 1)
        {
            return NotFound();
        }

        return new RedirectToPageResult("./Index");

    }

    public IActionResult OnPostEditProduct(int id)
    {
        if (id  < 1)
        {
            return NotFound();
        }

        return new RedirectToPageResult("./EditProduct", new { id = id });
        
    }

Here is the Index view:

<div id="productsWrapper" class="row">
    @foreach (var product in Model.Products)
    {
    <div class="col-sm-3">
        <a asp-page="/order" asp-route-id="@product.Id" title="Order @product.Name">
            <div class="productInfo" id="@product.Id">
                <h3>@product.Name</h3>
                <img class="product-image img-fluid img-thumbnail" src="~/Images/Products/Thumbnails/@product.ImageName" alt="Image of @product.Name" />
                @if (SignInManager.IsSignedIn(User))
                {
                    <input type="radio" name="productcheckbox" />
                }
                <p class="description">@product.Description</p>
            </div>
        </a>
        <form asp-page-handler="AddToCart" asp-route-id="@product.Id" method="post">            
            <button><i class="fa fa-shopping-cart"></i></button>
            
        </form>
        <div class="action">
            <p class="price float-left">[email protected]("{0:f}", product.Price)</p>
            <a class="btn btn-sm btn-danger order-button float-right" asp-page="/order" asp-route-id="@product.Id" title="Order @product.Name">Order Now</a>
        </div>
    </div>
    }
</div>


<div class="row">
    @if (SignInManager.IsSignedIn(User))
    {

        if (User.IsInRole("Admin"))
        {

            <a class="btn btn-danger order-button addproductbtn" asp-page="/addproduct">Add Product</a>


        }


        <form asp-page-handler="EditProduct" method="post">
            <button class="btn btn-danger order-button editproductbtn">Edit Product</button>
            <input type="hidden" name="id" value="" />
        </form>       

    }
</div>

Any idea what I am doing wrong? I am new to Razor Pages. I have tried adding a hidden input field under my add to cart line - <input type="hidden" name="id" value="" /> this did not work either

Many thanks

Upvotes: 1

Views: 2642

Answers (1)

ldraynor
ldraynor

Reputation: 117

I think your problem is in the asp-route-id. Since you declare int Id with a capital I in the method, you should use asp-route-Id="@product.Id". When you use asp-route, you are routing the value to the method argument described after asp-route. This is because you can potentially route several things to the post method.

To give you a visual, I modified your code below. See that I am routing @product.somevalue to Somethingelse in the arguments of the post method.

<form asp-page-handler="AddToCart" asp-route-Id="@product.Id" asp-route-Somethingelse="@product.somevalue" method="post">
    <button><i class="fa fa-shopping-cart"></i></button>
</form>

    public ActionResult OnPostAddToCart(int Id, string Somethingelse)
    {
        if (Id < 1)
        {
            return NotFound();
        }

        return new RedirectToPageResult("./Index");

    }

Another thing to note, though I'm not 100% sure it matters, but I will usually put these attributes (asp-page-handler, asp-route) in the button element, not the form element. This would keep you from needing multiple form elements. If you give the form element an id= attribute, you can use the form= attribute in the button to specify which form to use. That way, the button can be outside of the form element and still use it.

Upvotes: 2

Related Questions