Toggled visibility for the update button; had trouble with the class name being too long? "update-quantity" does not work whereas "update-qty" does? Alright.

ShopOnline.Web/Pages/ShoppingCart.razor

@@ -20,8 +20,9 @@ else {
                         <h5>@item.ProductName</h5>
                         <div class="mb-4">@item.ProductDescription</div>
                         <span>Price: <b>@item.Price.ToString("C")</b>
-                            <input type="number" @bind="@item.Quantity"/>
-                            <button class="btn btn-info btn-sm"
+                            <input @oninput = "() => UpdateQuantity_Input(item.Id)" 
+                                type="number" @bind="@item.Quantity"/>
+                            <button data-itemId="@item.Id" class="btn btn-info btn-sm update-qty"
                                 @onclick="(()=> UpdateQuantityCartItem_Click(item.Id, item.Quantity))"
                             >Update Quantity</button>
                         </span>

ShopOnline.Web/Pages/ShoppingCart.razor.css

@@ -0,0 +1,4 @@
+.update-qty{
+    display: none;
+    background-color: green;
+}

ShopOnline.Web/Pages/ShoppingCartBase.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 using ShopOnline.Models.Dtos;
 using ShopOnline.Web.Services.Contracts;
 
@@ -6,6 +7,9 @@ namespace ShopOnline.Web.Pages
 {
     public class ShoppingCartBase:ComponentBase
     {
+        [Inject]
+        public IJSRuntime Js { get; set; }
+
         [Inject]
         public IShoppingCartService ShoppingCartService { get; set; }
 
@@ -54,6 +58,8 @@ namespace ShopOnline.Web.Pages
 
                     UpdateItemTotalPrice(returnedUpdateItemDto);
                     CalculateCartSummaryTotals();
+                    await MakeUpdateQuantityButtonVisible(id, false);
+
                 }
                 else
                 {
@@ -73,6 +79,17 @@ namespace ShopOnline.Web.Pages
             }
         }
 
+        protected async Task UpdateQuantity_Input(int id)
+        {
+            await MakeUpdateQuantityButtonVisible(id, true);
+        }
+
+        private async Task MakeUpdateQuantityButtonVisible(int id, bool visible)
+        {
+            await Js.InvokeVoidAsync("MakeUpdateQuantityButtonVisible", id, visible);
+
+        }
+
         private void UpdateItemTotalPrice(CartItemDto cartItemDto)
         {
             var item = GetCartItem(cartItemDto.Id);

ShopOnline.Web/wwwroot/index.html

@@ -19,6 +19,7 @@
         <a href="" class="reload">Reload</a>
         <a class="dismiss">🗙</a>
     </div>
+    <script src="js/ShoppingCartFunctions.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
 </body>
 

ShopOnline.Web/wwwroot/js/ShoppingCartFunctions.js

@@ -0,0 +1,11 @@
+function MakeUpdateQuantityButtonVisible(id, visible)
+{
+    const updateQuantityButton = document.querySelector("button[data-itemId='" + id + "']");
+
+    if (visible == true) {
+        updateQuantityButton.style.display = "inline-block";
+    }
+    else {
+        updateQuantityButton.style.display = "none";
+    }
+}