时间戳

首页 > 解决方案 > 将 Blazor 中的井字游戏转换为 .Net Core MVC

asp.net-mvc - 将 Blazor 中的井字游戏转换为 .Net Core MVC

问题描述

我已通过 GitHub 链接https://github.com/exceptionnotfound/BlazorWasmTicTacToe从您那里检索到代码

其背后的代码是使用Blazor WASM开发的井字游戏。我想尝试使用他的代码使用.Net Core MVC（3.1）开发类似的代码。所以基本上我已经根据主要的 Blazor 源代码创建了模型，但是在运行时，Index.cshtml 没有响应。 它加载充满“x”而不是空白的网格

下面是我的视图（Index.cshtml）

@using TicTacGame.Models;
@{
ViewData["Title"] = "Tic Tac Toe";
GameBoard board = new GameBoard();
}

@if (!board.GameComplete)
{
<h2>@board.CurrentTurn's turn</h2>
}
else
{
<h2>
    @board.GetMessage()
    <button class="btn btn-success" onclick="@{board.Reset();} ">New Game</button>
</h2>
}

<div class="board">
@for (int i = 0; i < 3; i++)
{
    <div class="column">
        @for (int j = 0; j < 3; j++)
        {
            int x = i;
            int y = j;
            <div class="gamepiece
                @board.Board[i, j].Style.ToString().ToLower()" onclick=@{ board.PieceClicked(x, y);}
                 style="@(board.IsGamePieceAWinningPiece(i,j)?"opacity:0.1": "")"></div>

        }
    </div>
}

我的控制器是基本的： return View();

与 Blazor 工作中几乎相同的代码相比，我哪里出错了。

标签： asp.net-mvcasp.net-coreblazor

解决方案

问题在于onclick=@{ board.PieceClicked(x, y);}Blazor，它将在客户端的页面中运行。

但是，在 ASP.Net MVC 中，此视图将在服务器上呈现，并且board不可用，因此无法在客户端上运行。您必须将PieceClicked代码迁移到 TypeScript/JavaScript，以便在单击时它可以在客户端运行。

当然，这也意味着您也必须迁移board.Reset()。

推荐阅读