AJAX加载PartialView时页面整体刷新问题求助

1. 修正链接默认跳转行为 #

避免使用直接指向路由的普通<a>标签，改用带自定义属性的链接，防止触发页面刷新：

<table>
    <thead>
        <tr><th>股票代码</th></tr>
    </thead>
    <tbody>
        @foreach(var item in Model.StockList)
        {
            <tr>
                <td>
                    <a href="#" data-symbol="@item.Symbol" class="stock-link">@item.Symbol</a>
                </td>
            </tr>
        }
    </tbody>
</table>
<div id="researchDiv">
    @Html.Partial("_TradingViewPartial", Model.DefaultSymbol)
</div>

2. 编写AJAX更新逻辑 #

在页面底部添加脚本，绑定点击事件并阻止默认跳转，通过AJAX请求刷新PartialView：

$(document).ready(function() {
    $('.stock-link').on('click', function(e) {
        e.preventDefault(); // 阻止页面跳转
        var targetSymbol = $(this).data('symbol');
        
        $.ajax({
            url: '@Url.Action("LoadTradingView", "YourController")', // 替换为你的控制器/动作
            type: 'GET',
            data: { symbol: targetSymbol },
            success: function(html) {
                $('#researchDiv').html(html);
                // 重新初始化TradingView图表
                refreshTradingView(targetSymbol);
            },
            error: function(err) {
                console.error('PartialView加载失败:', err);
            }
        });
    });
});

3. 控制器返回正确的PartialView #

确保动作方法仅返回PartialView（不带布局页）：

public ActionResult LoadTradingView(string symbol)
{
    var chartModel = YourDataService.GetChartData(symbol);
    return PartialView("_TradingViewPartial", chartModel);
}

4. 重新渲染TradingView图表 #

替换DOM后需重新初始化图表，避免旧实例残留：

<!-- _TradingViewPartial.cshtml 内容 -->
<div id="tv-chart-container"></div>

<script>
function refreshTradingView(symbol) {
    // 销毁已有图表实例
    if (window.tvChartInstance) {
        window.tvChartInstance.remove();
    }
    // 初始化新图表
    window.tvChartInstance = new TradingView.widget({
        container_id: 'tv-chart-container',
        symbol: symbol,
        // 其他图表配置项
    });
}

// 首次加载初始化
refreshTradingView('@Model.Symbol');
</script>

排查要点 #

• 确认web.config中UnobtrusiveJavaScriptEnabled配置未被页面级设置覆盖
• 通过浏览器Network标签检查AJAX请求的URL和返回状态
• 确保PartialView中无完整HTML结构（如<html>/<body>），仅保留图表相关DOM
• 验证TradingView初始化函数在AJAX回调中可被正确调用

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