如何在.NET Core中使用.load方法加载多页面并解决加载异常

Hey there! Let's walk through fixing your .load issue first, then address your concerns about resource usage.

为什么你的.load代码会出现内容闪烁/消失？ #

最常见的原因是没有阻止菜单链接的默认跳转行为。比如你用<a>标签做菜单项，点击时浏览器会默认跳转到href指定的页面，这就导致刚通过.load加载的内容瞬间被页面刷新冲掉，看起来就是闪烁一下就没了。

正确的实现代码 #

假设你的菜单是带.menu-item类的<a>标签，目标容器是#content-container，可以这样写：

$(document).ready(function() {
  // 绑定菜单点击事件
  $('.menu-item').on('click', function(e) {
    // 必须阻止链接的默认跳转行为
    e.preventDefault();
    
    // 获取要加载的页面URL
    const targetPage = $(this).attr('href');
    
    // 加载内容到指定容器
    $('#content-container').load(targetPage, function(response, status, xhr) {
      // 可选：处理加载错误的情况
      if (status === 'error') {
        $('#content-container').html(`加载失败: ${xhr.status} ${xhr.statusText}`);
      }
    });
  });
});

.NET Core端的关键注意事项 #

确保你加载的是部分视图（Partial View），而不是带完整布局的页面。如果加载完整页面，会把<html>、<body>等标签一起塞进目标div，导致页面结构混乱，也可能引发显示异常。

如果没法改成部分视图，也可以指定只加载目标页面中的某个元素，比如只加载页面里的#main-content区域：

$('#content-container').load(`${targetPage} #main-content`);

关于.load方法的资源占用疑问 #

.load本质是jQuery封装的AJAX GET请求，本身并不会过度占用资源，和普通AJAX请求的消耗差不多。但你可以通过以下方式优化：

• 启用缓存：如果页面内容不频繁更新，开启缓存减少重复请求：

  $.ajaxSetup({ cache: true });
  

  如果需要禁用缓存（比如内容实时更新），可以加时间戳参数：

  const targetPage = `${$(this).attr('href')}?t=${new Date().getTime()}`;
  

• 避免重复请求：在加载过程中禁用菜单按钮，防止用户多次点击触发多个请求：

  $('.menu-item').on('click', function(e) {
    e.preventDefault();
    const $menuItem = $(this);
    
    // 如果正在加载，直接返回
    if ($menuItem.hasClass('loading')) return;
    
    $menuItem.addClass('loading');
    const targetPage = $menuItem.attr('href');
    
    $('#content-container').load(targetPage, function() {
      // 加载完成后恢复按钮状态
      $menuItem.removeClass('loading');
    });
  });
  

• 精简返回内容：尽量用部分视图，只返回必要的HTML结构，减少数据传输量。

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