ASP.NET MVC中如何修改tile.Visible属性并在首次循环设为true实现卡片翻转

问题根因 #

你出现需要点击两次才能翻转卡片的核心原因是混淆了服务端Razor代码和客户端JS代码的执行时机：

• 带@前缀的Razor代码只会在页面服务端渲染阶段执行，也就是页面还没发送到用户浏览器的时候就已经运行完了
• 你把@tile.Visible = true写在onclick属性里，这段代码根本不会在用户点击按钮时触发，只会在渲染页面时直接临时修改服务端的tile对象值，不会和客户端点击事件绑定，也不会持久化存储tile的可见状态，所以第一次提交请求后服务端返回的页面里tile还是不可见状态，才需要两次操作才能生效。

解决方案 #

方案1：保持服务端渲染逻辑（无需修改现有交互模式） #

你需要在点击按钮时把选中卡片的唯一标识提交到服务端，由服务端更新对应tile的可见状态后再渲染页面，一次提交即可完成翻转。

1. 首先修改控制器的Index逻辑，接收选中的卡片ID更新状态：

public IActionResult Index(int? selectedTileId)
{
    // 你原有的获取tile列表的逻辑
    var tiles = GetTileListFromDataSource();
    if(selectedTileId.HasValue)
    {
        var targetTile = tiles.FirstOrDefault(t => t.Id == selectedTileId.Value);
        if(targetTile != null) targetTile.Visible = true;
    }
    return View(tiles);
}

2. 修改Razor页面的按钮代码，删除无效的onclick赋值：

@foreach (var tile in Model)
{
    <div style="width: 400px;">
        <div class="card" style="width: 100px; float:left;">
            @if (!tile.Visible)
            {
                <img src="~/images/unknown.png" alt="..." style="width: 100px; height: 100px;">                    
                <button asp-action="Index" type="submit" name="selectedTileId" value="@tile.Id" class="btn btn-primary">Choose</button>
            }
            else
            {
                <img src="~/images/bust.png" alt="..." style="width: 100px; height: 100px;">
                if (tile.Value == "0.00")
                {
                    // 输掉对局扣除金币逻辑
                }
                else
                {
                    // 获胜对局增加金币逻辑
                }
                <input asp-controller="Game" asp-action="betCoins" type="submit" value="Choose" class="btn btn-primary" />
            }
            <br>
            <div class="card-body">
                <div>@tile.Value</div>
            </div>
        </div>
    </div>
}

方案2：纯客户端翻转（无需刷新页面，交互更流畅） #

如果不需要每次翻转都刷新页面，可以用JS实现前端即时翻转，需要同步状态到服务端的话再加AJAX请求即可：

@foreach (var tile in Model)
{
    <div style="width: 400px;">
        <div class="card tile-card" style="width: 100px; float:left;" data-tile-id="@tile.Id">
            <!-- 卡片背面 默认显示 -->
            <div class="tile-back" style="display: @(tile.Visible ? "none" : "block")">
                <img src="~/images/unknown.png" alt="..." style="width: 100px; height: 100px;">
                <button type="button" class="btn btn-primary flip-btn">Choose</button>
            </div>
            <!-- 卡片正面 翻转后显示 -->
            <div class="tile-front" style="display: @(tile.Visible ? "block" : "none")">
                <img src="~/images/bust.png" alt="..." style="width: 100px; height: 100px;">
                <form asp-controller="Game" asp-action="betCoins" method="post">
                    <input type="hidden" name="tileId" value="@tile.Id">
                    <button type="submit" class="btn btn-primary">Choose</button>
                </form>
            </div>
            <br>
            <div class="card-body">
                <div>@tile.Value</div>
            </div>
        </div>
    </div>
}

<!-- 翻转逻辑JS -->
@section Scripts {
    <script>
    document.querySelectorAll('.flip-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const card = this.closest('.tile-card');
            // 切换正反面显示
            card.querySelector('.tile-back').style.display = 'none';
            card.querySelector('.tile-front').style.display = 'block';
            // 如需同步状态到服务端可加AJAX请求
            // fetch('/Game/UpdateTileVisible', {
            //     method: 'POST',
            //     headers: {'Content-Type': 'application/json'},
            //     body: JSON.stringify({tileId: card.dataset.tileId})
            // })
        });
    });
    </script>
}

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