0

我正在我的 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 绑定，因此单击任何加号或减号按钮会同时更改每个列表项的数量。

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

4

1 回答 1

1

每个条目都需要一个单独的计数器，所以我建议制作我所谓的“承运人类”来携带每个项目的数量信息：

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>
}

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

于 2021-04-03T12:01:34.067 回答