ASP.NET Core MVC页面二维数组/JSON数据传递至控制器问题

核心问题 #

ASP.NET Core MVC默认模型绑定对**多维数组（int[,]）**支持有限，当前表单字段的命名方式无法被正确解析，导致控制器接收不到值。以下是分步修复方案：

1. 模型优化（可选但推荐） #

保留原有多维数组和Json转换属性，新增同步方法确保数据一致性：

public class Tutor
{
    public const int ROW_Free_time = 30;
    public const int COL_Free_time = 7;

    [NotMapped]
    public int[,] Free_time { get; set; } = new int[COL_Free_time, ROW_Free_time];

    // 用于表单提交的Json字段
    public string Free_timeJson { get; set; }

    // 同步Json字符串与多维数组
    public void SyncFreeTime()
    {
        if (!string.IsNullOrEmpty(Free_timeJson))
        {
            Free_time = JsonConvert.DeserializeObject<int[,]>(Free_timeJson);
        }
        else
        {
            Free_timeJson = JsonConvert.SerializeObject(Free_time);
        }
    }
}

2. 页面代码调整 #

2.1 添加全局Json存储字段 #

在表单内新增一个隐藏字段，用于存储整个二维数组的Json字符串：

<!-- 放在表单最外层，存储全局二维数组的Json -->
<input type="hidden" id="freeTimeJson" name="Free_timeJson" value="@Model.Free_timeJson" />

2.2 修改表格按钮结构 #

移除原有无效的FreeTime[@j,@i]隐藏字段，给按钮添加行列索引的data-*属性：

<td>
    <input type="button" 
           name="buttonValue" 
           onclick="changeColor(this)" 
           class="centered-button" 
           style="background-color: @color"
           data-row="@j" 
           data-col="@i" />
</td>

3. JavaScript逻辑重构 #

3.1 初始化全局二维数组 #

页面加载时，从模型的Json字段初始化全局数组，同时恢复按钮颜色状态：

// 全局二维数组，存储所有按钮对应的值
let freeTimeArray = @Html.Raw(Model.Free_timeJson);

// 页面加载时恢复按钮颜色
document.querySelectorAll('.centered-button').forEach(btn => {
    const row = parseInt(btn.dataset.row);
    const col = parseInt(btn.dataset.col);
    const value = freeTimeArray[row][col];
    let color = '';
    switch(value) {
        case 0: color = 'red'; break;
        case 1: color = 'green'; break;
        case 2: color = 'orange'; break;
    }
    btn.style.backgroundColor = color;
});

3.2 重写changeColor函数 #

点击按钮时更新全局数组，并同步到隐藏字段：

function changeColor(button) {
    const radioButton = document.querySelector('input[name="radioValue"]:checked');
    if (!radioButton) return;

    const selectedValue = parseInt(radioButton.value);
    const selectedColor = radioButton.parentElement.style.color;
    
    // 更新按钮颜色
    button.style.backgroundColor = selectedColor;
    
    // 获取按钮对应的行列索引
    const row = parseInt(button.dataset.row);
    const col = parseInt(button.dataset.col);
    
    // 更新全局数组
    freeTimeArray[row][col] = selectedValue;
    
    // 序列化数组到隐藏字段
    document.getElementById('freeTimeJson').value = JSON.stringify(freeTimeArray);
}

3.3 移除无效函数 #

删除逻辑有误的changeRadioButtonColor函数，单选按钮无需额外点击事件。

4. 控制器代码调整 #

直接接收Tutor模型，同步Json数据后保存到数据库：

public async Task<IActionResult> AccountEditTutor(Tutor tutor)
{
    if (ModelState.IsValid)
    {
        // 同步Json字符串到多维数组
        tutor.SyncFreeTime();
        
        // 执行数据库保存操作
        // _context.Tutors.Update(tutor);
        // await _context.SaveChangesAsync();
        
        return RedirectToAction("YourSuccessAction");
    }
    return View(tutor);
}

关键说明 #

• 多维数组int[,]的Json序列化格式与交错数组不同，确保JS数组索引顺序与C#多维数组一致（当前模型为[列数,行数]结构）。
• 采用全局数组+Json序列化的方式，避开模型绑定对多维数组的兼容性问题，实现更简洁可靠的数据传递。

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