如何实现点击时仅更新选中的单个图片，不影响其他共用默认图的图片

问题根源是所有列的图片都绑定了同一个全局变量DefaultImg，只要这个变量更新，所有绑定它的位置都会同步刷新，就会出现点击一列两列同时变化的情况。按下面调整即可：

1. 替换全局图片变量为分列存储的字典 #

删掉原来的单个DefaultImg变量，改用字典按列名存储各列独立的图片路径，初始化时统一设默认值：

// 分列存储图片路径，key为列名，value为对应列显示的图片地址
protected Dictionary<string, string> ColumnImgMap = new Dictionary<string, string>
{
    {"Apple", "Basket.png"},
    {"Banana", "Basket.png"}
};
// 保留你原有的状态切换变量
protected int value = 0;

2. 修改页面图片的绑定逻辑 #

把原来统一绑定DefaultImg的写法，改成绑定字典中对应列的数值：

<!-- Apple列图片 -->
<img src="@ColumnImgMap["Apple"]" @onclick="@(() => ImgSelector("Apple"))">
<!-- Banana列图片 -->
<img src="@ColumnImgMap["Banana"]" @onclick="@(() => ImgSelector("Banana"))">

3. 调整点击事件处理逻辑 #

事件触发时仅修改对应列的字典值，不会影响其他列：

protected void ImgSelector(string selectedColumn)
{
    if (value == 0)
    {
        value = 1;
        switch (selectedColumn)
        {
            case "Apple":
                ColumnImgMap["Apple"] = "Apple.png";
                break;
            case "Banana":
                ColumnImgMap["Banana"] = "Banana.png";
                break;
        }
    }
    else
    {
        value = 0;
        switch (selectedColumn)
        {
           case "Apple":
                ColumnImgMap["Apple"] = "Apple2.png";
                break;
            case "Banana":
                ColumnImgMap["Banana"] = "Banana2.png";
                break;
        }
    }
}

后续如果需要新增其他列，只要在ColumnImgMap字典里新增对应列名的初始值，新增列的图片绑定对应键即可，无需修改核心逻辑。

内容的提问来源于stack exchange，提问作者MarkCo