ASP.NET Core 页面重载时保持手风琴选中状态的问题

一、先解决.accordion函数不存在的错误 #

.accordion()是jQuery UI专属方法，并非原生jQuery自带功能。你当前只引入了jQuery v3.6.0，所以会报错。分两种场景处理：

场景1：用Bootstrap手风琴（ASP.NET Core模板默认集成） #

如果你的手风琴是基于Bootstrap实现的，完全不需要调用.accordion()方法，Bootstrap靠data-bs-*属性和CSS类控制折叠/展开。

场景2：必须用jQuery UI手风琴 #

需要额外引入jQuery UI的CSS和JS文件（注意加载顺序：先加载jQuery，再加载jQuery UI）：

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

二、实现页面刷新后自动展开「Assessment Results」板块 #

核心思路是通过URL锚点传递状态，页面加载时根据锚点执行展开/折叠操作，以下是Bootstrap手风琴的完整实现方案：

1. 调整手风琴HTML结构（给目标板块加唯一ID） #

<div class="accordion" id="accEditRecord">
  <!-- 第一个手风琴项 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingFirst">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFirst" aria-expanded="true" aria-controls="collapseFirst">
        第一个板块
      </button>
    </h2>
    <div id="collapseFirst" class="accordion-collapse collapse show" aria-labelledby="headingFirst" data-bs-parent="#accEditRecord">
      <div class="accordion-body">...</div>
    </div>
  </div>

  <!-- Assessment Results板块 -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingAssessment">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAssessment" aria-expanded="false" aria-controls="collapseAssessment">
        Assessment Results
      </button>
    </h2>
    <div id="collapseAssessment" class="accordion-collapse collapse" aria-labelledby="headingAssessment" data-bs-parent="#accEditRecord">
      <div class="accordion-body">
        <!-- 添加评估按钮与模态框 -->
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addAssessmentModal">添加评估</button>
      </div>
    </div>
  </div>
</div>

2. 修改后端保存逻辑（跳转时带锚点） #

在保存评估的Action中，跳转回页面时追加锚点#collapseAssessment：

public IActionResult SaveAssessment(AssessmentViewModel model)
{
    // 执行保存数据的业务逻辑
    _assessmentService.Save(model);

    // 跳转回记录编辑页，并携带锚点
    return RedirectToAction("EditRecord", new { id = model.RecordId }) + "#collapseAssessment";
}

3. 前端页面加载时执行折叠/展开操作 #

用jQuery编写页面初始化逻辑：

$(function() {
    const targetHash = '#collapseAssessment';
    if (window.location.hash === targetHash) {
        // 关闭第一个手风琴项
        $('#collapseFirst').removeClass('show');
        $('#headingFirst .accordion-button').attr('aria-expanded', 'false').addClass('collapsed');
        
        // 展开Assessment Results项
        $('#collapseAssessment').addClass('show');
        $('#headingAssessment .accordion-button').attr('aria-expanded', 'true').removeClass('collapsed');
        
        // 可选：平滑滚动到目标板块
        $(targetHash).get(0).scrollIntoView({ behavior: 'smooth' });
    }
});

三、如果用jQuery UI手风琴的实现方式 #

初始化手风琴时，根据URL锚点设置默认展开项：

$(function() {
    // 初始化jQuery UI手风琴
    $("#accEditRecord").accordion({
        collapsible: true, // 允许全部折叠
        active: false // 默认全部折叠
    });

    // 根据锚点展开指定项
    const hash = window.location.hash;
    if (hash) {
        // 计算目标项的索引
        const targetIndex = $(hash).closest('.ui-accordion').find('.ui-accordion-content').index($(hash));
        $("#accEditRecord").accordion("option", "active", targetIndex);
    }
});

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