ASP.NET Core MVC中如何在模态弹窗中加载查询数据？

核心问题在于：你当前用Razor的@foreach渲染表格，这部分代码是服务器端在页面首次加载时就执行的，无法等到点击按钮后再获取数据渲染。需要改成前端AJAX获取数据后动态生成表格内容，具体步骤如下：

步骤1：修改模态框表格结构 #

去掉tbody里的服务器端遍历代码，留空并给tbody设置ID，方便后续前端操作：

<div id="formModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_" style="background-color:transparent; color:aquamarine; border-style:none">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Assigned Studies</h4>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <form asp-action="Bind" asp-controller="Studies">
                                <div class="form-group">
                                    <table class="table table-hover" style="height: 300px">
                                        <thead>
                                            <tr class="position-sticky" style="color:aliceblue; background-color:#126E75">
                                                <th class="text-start">
                                                    Study
                                                </th>
                                            </tr>
                                        </thead>
                                        <!-- 留空tbody，通过AJAX动态填充 -->
                                        <tbody id="studyTableBody"></tbody>
                                    </table>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="button" id="btnClosePopup" value="Close" data-dismiss="modal" class="btn btn-danger" />
            </div>
        </div>
    </div>
</div>

步骤2：修改AJAX回调函数 #

原来的success逻辑错误（直接取res.Name，但res是数组），现在改为遍历返回的数据集，动态生成表格行并插入到tbody中：

getStudies = (url, id) => { 
    $.ajax({
        type: 'GET',
        url: url,
        data: {
            'id': id
        },
        success: function (res) {
            console.log(res);
            // 先清空tbody，避免重复加载数据
            const $tbody = $("#studyTableBody");
            $tbody.empty();
            
            // 遍历返回的结果数组，生成表格行
            res.forEach(item => {
                // 注意：JSON字段是小驼峰（对应C#属性的PascalCase自动转换）
                const row = `<tr class="table-light">
                                <td class="text-start">${item.studyName}</td>
                             </tr>`;
                $tbody.append(row);
            });
            
            // 显示模态框
            $("#formModal").modal('show');
        },
        failure: function (response) {
            alert(response.responseText);
        },
        error: function (response) {
            console.log(response);
            alert("error");
        }
    })
};

提示：如果控制台输出的JSON字段是大写开头（比如StudyName），就把item.studyName改成item.StudyName，以实际返回的字段名为准。

步骤3：验证控制器数据返回 #

你的控制器代码无需修改，它已经正确返回了序列化后的List<BundleNodeViewModel>数组。只需确保BundleNodeViewModel的StudyId和StudyName是public属性，保证序列化正常。

关键逻辑说明 #

• Razor的服务器端代码（@foreach）在页面加载时就执行，无法响应前端按钮点击事件，所以必须用前端JS动态渲染表格。
• AJAX获取数据后，通过DOM操作动态生成表格行，确保数据是点击按钮后最新的查询结果。

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