如何基于数据集渲染ASP.NET Core PartialView并实现无刷新行详情展示

1. 后端一次性加载全量数据到视图 #

在控制器中调用存储过程获取包含所有详情的模型列表，直接传递给主视图，避免重复调用耗时的存储过程：

public IActionResult Index()
{
    // 调用存储过程获取完整数据集，假设模型为RecordModel，列表类型为List<RecordModel>
    var allRecords = _dataRepository.GetAllRecordsFromStoredProcedure();
    return View(allRecords);
}

2. 主视图渲染列表 + 前端缓存全量数据 #

在Razor视图中渲染数据列表，同时将完整模型序列化为JSON字符串存在页面，让前端可以直接访问所有数据，无需再次请求数据库：

@model List<RecordModel>

<!-- 数据列表 -->
<table class="table">
    <thead>
        <tr>
            <th>记录ID</th>
            <th>标题</th>
            <!-- 其他需要展示的列表字段 -->
        </tr>
    </thead>
    <tbody>
        @foreach (var record in Model)
        {
            <tr class="record-row" data-record-id="@record.Id">
                <td>@record.Id</td>
                <td>@record.Title</td>
                <!-- 其他列表字段 -->
            </tr>
        }
    </tbody>
</table>

<!-- 详情展示容器 -->
<div id="detail-panel" style="display: none; margin-top: 20px;">
    <h4>记录详情</h4>
    <p>ID: <span id="detail-id"></span></p>
    <p>标题: <span id="detail-title"></span></p>
    <p>详情内容: <span id="detail-content"></span></p>
    <!-- 其他详情字段 -->
</div>

<script>
    // 将后端传递的模型序列化为JSON，存在前端变量中
    const allRecords = @Html.Raw(Json.Serialize(Model));
    
    // 给每行绑定点击事件
    document.querySelectorAll('.record-row').forEach(row => {
        row.addEventListener('click', function() {
            const targetId = parseInt(this.dataset.recordId);
            // 从前端缓存的数组中匹配对应记录
            const selectedRecord = allRecords.find(item => item.Id === targetId);
            
            if (selectedRecord) {
                // 填充详情面板
                document.getElementById('detail-id').textContent = selectedRecord.Id;
                document.getElementById('detail-title').textContent = selectedRecord.Title;
                document.getElementById('detail-content').textContent = selectedRecord.DetailContent;
                // 显示详情面板
                document.getElementById('detail-panel').style.display = 'block';
            }
        });
    });
</script>

3. 可选：复用PartialView作为详情模板 #

如果想复用已有的PartialView详情模板，可提前将所有记录的详情渲染为隐藏元素，点击时直接切换显示状态：

<!-- 在主视图中渲染所有隐藏的详情模板 -->
@foreach (var record in Model)
{
    <div id="detail-template-@record.Id" class="detail-template" style="display: none; margin-top: 20px;">
        @await Html.PartialAsync("_RecordDetailPartial", record)
    </div>
}

<script>
    document.querySelectorAll('.record-row').forEach(row => {
        row.addEventListener('click', function() {
            const targetId = this.dataset.recordId;
            // 隐藏所有详情模板
            document.querySelectorAll('.detail-template').forEach(tpl => tpl.style.display = 'none');
            // 显示当前选中的详情
            document.getElementById(`detail-template-${targetId}`).style.display = 'block';
        });
    });
</script>

注意事项 #

• 若数据集过大，序列化JSON会导致页面体积膨胀，此时需权衡是否采用分页加载（但会增加存储过程调用次数）；
• 确保模型属性无循环引用，避免Json.Serialize序列化失败。

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