MVC应用如何让主视图与模态框共用嵌套JSON数据源？

针对你用JSON作为唯一数据源、需动态展示嵌套第3层详情的需求，以下是完全通用的实现方案，无需依赖固定ID或静态节点访问：

核心思路 #

由于JSON结构动态，无法通过强类型模型或固定键名定位数据，核心方案是：

• 表格渲染时，将每行对应的完整嵌套JSON对象序列化为字符串，存储在HTML元素的自定义属性中
• 点击表格行时，取出该JSON字符串并解析，通过递归遍历定位到第3层数据
• 动态生成模态框内容并展示

具体实现步骤 #

1. 控制器层（无需修改核心逻辑，确保返回完整模型） #

保持现有读取JSON的逻辑，若JSON结构完全动态，可直接返回JArray或dynamic类型：

public ActionResult Index()
{
    var jsonPath = Server.MapPath("~/App_Data/your-data.json");
    var jsonContent = System.IO.File.ReadAllText(jsonPath);
    // 用JArray适配完全动态的JSON结构
    var model = JsonConvert.DeserializeObject<JArray>(jsonContent);
    return View(model);
}

2. 视图层：渲染表格并绑定完整JSON数据 #

在Razor视图中，为每行表格元素添加自定义属性存储完整JSON，同时渲染基础信息：

<table class="table table-hover" id="data-table">
    <thead>
        <tr>
            <th>基础字段1</th>
            <th>基础字段2</th>
        </tr>
    </thead>
    <tbody>
        @foreach (JObject item in Model)
        {
            <!-- 用Html.Raw避免JSON字符串被Razor转义 -->
            <tr data-full-json='@Html.Raw(JsonConvert.SerializeObject(item))'>
                <td>@item["basicField1"]</td>
                <td>@item["basicField2"]</td>
            </tr>
        }
    </tbody>
</table>

<!-- Bootstrap模态框模板 -->
<div class="modal fade" id="detail-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">详情信息</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body" id="detail-container">
                <!-- 动态内容将插入此处 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

3. JavaScript：处理点击事件并动态渲染详情 #

编写通用的递归遍历函数定位第3层数据，然后生成模态框内容：

$(document).ready(function() {
    // 绑定表格行点击事件
    $('#data-table tbody tr').click(function() {
        // 取出当前行的完整JSON数据
        const rawJson = $(this).data('full-json');
        const item = JSON.parse(rawJson);

        // 递归遍历获取第3层数据（根为0层，直接子节点为1层，以此类推）
        function getTargetLevelData(obj, targetLevel) {
            const result = {};
            function traverse(currentObj, currentLevel) {
                if (currentLevel === targetLevel) {
                    Object.assign(result, currentObj);
                    return;
                }
                // 遍历所有子节点，跳过非对象类型
                for (const key in currentObj) {
                    if (typeof currentObj[key] === 'object' && currentObj[key] !== null) {
                        traverse(currentObj[key], currentLevel + 1);
                    }
                }
            }
            traverse(obj, 0);
            return result;
        }

        // 获取第3层的所有数据
        const detailData = getTargetLevelData(item, 3);

        // 动态生成详情HTML
        let contentHtml = '<div class="row g-3">';
        for (const [key, value] of Object.entries(detailData)) {
            contentHtml += `
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title">${key}</h6>
                            <p class="card-text">${value}</p>
                        </div>
                    </div>
                </div>
            `;
        }
        contentHtml += '</div>';

        // 插入模态框并展示
        $('#detail-container').html(contentHtml);
        $('#detail-modal').modal('show');
    });
});

关键细节说明 #

• 无ID依赖：通过存储完整JSON对象，完全避免了对固定ID字段的需求，适配任何动态JSON结构
• 通用层级定位：递归遍历函数不依赖固定键名，只要层级符合即可提取数据，可通过修改targetLevel参数调整目标层级
• 性能适配：对于小型JSON数据源，直接存储完整JSON到HTML属性的开销可忽略；若数据量较大，可考虑仅存储到第3层的路径标识，但此方案已满足简易应用需求
• 兼容性：原生JSON.parse和Bootstrap模态框的组合无需额外依赖，确保兼容性

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