Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Daniel Rogers 81 posts 397 karma points
    Aug 27, 2021 @ 14:10
    Daniel Rogers
    0

    Umbraco8 Html.BeginUmbracoForm rendering the first element different.

    Using Umbraco8

    I have a Partial view that renders a heap of product cards (each card is rendered by another partial view).

    the first partial view (parent partial view can be rendered with pagination or not.

    if not pagination

    <p>Total Products @Model.Count</p>
    <div class="row">
        @foreach (Ibd_eCommerce_Product product in Model.OrderBy(x => x.CardPrice))
        {
        Html.RenderPartial("IBDCommerce/IBDeCommerceElements/IBDProductCard", product);
        }
    </div>
    

    if pagination

    <div id="pagination-ajax">
            @using (Ajax.BeginForm("AjaxProductPaginiation", "IBDCommerceElements", new AjaxOptions
            {
                HttpMethod = "Post",
                InsertionMode = InsertionMode.Replace,
                LoadingElementId = "progress",
                UpdateTargetId = "pagination-ajax"
            }))
            {
                @Html.AntiForgeryToken();   // Determain the number of videos on a page. Default is 8
                <input type="hidden" name="model" value='@Model.Id' />
                <input type="hidden" name="page-id" value="[email protected]"/>
                <div class="row">
    
                    @{
                        foreach (Ibd_eCommerce_Product product in Model.Products)
                        {
                            string classControls = Model.ClassControls;
                            <!--<div class="@classControls">-->
                            Html.RenderPartial("IBDCommerce/IBDeCommerceElements/IBDProductCard", product);
                            <!--</div>-->
                        }
                    }
                </div>
    
                if (Model.TotalPages > 1)
                {
                    <nav aria-label="Pagination alignment">
                        <ul class="pagination pagination-orange justify-content-center">
                            @if (Model.ActivePage > 1)
                            {
                                int activePage = Model.ActivePage - 1;
                                <li class="page-item">
                                    <button class="page-link" name="submitButton" value="@activePage" type="submit" title="Previous">
                                        <span aria-hidden="true"><i class="ni arrow left" aria-hidden="true"></i></span>
                                    </button>
                                </li>
                            }
                            @for (int p = 1; p < Model.TotalPages + 1; p++)
                            {
                                <li class="page-item @(p == Model.ActivePage ? "active" : string.Empty)">
                                    <button class="page-link" name="submitButton" value="@p" type="submit">@p</button>
                                </li>
                            }
                            @if (Model.ActivePage < Model.TotalPages)
                            {
                                <li class="page-item">
                                    <button class="page-link" name="submitButton" value="@(Model.ActivePage + 1)" type="submit" title="Next">
                                        <span aria-hidden="true"><i class="ni arrow right" aria-hidden="true"></i></span>
                                    </button>
                                </li>
                            }
                        </ul>
                    </nav>
                }
            }
        </div>
    

    so first obvious deference is on is an ajax form

    the card Html.RenderPartial("IBDCommerce/IBDeCommerceElements/IBDProductCard", product); his this piece of code in it which is the section that gives the issue.

    <div class="col-sm-12 col-md-6 col-lg-4 col-xl-3">
            .......
                        using (Html.BeginUmbracoForm("SiteWideAddToBasket", "IBDCommerceStore", new { @class = "form", role = "form" }))
                        {
                            <input type="hidden" id="productId" name="productId" value="@Model.Id" />
                            <input type="hidden" id="variatKey" name="variatKey" value="@Model.ProductVariant.FirstOrDefault().Key" />
                            <button class="btn btn-add-to-cart  active mb-3 me-2 bg-gradient-green btn-bold" id="[email protected]" type="submit">
                                Add To Cart
                            </button>
                        }
            .......
    </div>
    

    when rendering with pagination ie inside the ajax form the very first card and only the first card triggers the pagination controller routine rather than the add to cart routine. all other cards work correctly.

    the rendered html should look like this

    <form action="/store/" enctype="multipart/form-data" method="post">                            <input type="hidden" id="productId" name="productId" value="17230">
                                <input type="hidden" id="variatKey" name="variatKey" value="bdc277cc-10a1-427d-98c9-8873c427d0ea">
                                <button class="btn btn-add-to-cart  active mb-3 me-2 bg-gradient-green btn-bold" id="addToBasket-17230" type="submit">
                                    Add To Cart
                                </button>
    <input name="ufprt" type="hidden" value="473D5EE6053ABCAF18F2132DDE85381B9E9F3FED27BCA78553E23A3DE3D8BCD5771C7595266876F51820597018BE4A3632F517F072B150F5F6CA7FEB3CF257CD13314ED173BDDE719B48D31DAEF0649B98BA595748B21F1AFB37E9DC1F0A170811A11E7504A4C23D596E56A7BC73B30B95FF18976F9E945BC7A3BB13DA9DA92BDCF0356E9686992E962B2FEAA610C50D7032E40C510760754002DFCF1978B1E8DC9F823E0661B6AF950DBEA78141E328F6D85F5E357C753B144CF92DA42C09FAAC85ADA2E55C1FAA7F6AE054E862F8FB"></form>
    

    however it renders missing the

    encapsulation

    <input type="hidden" id="productId" name="productId" value="17230">
                                <input type="hidden" id="variatKey" name="variatKey" value="bdc277cc-10a1-427d-98c9-8873c427d0ea">
                                <button class="btn btn-add-to-cart  active mb-3 me-2 bg-gradient-green btn-bold" id="addToBasket-17230" type="submit">
                                    Add To Cart
                                </button>
    <input name="ufprt" type="hidden" value="473D5EE6053ABCAF18F2132DDE85381B9E9F3FED27BCA78553E23A3DE3D8BCD5771C7595266876F51820597018BE4A3632F517F072B150F5F6CA7FEB3CF257CD13314ED173BDDE719B48D31DAEF0649B98BA595748B21F1AFB37E9DC1F0A170811A11E7504A4C23D596E56A7BC73B30B95FF18976F9E945BC7A3BB13DA9DA92BDCF0356E9686992E962B2FEAA610C50D7032E40C510760754002DFCF1978B1E8DC9F823E0661B6AF950DBEA78141E328F6D85F5E357C753B144CF92DA42C09FAAC85ADA2E55C1FAA7F6AE054E862F8FB">
    

    If rendered without pagination it is fine renders correctly. The question is why as and how do I fix it.

  • Daniel Rogers 81 posts 397 karma points
    1 week ago
    Daniel Rogers
    0

    Any helpers would be appreciated. This is for the first button on the page. This code is repeated in a loop 36 times.

    The

    is not being generated on the first instance.

    <div class="btn-group dropdown" role="group">
                                <button class="btn btn-add-to-cart dropdown-toggle bg-gradient-green" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Add To Cart
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton" style="">
                                    <li>
                                            <input type="hidden" id="productId" name="productId" value="16729">
                                            <input type="hidden" id="variatKey" name="variatKey" value="c2de7722-670f-4bd3-995a-34c1ff318f1c">
                                            <button class="dropdown-item" id="addToBasket-16729-LE-1A-B" type="submit">Black<span class="product-price">$339</span><span class="cart-color-dot" style="background-color: #000000"></span></button>
    <input name="ufprt" type="hidden" value="3B1BD9BA72F5DE30942418299E076DD6F9A4238FD3B635AF554C6B9ACBB97561D38E9D50C9F6AD0D93761A9EF3B904B122C5F8DA24B4E5130BCA07A3A8B064D39076340BA6B9E44FC15BE0506CC241DCC8D9C8CBCBAF0396950EBC2B59C657A1F7F7B337681A29C86B3F95E325A25C71D3C2F79DB95AC473005131986AA700B685673E2087B3B455AC62045BFEDD1920CBAE0C873B7170CFF7D3274C8E356E3DB2D94FCF58E3BAA0469BCF0E596BE7AF">                                </li>
                                    <li>
    <form action="/umbraco/Surface/IBDeCommerceProductListing/SubmitProductListing" class="form" enctype="multipart/form-data" method="post" role="form">                                        <input type="hidden" id="productId" name="productId" value="16729">
                                            <input type="hidden" id="variatKey" name="variatKey" value="f51e1bea-93bd-4c8d-be21-90358ccd8b36">
                                            <button class="dropdown-item" id="addToBasket-16729-LE-1A-W" type="submit">White<span class="product-price">$339</span><span class="cart-color-dot" style="background-color: #ffffff"></span></button>
    <input name="ufprt" type="hidden" value="B66D8C99339A53333EF6F20F79F7241E9B17B0F24761F0DFF77322696E6A7DFF436EF8AEA8AF8ADE0D1B6E2165E09D808B4F7C3BE5694C9232C4F74949613B8BF431B73BBF272D08997ECDF9AA91BC2C206AC45E3CB3B5A2CF7FC06A0DB6454E00C73F718971203F16FD572291CE28CDB697D98DF9E5944228FA16B0D2A9E743256F7ABB4650413CA534B3C8EC9A021B792C8C371F61FDA0A8293A13BFD274AC324790B5FB72510E5BAA86DC16785B07"></form>                                </li>
                                </ul>
                            </div>
    
  • Huw Reddick 536 posts 1726 karma points
    1 week ago
    Huw Reddick
    0

    my first comment would be that you can't nest forms which when you have pagination on you appear to be doing, you need the pagination form to be outside of your form rather than your card forms nested inside the pagination form.

    so your Ajax.BeginForm should only contain your navigation code and not the foreach loop that renders your cards

Please Sign in or register to post replies

Write your reply to:

Draft