Asp.net 核心 RazorComponent 使用动态 <li></li>

Question

我正在我的 asp.net 核心 mvc 应用程序中创建一个 RazorComponent。

组件中有一个 html 列表，它是根据从模型中获取的项目数动态生成的。

<ul>
   @{
     foreach (var prod in newProductList)
      {
        if (prod.Brand.Equals("1") && prod.Class.Equals("2"))
         {
           <li @onclick="(() => AddToSaleList(prod.Product, prod.ProductId, prod.SellRate))">
              <div class="posSelected-item">
                 <span class="posFoodname inline-block"> @prod.Product </span>
                 <span class="inline-block posSeletedPrice">@prod.SellRate</span>
                 <span class="posFoodtotal-item inline-block">
                    <i class="inline-block fas fa-minus" @onclick="() => Quantity(2)"></i>
                    <span class="posincrementItem">@changeQuaitity</span>
                    <i class="inline-block fas fa-plus" @onclick="() => Quantity(1)"></i>
                 </span>
              </div>
            </li>
          }
        }
       }
</ul>

UI 看起来像这样（符合预期）

问题

UI 上的加号和减号按钮应该增加或减少列表中每个项目的数量。

我写的函数是

int changeQuaitity = 0;
public void Quantity(int e)
{
    if (e == 1)
    {
        changeQuaitity++;
    }
    else if (e == 2)
    {
        changeQuaitity--;
    }
}

但是，如您所见，由于增量与参数 changeQuantity 绑定，因此单击任何加号或减号按钮会同时更改每个列表项的数量。

如何修改代码以识别一个列表项并在单击列表上的按钮时仅更改该项目的数量。

Answer 1

每个条目都需要一个单独的柜台，所以我建议制作我称之为“承运人 class”的东西，以随每件商品一起携带数量信息：

class countableProducts {
    Product prod {get; set;}
    int quantity;
}

在你的初始化中：

foreach (var item in newProductList) 
    countableProductsList.Add( new countableProduct() { prod = item });

然后在你的循环中

foreach (var item in countableProductsList){
     // everything looks like item.prod.(property)
     <i class="inline-block fas fa-minus" @onclick="() => item.quantity--;"></i>
     <span class="posincrementItem">@item.quantity</span>
     <i class="inline-block fas fa-plus" @onclick="() => item.quantity++;"></i>
}

如果不编写整个程序，我没有足够的代码来制作一个工作示例，但希望你能看到我的想法。

Asp.net 核心 RazorComponent 使用动态 <li></li>

Asp.net core RazorComponent working with dynamic <li></li>

asp.net-core-mvc

blazor

razor-pages

blazor-webassembly

razor-components