我正在学习使用Blazor在C#中创建Web应用程序，其中一个页面是Scrabble游戏。我的实现细节如下:
为了更美观，我还使用了以下CSS样式（在wwwroot/index.html中引用）
- Board类存储其大小（默认为15）和其优惠方格（双倍单词，双倍字母等）。Scrabble类实现UI创建、操作、数据绑定等功能...
- 新的Board实例会初始化所有种类的方格（普通和优惠）
- Scrabble类有一个Init方法，该方法查看其Board成员以获取每个方格的种类，然后将相应的颜色代码存储在string 2D array中（与板块大小相同，便于访问）。我谈论的问题是稍后的这个数组
- UI使用HTML表格显示板，包括15行和15个单元格，每个单元格的style属性与上述字符串数组的相应颜色代码绑定，使用Blazor的特殊语法@。每个单元格还实现了一个onclick回调函数，为了简化起见，我仅更改第一个单元格的颜色（行0列0），使其与单击的单元格的颜色相同
问题:
- 位于（0,0）的HTML单元格根本不会改变其颜色。起初我以为这是由于绑定问题引起的（可能使用了错误的语法）。因此，我尝试将该单元格与一个单独的字符串成员绑定，并且它可以正常工作。结论：不是绑定问题
- 这一次我添加了一些控制台打印，在更新字符串数组中的元素之前和之后进行检查，以查看更改是否生效，然后我发现了问题。打印显示元素确实被正确地更新了，但是一旦回调方法完成，更改会被还原，HTML单元格的颜色保持不变。这通过再次点击进行确认（因为它调用相同的回调方法），打印显示颜色代码在更新之前与早期打印的颜色代码相同，而非上一个打印之后。具体来说，打印的内容为：
Click #1: (before) red (after) blue. Click #2: (before) red (after) blue点击#2的before应该是蓝色的。
解决方案:
- 尝试将字符串数组从2D更改为1D，仍然存在同样的问题
- 尝试使用
List<string>，它起作用。所以我现在坚持使用List，但我仍然更喜欢数组，因为2D索引访问语法比使用list[15 * row + col]或list[row][col]（嵌套列表）更整洁
问题: 为什么？为什么数组不能像预期的那样工作？显然，它在退出方法之前被更新，但之后被还原了
代码:
Board.cs
public class Board
{
public enum SquareKind
{
White,
DL,
TL,
DW,
TW,
Start
}
public const int SIZE = 15;
public readonly (int row, int col) StartPos = (7, 7);
public SquareKind[,] Squares = new SquareKind[SIZE, SIZE];
public Board()
{
// Initialize premium squares (including starting one)
Squares[0, 0] = SquareKind.TW;
Squares[1, 5] = SquareKind.TL;
Squares[5, 1] = SquareKind.TL;
Squares[5, 5] = SquareKind.TL;
Squares[1, 1] = SquareKind.DW;
Squares[2, 2] = SquareKind.DW;
Squares[3, 3] = SquareKind.DW;
Squares[4, 4] = SquareKind.DW;
Squares[0, 3] = SquareKind.DL;
Squares[3, 0] = SquareKind.DL;
Squares[2, 6] = SquareKind.DL;
Squares[6, 2] = SquareKind.DL;
Squares[6, 6] = SquareKind.DL;
Squares[0, 14] = SquareKind.TW;
Squares[1, 9] = SquareKind.TL;
Squares[5, 13] = SquareKind.TL;
Squares[5, 9] = SquareKind.TL;
Squares[1, 13] = SquareKind.DW;
Squares[2, 12] = SquareKind.DW;
Squares[3, 11] = SquareKind.DW;
Squares[4, 10] = SquareKind.DW;
Squares[0, 11] = SquareKind.DL;
Squares[3, 14] = SquareKind.DL;
Squares[2, 8] = SquareKind.DL;
Squares[6, 12] = SquareKind.DL;
Squares[6, 8] = SquareKind.DL;
Squares[14, 14] = SquareKind.TW;
Squares[13, 9] = SquareKind.TL;
Squares[9, 13] = SquareKind.TL;
Squares[9, 9] = SquareKind.TL;
Squares[13, 13] = SquareKind.DW;
Squares[12, 12] = SquareKind.DW;
Squares[11, 11] = SquareKind.DW;
Squares[10, 10] = SquareKind.DW;
Squares[14, 11] = SquareKind.DL;
Squares[11, 14] = SquareKind.DL;
Squares[12, 8] = SquareKind.DL;
Squares[8, 12] = SquareKind.DL;
Squares[8, 8] = SquareKind.DL;
Squares[14, 0] = SquareKind.TW;
Squares[13, 5] = SquareKind.TL;
Squares[9, 1] = SquareKind.TL;
Squares[9, 5] = SquareKind.TL;
Squares[13, 1] = SquareKind.DW;
Squares[12, 2] = SquareKind.DW;
Squares[11, 3] = SquareKind.DW;
Squares[10, 4] = SquareKind.DW;
Squares[14, 3] = SquareKind.DL;
Squares[11, 0] = SquareKind.DL;
Squares[12, 6] = SquareKind.DL;
Squares[8, 2] = SquareKind.DL;
Squares[8, 6] = SquareKind.DL;
Squares[7, 0] = SquareKind.TW;
Squares[0, 7] = SquareKind.TW;
Squares[14, 7] = SquareKind.TW;
Squares[7, 14] = SquareKind.TW;
Squares[3, 7] = SquareKind.DL;
Squares[7, 3] = SquareKind.DL;
Squares[7, 11] = SquareKind.DL;
Squares[11, 7] = SquareKind.DL;
Squares[StartPos.row, StartPos.col] = SquareKind.Start;
}
}
Scrabble.razor
@page "/scrabble"
@Init()
<table class="scrabble-board">
<tbody>
@for (int i = 0; i < 15; i++)
{
<tr>
@for (int j = 0; j < 15; j++)
{
var (row, col) = (i, j); // Must store i, j here as row, col for callback with parameter using i and j
<td class="scrabble-board"
style="background-color: @squareColors[row, col]"
@onclick="@(() => SquareOnClick(row, col))" />
}
</tr>
}
</tbody>
</table>
Scrabble.razor.cs
public partial class Scrabble
{
string[,] squareColors = new string[Board.SIZE, Board.SIZE];
readonly Dictionary<Board.SquareKind, string> colors = new Dictionary<Board.SquareKind, string>
{
[Board.SquareKind.White] = "#DDE0DE",
[Board.SquareKind.DL] = "#87D7F6",
[Board.SquareKind.TL] = "#25A9DC",
[Board.SquareKind.DW] = "#F68787",
[Board.SquareKind.TW] = "#DB1B1B",
[Board.SquareKind.Start] = "#25DC88"
};
Board board = new Board();
string Init() // Method returns a null string to be able to run directly on the Blazor page without compiling error
{
for (int i = 0; i < Board.SIZE; i++)
for (int j = 0; j < Board.SIZE; j++)
{
var kind = board.Squares[i, j];
squareColors[i, j] =colors[kind];
}
return null;
}
void SquareOnClick(int row, int col)
{
Console.Write("(before) {0} ", squareColors[0, 0]);
squareColors[0, 0] = squareColors[row, col];
Console.WriteLine("(after) {0}", squareColors[0, 0]);
}
}
为了更美观，我还使用了以下CSS样式（在wwwroot/index.html中引用）
.scrabble-board table {
width: 100%;
padding-top: 100%
}
.scrabble-board td {
border: 1px solid black;
border-radius: 5px;
width: 50px;
height: 50px;
background-size: contain;
}