MVC Razor页面动态获取Model值遇RuntimeBinderException问题求助

在MVC Razor页面开发中，尝试通过JS动态索引获取Model中Dictionary<int, object>类型的conditionList元素时遇到错误，硬编码索引可正常运行，但使用JS变量i作为索引时抛出异常。

方案一：一次性序列化整个列表到客户端（推荐） #

将整个conditionList序列化为JS对象，之后直接在客户端用JS变量访问对应索引，无需每次单独序列化：

// 服务器端序列化整个列表到JS变量
var conditionList = @Html.Raw(JsonSerializer.Serialize(Model.conditionList));
// 客户端用动态索引i获取元素
var i = 2; // 你的动态索引值
var page1 = conditionList[i];
// 后续处理表格更新逻辑

方案二：AJAX动态请求单个元素（适合大数据量场景） #

如果数据量较大，不想一次性传输全部数据，可以通过AJAX从后端单独获取指定索引的元素：

后端添加Action #

public IActionResult GetCondition(int index)
{
    // 注意：这里需根据实际场景获取数据，比如从Session、数据库或当前Model中读取
    if (Model.conditionList.ContainsKey(index))
    {
        return Json(Model.conditionList[index]);
    }
    return NotFound();
}

前端JS请求 #

var i = 1; // 动态索引
fetch(`/YourControllerName/GetCondition?index=${i}`)
    .then(res => res.json())
    .then(data => {
        var page1 = data;
        // 执行表格更新操作
    })
    .catch(err => console.error('请求失败:', err));

错误原因说明 #

之前的写法错误在于混淆了服务器端Razor代码和客户端JS代码的执行时机：

• Razor代码在服务器端先执行，此时客户端的JS变量i还未存在，服务器会把"+ i +"或'+ i +'当成索引值本身，而非JS变量。
  • 第一种写法中，Model.conditionList["+ i +"]将字符串"+ i +"作为索引，但Dictionary<int, object>需要int类型索引，因此抛出RuntimeBinderException。
  • 第二种写法中，Model.conditionList['+ i +']里的单引号使'+ i +'被识别为字符字面量，但字符字面量只能包含单个字符，因此抛出"Too many characters in character literal"错误。
• 硬编码索引0时，服务器能直接识别为int类型索引，所以可以正常执行。

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