locked
Adding a row before the next set of rows in a HTML dynamically generated Table RRS feed

  • Question

  • User-973886032 posted

    Hello,

    I built a shopping cart and wanted to add to the bottom of each generated row, a custom row, in which I could display things like discounts. But so far, I cant seem to get my head around it. Its a basic table generated by c# in razor pages

      @try
        {
            @if (Model.Tbl_Shopping_Basket.Count() != 0)
            {
                decimal sum = 0;
    
                <div class="container">
                    <div class="row">
                        <div class="col-md-9 X_border_thin text-center ">
                            <table class="table-active table table-hover  text-center X_border_thin" id="Basket">
                                <thead class="Buttons_Orange">
                                    <tr>
                                        <th>
                                            Name
                                        </th>
                                        <th>
                                            Price
                                        </th>
                                        <th>
                                            Quantity
                                        </th>
                                        <th>
                                            Total
                                        </th>
    
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
    
                                    @foreach (var item in Model.Tbl_Shopping_Basket)
                                    {
                                        sum = sum + item.Basket_Total;
    
                                        <tr class="text-center">ehi
                                            <td>
                                              
                                                <a href="/products/@(item.ProductID)">
                                                    <span class="ml-3 classed " data-toggle="modal" data-target="#myModal" style="; left: 0; top: 0;" data-class="Customize">
    
                                                        <span class="">
                                                            <img src="/Images/Shops/Products/@(item.ProductID).png" alt="@item.ProductID)" id="Pro_customize" height="100" class="X_border_thin" />
                                                        </span>
    
    
    
                                                    </span>
                                                </a>
                                                <br />
                                                @Html.ActionLink(item.Tbl_Products.Product_Name, "Product Name", "#")
    
    
                                            </td>
    
                                            <td>
                                                @Html.DisplayFor(modelItem => item.Price_Unit)
                                            </td>
                                            <td class="text-center">
                                                <input id="BID" type="hidden" value="@item.BasketID" class="text-center" /><br />
                                                <div class="text-center minus"><button type="submit" class="form-control" style="width:50px;" value="-" id="minus">-</button><input id="Thea" class="form-control form-inline" type="number" autocomplete="off" style="width:70px;" min="1" size="5" max="10000" value="@item.Quantity" /><button type="submit" value="+" id="plus" class="form-control plus" style="width:50px;">+</button></div>
    
    
                                                <br />
                                                <div class="text-center">
                                                    <a class="remove small" href="#" asp-for="@item.ProductID" id="">Delete</a> <span id="Update2"  style="display:none">|</span>
                                                    <a class="save_l small" href="#" id="Update" style="display:none">Update</a>
                                                  
                                                </div>
                                            </td>
                                            <td>
                                                £ @Html.DisplayFor(modelItem => item.Basket_Total)
    
                                            </td>
    
    
                                        </tr>
    
    
                                    }
                                   
                                </tbody>
    
                            </table>
    
                        </div>
                        <div class=" position-sticky Summary  col-md-3 ">
                            <div class="font-weight-bold Buttons_Green ">YOUR ORDER SUMMARY</div>  <br />
                            <div id="Summary_Context" class="container">
                                <br />
                                <div class="col-12 small">You have  @*@(Model.Tbl_Shopping_Basket.Count())*@ Item(s) in your Basket </div>
    
    
                                <hr />
    
                                <div class="col-12 font-weight-bold ">Your Total : £ @sum.ToString("#,##0.##")</div>
    
                            </div>
                            <div id="Summary_Context_Update2" style="display:none;"></div>
    
                            <div id="Summary_Context_Update" style="display:none;">
                                <p>Please wait while we update your Basket..</p>
                                Processing ... <img src="~/images/giphy.gif" />
    
                            </div>
    
    
                            <br />
    
                            <input class="btn Buttons_Orange " id="CheckOut" type="submit" value="Proceed to Check Out" name="ehi" />
                            <hr />
                            <br />
                            <a href="/shops" class="small">Continue Shopping</a>
                            <div>
    
                            </div>
                            <div id="result"></div>
    
                        </div>
                    </div>
                </div>
    
    
    
            }
    
    
            else
            {
                <div class="text-center"> <br /> <br /> <br />  Your basket is empty !<br /> <br /> <br /> </div>
            }
    
        }
        catch (Exception err)
        { @err.Message.ToString();
    }

    see example on dropbox

    https://www.dropbox.com/s/i3ke4teaatp7e57/table.png?dl=0

    Tuesday, September 8, 2020 3:17 PM

Answers

  • User1535942433 posted

    Hi afrika,

    Accroding to your description and codes,you coud add tr and td in your razor pages and bind your data.

    Just like this:

     <div class="container">
            <div class="row">
                <div class="col-md-9 X_border_thin text-center ">
                    <table class="table-active table table-hover  text-center X_border_thin" id="Basket">
                        <thead class="Buttons_Orange">
                            <tr>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Price
                                </th>
                                <th>
                                    Quantity
                                </th>
                                <th>
                                    Total
                                </th>
    
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
    
                            @foreach (var item in Model)
                            {
                                decimal sum = 0;
                                sum = sum + item.ID;
    
                                <tr class="text-center">
                                    <td>
    
                                        <a href="/products/@(item.ID)">
                                            <span class="ml-3 classed " data-toggle="modal" data-target="#myModal" style="; left: 0; top: 0;" data-class="Customize">
    
                                                <span class="">
                                                    <img src="/Images/Shops/Products/@(item.ID).png" alt="@item.ID)" id="Pro_customize" height="100" class="X_border_thin" />
                                                </span>
    
    
    
                                            </span>
                                        </a>
                                        <br />
                                        @*@Html.ActionLink(item.Tbl_Products.Product_Name, "Product Name", "#")*@
    
    
                                    </td>
    
                                    <td>
                                        @*@Html.DisplayFor(modelItem => item.Price_Unit)*@
                                    </td>
                                    <td class="text-center">
                                        <input id="BID" type="hidden" value="@item.ID" class="text-center" /><br />
                                        <div class="text-center minus"><button type="submit" class="form-control" style="width:50px;" value="-" id="minus">-</button><input id="Thea" class="form-control form-inline" type="number" autocomplete="off" style="width:70px;" min="1" size="5" max="10000" /><button type="submit" value="+" id="plus" class="form-control plus" style="width:50px;">+</button></div>
    
    
                                        <br />
                                        <div class="text-center">
                                            <a class="remove small" href="#" asp-for="@item.ID" id="">Delete</a> <span id="Update2" style="display:none">|</span>
                                            <a class="save_l small" href="#" id="Update" style="display:none">Update</a>
    
                                        </div>
                                    </td>
                                    <td>
                                        @*£ @Html.DisplayFor(modelItem => item.Basket_Total)*@
    
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4"></td>  //bind your data.
                                </tr>
                            }
    
                        </tbody>
    
                    </table>
    
                </div>
                <div class=" position-sticky Summary  col-md-3 ">
                    <div class="font-weight-bold Buttons_Green ">YOUR ORDER SUMMARY</div>  <br />
                    <div id="Summary_Context" class="container">
                        <br />
                        <div class="col-12 small">You have  @*@(Model.Tbl_Shopping_Basket.Count())*@ Item(s) in your Basket </div>
    
    
                        <hr />
    
                        <div class="col-12 font-weight-bold ">Your Total : </div>
    
                    </div>
                    <div id="Summary_Context_Update2" style="display:none;"></div>
    
                    <div id="Summary_Context_Update" style="display:none;">
                        <p>Please wait while we update your Basket..</p>
                        Processing ... <img src="~/images/giphy.gif" />
    
                    </div>
    
    
                    <br />
    
                    <input class="btn Buttons_Orange " id="CheckOut" type="submit" value="Proceed to Check Out" name="ehi" />
                    <hr />
                    <br />
                    <a href="/shops" class="small">Continue Shopping</a>
                    <div>
    
                    </div>
                    <div id="result"></div>
    
                </div>
            </div>
        </div>

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 9, 2020 5:19 AM

All replies

  • User1535942433 posted

    Hi afrika,

    Accroding to your description and codes,you coud add tr and td in your razor pages and bind your data.

    Just like this:

     <div class="container">
            <div class="row">
                <div class="col-md-9 X_border_thin text-center ">
                    <table class="table-active table table-hover  text-center X_border_thin" id="Basket">
                        <thead class="Buttons_Orange">
                            <tr>
                                <th>
                                    Name
                                </th>
                                <th>
                                    Price
                                </th>
                                <th>
                                    Quantity
                                </th>
                                <th>
                                    Total
                                </th>
    
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
    
                            @foreach (var item in Model)
                            {
                                decimal sum = 0;
                                sum = sum + item.ID;
    
                                <tr class="text-center">
                                    <td>
    
                                        <a href="/products/@(item.ID)">
                                            <span class="ml-3 classed " data-toggle="modal" data-target="#myModal" style="; left: 0; top: 0;" data-class="Customize">
    
                                                <span class="">
                                                    <img src="/Images/Shops/Products/@(item.ID).png" alt="@item.ID)" id="Pro_customize" height="100" class="X_border_thin" />
                                                </span>
    
    
    
                                            </span>
                                        </a>
                                        <br />
                                        @*@Html.ActionLink(item.Tbl_Products.Product_Name, "Product Name", "#")*@
    
    
                                    </td>
    
                                    <td>
                                        @*@Html.DisplayFor(modelItem => item.Price_Unit)*@
                                    </td>
                                    <td class="text-center">
                                        <input id="BID" type="hidden" value="@item.ID" class="text-center" /><br />
                                        <div class="text-center minus"><button type="submit" class="form-control" style="width:50px;" value="-" id="minus">-</button><input id="Thea" class="form-control form-inline" type="number" autocomplete="off" style="width:70px;" min="1" size="5" max="10000" /><button type="submit" value="+" id="plus" class="form-control plus" style="width:50px;">+</button></div>
    
    
                                        <br />
                                        <div class="text-center">
                                            <a class="remove small" href="#" asp-for="@item.ID" id="">Delete</a> <span id="Update2" style="display:none">|</span>
                                            <a class="save_l small" href="#" id="Update" style="display:none">Update</a>
    
                                        </div>
                                    </td>
                                    <td>
                                        @*£ @Html.DisplayFor(modelItem => item.Basket_Total)*@
    
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="4"></td>  //bind your data.
                                </tr>
                            }
    
                        </tbody>
    
                    </table>
    
                </div>
                <div class=" position-sticky Summary  col-md-3 ">
                    <div class="font-weight-bold Buttons_Green ">YOUR ORDER SUMMARY</div>  <br />
                    <div id="Summary_Context" class="container">
                        <br />
                        <div class="col-12 small">You have  @*@(Model.Tbl_Shopping_Basket.Count())*@ Item(s) in your Basket </div>
    
    
                        <hr />
    
                        <div class="col-12 font-weight-bold ">Your Total : </div>
    
                    </div>
                    <div id="Summary_Context_Update2" style="display:none;"></div>
    
                    <div id="Summary_Context_Update" style="display:none;">
                        <p>Please wait while we update your Basket..</p>
                        Processing ... <img src="~/images/giphy.gif" />
    
                    </div>
    
    
                    <br />
    
                    <input class="btn Buttons_Orange " id="CheckOut" type="submit" value="Proceed to Check Out" name="ehi" />
                    <hr />
                    <br />
                    <a href="/shops" class="small">Continue Shopping</a>
                    <div>
    
                    </div>
                    <div id="result"></div>
    
                </div>
            </div>
        </div>

    Best regards,

    Yijing Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 9, 2020 5:19 AM
  • User-973886032 posted

    thanks a lot, it worked

    Wednesday, September 9, 2020 10:10 AM