如何通过AJAX刷新Tab内容，切换Tab时无需重载整个页面？

当然可以实现！切换Tab时不重载整个页面、只更新对应Tab内容完全是AJAX的经典应用场景，我来帮你梳理正确的实现方式，结合你提供的代码一步步调整：

第一步：完善Tab的HTML结构 #

首先得确保每个Tab标签都有对应的内容面板，用来承载AJAX返回的内容。我给你补充了内容容器，同时给每个Tab标签加了data-tab-target属性，方便关联到对应的面板：

<div class="content">
  <div id="tabstrip">
    <ul>
      <li id="tabEdit" data-tab-target="tabEdit-content">@ResourceStrings.Text_ProblemDetails</li>
      <li id="tabItemsAffected" data-tab-target="tabItemsAffected-content">@ResourceStrings.Text_ItemsAffected</li>
      <li id="tabAttachments" data-tab-target="tabAttachments-content">@ResourceStrings.Text_Attachments</li>
      @if (ApplicationGlobals.SELECTED_COMPANY_CODE != CompanyCode.MONTREAL) {
        <li id="tabPlmReferences" data-tab-target="tabPlmReferences-content">@ResourceStrings.Text_PlmReferences</li>
      }
      <li id="tabDispositions" data-tab-target="tabDispositions-content">@dispositionsText</li>
      @if (ApplicationGlobals.SELECTED_COMPANY_CODE == CompanyCode.MONTREAL && (ApplicationGlobals.SELECTED_NCRBASE.NcrType != (int)NcrTypeEnum.NCRATTEST)) {
        <li id="tabReworkDetails" data-tab-target="tabReworkDetails-content">@ResourceStrings.Text_ReworkDetails</li>
      }
      <li id="tabLineClosure" data-tab-target="tabLineClosure-content">@ResourceStrings.Text_Line_Approval</li>
      <li id="tabTraceability" style="float:right" data-tab-target="tabTraceability-content">@ResourceStrings.Text_Traceability</li>
    </ul>
    <!-- 对应每个Tab的内容面板 -->
    <div id="tabEdit-content" class="tab-content"></div>
    <div id="tabItemsAffected-content" class="tab-content"></div>
    <div id="tabAttachments-content" class="tab-content"></div>
    @if (ApplicationGlobals.SELECTED_COMPANY_CODE != CompanyCode.MONTREAL) {
      <div id="tabPlmReferences-content" class="tab-content"></div>
    }
    <div id="tabDispositions-content" class="tab-content"></div>
    @if (ApplicationGlobals.SELECTED_COMPANY_CODE == CompanyCode.MONTREAL && (ApplicationGlobals.SELECTED_NCRBASE.NcrType != (int)NcrTypeEnum.NCRATTEST)) {
      <div id="tabReworkDetails-content" class="tab-content"></div>
    }
    <div id="tabLineClosure-content" class="tab-content"></div>
    <div id="tabTraceability-content" class="tab-content"></div>
  </div>
</div>

第二步：编写AJAX切换逻辑（修正你的原有代码） #

你的原有AJAX代码有几个小问题：比如用了同步请求（async: false）会阻塞页面，还有getSelected和panel('refresh')是旧版或者错误的API调用。我给你重写了符合jQuery UI Tabs规范的代码：

$(function() {
  // 初始化Tabs组件
  $('#tabstrip').tabs({
    // 当Tab切换激活时触发的事件
    activate: function(event, ui) {
      const activeTab = ui.newTab;
      const targetPanelId = activeTab.data('tab-target');
      const targetPanel = $('#' + targetPanelId);

      // 可选：如果已经加载过内容，就不再重复请求（需要每次刷新就去掉这个判断）
      if (targetPanel.data('loaded')) {
        return;
      }

      // 发起AJAX请求加载对应Tab的内容
      $.ajax({
        url: 'NcrLine/Reload',
        type: 'GET',
        // 把当前Tab的ID传给后端，让后端知道要返回哪个Tab的内容
        data: { tabId: activeTab.attr('id') },
        dataType: 'html', // 如果后端返回JSON就改成'json'，这里推荐返回HTML片段更方便渲染
        beforeSend: function() {
          // 加载中提示，提升用户体验
          targetPanel.html('<div class="loading">正在加载...</div>');
        },
        success: function(response) {
          // 把后端返回的内容填充到对应的面板里
          targetPanel.html(response);
          // 标记这个面板已经加载过内容
          targetPanel.data('loaded', true);
        },
        error: function() {
          // 加载失败的提示
          targetPanel.html('<div class="error">加载失败，请稍后重试</div>');
        }
      });
    },
    // 初始化页面时自动加载第一个Tab的内容
    create: function(event, ui) {
      const firstTab = $('#tabstrip ul li:first');
      const targetPanelId = firstTab.data('tab-target');
      const targetPanel = $('#' + targetPanelId);

      $.ajax({
        url: 'NcrLine/Reload',
        type: 'GET',
        data: { tabId: firstTab.attr('id') },
        dataType: 'html',
        beforeSend: function() {
          targetPanel.html('<div class="loading">正在加载...</div>');
        },
        success: function(response) {
          targetPanel.html(response);
          targetPanel.data('loaded', true);
        },
        error: function() {
          targetPanel.html('<div class="error">加载失败，请稍后重试</div>');
        }
      });
    }
  });
});

第三步：后端接口调整 #

你的NcrLine/Reload接口需要根据前端传递的tabId参数，返回对应Tab的内容。比如在ASP.NET MVC中，控制器方法可以这样写：

public ActionResult Reload(string tabId)
{
    switch(tabId)
    {
        case "tabEdit":
            // 获取问题详情数据，返回局部视图
            var problemData = GetProblemDetails();
            return PartialView("_ProblemDetails", problemData);
        case "tabItemsAffected":
            var itemsData = GetItemsAffected();
            return PartialView("_ItemsAffected", itemsData);
        // 其他Tab对应的处理逻辑，返回各自的局部视图
        case "tabAttachments":
            var attachmentsData = GetAttachments();
            return PartialView("_Attachments", attachmentsData);
        // ... 剩下的Tab同理
        default:
            return Content("无效的Tab标识");
    }
}

关键注意点 #

• 不要用同步AJAX（async: false），它会阻塞整个页面，影响用户体验，默认的异步请求就很好用。
• 如果需要每次切换Tab都刷新内容，就去掉if (targetPanel.data('loaded'))的判断逻辑。
• 后端返回HTML片段会比返回JSON更直接，减少前端的渲染工作量；如果需要复杂交互，再考虑返回JSON。

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