Проблема здесь в том, что вам нужно думать о компонентах, а не писать напрямую для каждого элемента. Что вы должны сделать, это создать объект, который представляет состояние компонента, в вашем случае карту с состоянием Hidden / Shown, FileName и значением Sr c.
Ниже я позвоню это состояние Image и представьте его классом.
public class Image
{
public int FileName {get;set;}
public bool Shown {get;set;}
public string Src => Shown ? $"{FileName}.jpg" : "0.jpg";
}
Далее нам нужно создать коллекцию предметов. Это может быть stati c, полученное из источника данных, такого как база данных, et c. В этом примере я буду использовать функцию Enumerable.Range для генерации списка значений в диапазоне от 1 до 10. Метод Select назначит эти значения новому изображению, задав значение FileName. Значения хранятся в списке.
List<Image> items = Enumerable.Range(1, 10).Select(i => new Image { FileName = i}).ToList();
В части пользовательского интерфейса нам нужно визуализировать некоторую разметку. Изображение будет работать нормально, но кнопка была проще для примера. В событии onclick мы просто устанавливаем значение Shown в true. Установка этого значения обновляет свойство Sr c, отображающее «показанное» изображение, 1-10.jpg.
@foreach (var item in items) {
<button @onclick="@(()=> item.Shown = true)">@item.Src</button>
}
Собрав все вместе, вы получите:
@foreach (var item in items) {
<button @onclick="@(()=> item.Shown = true)">@item.Src</button>
}
@code {
List<Image> items = Enumerable.Range(1, 10).Select(i => new Image { FileName = i}).ToList();
public class Image
{
public int FileName {get;set;}
public bool Shown {get;set;}
public string Src => Shown ? $"{FileName}.jpg" : "0.jpg";
}
}
Вы можете замените кнопку изображением для вашей задачи.
См. решение, работающее в режиме реального времени здесь https://blazorfiddle.com/s/m01smajj
Если вы хотите переключить Показано на / выкл
@foreach (var item in items) {
<button @onclick="@(()=> item.Shown = !item.Shown)">@item.Src</button>
}