Blazor：在没有 js 的情况下使用 @Onclick 更改图像 src

Question

经过 Delphi 年之后，我开始学习 C#。我决定学习 blazor。我正在尝试编写有关基本纸牌智力游戏的程序。页面上必须有随机图像，并且在初始页面上所有图像都带有黑色图片 (0.jpg) 我在 xxx.razor

顶部使用 for 循环创建随机图像的 id 属性

例如

<image src=0.jpg id=1>
<image src=0.jpg id=3>
<image src=0.jpg id=1>
<image src=0.jpg id=2>
<image src=0.jpg id=2>
<image src=0.jpg id=3>

当用户点击id=3 image image 属性应该是因此将显示 img 3.jpg。

我用 jsInterop 使那个场景成为它的基础。但我想知道我可以只使用 C# 代码吗？坦克。编程环境：Linux mint & Visual Studio Code & .Net Core 3.1

Answer 1

这里的问题是您需要考虑组件而不是直接写入每个元素。您应该做的是创建一个表示组件状态的对象，在您的例子中是一张具有 Hidden/Shown 状态、文件名和 Src 值的卡片。

下面我将调用此状态图像并用 class 表示它。

    public class Image
    {
        public int FileName {get;set;}
        public bool Shown {get;set;}
        public string Src => Shown ? $"{FileName}.jpg" : "0.jpg";
    }

接下来，我们需要创建一个项目集合。这可以是静态的，来自数据库等数据源。在本例中，我将使用 Enumerable.Range 函数生成一个范围为 1-10 的值列表。 Select 方法会将这些值分配给设置 FileName 值的新图像。这些值存储在列表中。

List<Image> items = Enumerable.Range(1, 10).Select(i => new Image { FileName = i}).ToList();

在UI部分，我们需要渲染一些标记。图片在这里可以很好地工作，但是按钮更容易用于示例目的。在 onclick 事件中，我们只需将 Shown 值设置为 true。设置此值会更新显示 "shown" 图像的 Src 属性，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";
    }
}

您可以将按钮替换为您任务的图像。

<img src="@item.Src" @onclick="@(()=> item.Shown = true)" />

在此处查看有效的解决方案 https://blazorfiddle.com/s/m01smajj

如果要切换显示on/off

@foreach (var item in items) {
    <button @onclick="@(()=> item.Shown = !item.Shown)">@item.Src</button>
}

Blazor：在没有 js 的情况下使用 @Onclick 更改图像 src

Blazor : Change image src with @Onclick without js

c#

linux

blazor

.net-core-3.1

asp.net-core-3.1