只显示符合条件的复选框

Question

我的代码中有许多复选框，但并非所有复选框都显示给用户。只有满足if条件的复选框才会显示给用户。

假设NavItem包含"水果"决不";进行下去,"。因此，当我使用当前代码时，将显示满足条件的5个复选框。

我当前的工作代码:

<div id="checkboxes">
<ul class="dropdown">
@if (NavItem.Contains("fruits"))
<li class="dropdown-item">
<input type="checkbox" id="checkbox1" data-id=1 checked="true">
<label>apple</label>
</li>
<li class="dropdown-item">
<input type="checkbox" id="checkbox2" data-id=2>
<label>banana</label>
</li>                                
<li class="dropdown-item">
<input type="checkbox" id="checkbox3" data-id=3>
<label>orange/label>
</li>
}
@if (NavItem.Contains("greens"))
{
<li class="dropdown-item">
<input type="checkbox" id="checkbox4" data-id=4>
<label for="checkbox4">spinach</label>
</li>
<li class="dropdown-item">
<input type="checkbox" id="checkbox5" data-id=5>
<label for="checkbox5">celery</label>
</li>
}
@if (NavItem.Contains("nuts"))
{
<li class="dropdown-item">
<input type="checkbox" id="checkbox6" data-id=6>
<label for="checkbox6">almond</label>
</li>
<li class="dropdown-item">
<input type="checkbox" id="checkbox7" data-id=7>
<label for="checkbox7">walnut</label>
</li>
}
................
</ul>
</div>

我正在重写上面的代码，使它更容易阅读和维护。下面的代码工作得很好，除了我在合并if条件时遇到了麻烦。

@if (NavItem.Contains("fruits") || NavItem.Contains("greens") || NavItem.Contains("nuts")) // `if` does not work as expected
@for (var i = 1; i < 8; i++)
{
var no = i;
<li class="dropdown-item">
<input type="checkbox" id=@checkboxID[no] data-id=@item>
<label>@ItemName[no]</label>
</li>
}
@code{
List<string> ItemName = new List<string {"dummy", "apple", "banana", "orange", "spinach", "celery", "almond", "walnut"};
List<string> checkboxID = new List<string> {"dummy", "checkbox1", "checkbox2", "checkbox3", "checkbox4", "checkbox5", "checkbox6", "checkbox7"};
}

和前面一样，假设NavItem包含"fruits"决不";进行下去,"。因此，应该只显示满足此条件的5个复选框。但是这7个都显示出来了。我如何纳入if在我的新代码。谢谢你。

Answer 1

您的新版本的代码没有计算每个项。如果三个选项中的任何一个在NavItem中可用，则绘制所有项。为了复制原始功能，你需要像之前一样评估要绘制的项目范围。

@for (var i = 1; i < 8; i++)
{
bool isAvailable = false;
if (NavItem.Contains("fruits"))
isAvailable = i >= 1 && i <= 3;
if (!isAvailable && NavItem.Contains("greens"))
isAvailable = i >= 4 && i <= 5;
if (!isAvailable && NavItem.Contains("nuts"))
isAvailable = i >= 6 && i <= 7;
if (isAvailable)
{
<li class="dropdown-item">
<input type="checkbox" id=@string.Format("checkbox{0}",i) data-id=@i>
<label>@ItemName[i]</label>
</li>
}
}

我个人同意Bennyboy的观点，你原来的解决方案不是很可持续。但是，如果您通过删除checkboxID集合来省略ItemName和checkboxID之间的相关性，那么您的解决方案就会变得简单得多。

Answer 2

为了使您的系统可维护，您需要以某种方式键入您的信息，这样您就有了一个任意的类别集合，并且您可以轻松地向您想要的任何类别添加新成员。通常，数据将来自数据库，但这里我构建了一些示例数据:

@page "/"
<h3>My Diet</h3>
@foreach (var category in Categories)
{
<input style="margin: 3px;" type="checkbox" @bind="Checklist[category]" /> @category.Name
<br/>
}
<hr />
@foreach (var category in Checklist.Where(c => c.Value == true))
{
foreach (var item in CheckedFoods.Where(cf => cf.Key.CategoryID == category.Key.ID))
{
<input style="margin: 3px;" type="checkbox" @bind="CheckedFoods[item.Key]" /> @item.Key.Name
}
}
@code {
record FoodCategory(int ID, string Name);
record FoodItem(int CategoryID, string Name);
Dictionary<FoodCategory, bool> Checklist = new();
Dictionary<FoodItem, bool> CheckedFoods = new();
List<FoodCategory> Categories = new()
{
new (0,"fruits"), new (1,"greens"), new (2, "nuts")
};
List<FoodItem> FoodItems = new()
{
new (0, "apples"), new (0, "pears"), new (0, "bananas"),
new (1, "beans"), new (1, "cabbage"), new (1, "boogers"),
new (2, "almonds"), new (2, "walnuts"), new (2, "pecans"),
};
protected override void OnInitialized()
{
Checklist = Categories.ToDictionary(c => c, c => false);
CheckedFoods = FoodItems.ToDictionary(f => f, f => false);
}
}