如何通过JavaScript编程创建Bootstrap手风琴？解决UpdatePanel回发失效问题

问题原因 #

UpdatePanel局部回发会替换容器内的DOM元素，而Bootstrap手风琴是基于初始DOM结构完成组件初始化的。回发后新生成的元素没有被重新初始化，导致手风琴功能丢失。

方法1：局部回发后重新初始化手风琴 #

利用ASP.NET的Sys.WebForms.PageRequestManager监听局部回发完成事件，在事件触发后重新初始化手风琴组件。

ASPX结构示例

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <div class="accordion" id="myAccordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="headingOne">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        项目1
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#myAccordion">
                    <div class="accordion-body">
                        内容1 - 局部回发后会被更新
                    </div>
                </div>
            </div>
        </div>
        <asp:Button ID="btnPostBack" runat="server" Text="触发局部回发" OnClick="btnPostBack_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

JavaScript代码

// 页面初始加载时初始化手风琴
document.addEventListener('DOMContentLoaded', function() {
    initAccordion();
});

// 监听UpdatePanel局部回发完成事件
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    initAccordion();
});

// 手风琴初始化函数
function initAccordion() {
    const accordionEl = document.getElementById('myAccordion');
    if (!accordionEl) return;

    // 销毁已存在的实例，避免重复初始化
    const existingAccordion = bootstrap.Accordion.getInstance(accordionEl);
    if (existingAccordion) {
        existingAccordion.dispose();
    }

    // 重新初始化手风琴
    new bootstrap.Accordion(accordionEl);
}

方法2：完全用JavaScript动态创建Bootstrap Accordion #

如果需要在局部回发后完全重建手风琴，可以编写函数动态生成DOM结构并初始化组件。

ASPX容器示例

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <div id="accordionContainer"></div>
        <asp:Button ID="btnDynamicPostBack" runat="server" Text="动态手风琴局部回发" OnClick="btnDynamicPostBack_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

JavaScript代码

// 动态创建手风琴的函数
function createAccordion() {
    const container = document.getElementById('accordionContainer');
    container.innerHTML = ''; // 清空容器

    // 创建手风琴主容器
    const accordionDiv = document.createElement('div');
    accordionDiv.className = 'accordion';
    accordionDiv.id = 'dynamicAccordion';

    // 创建第一个手风琴项
    const item1 = document.createElement('div');
    item1.className = 'accordion-item';

    const header1 = document.createElement('h2');
    header1.className = 'accordion-header';
    header1.id = 'dynamicHeadingOne';

    const btn1 = document.createElement('button');
    btn1.className = 'accordion-button';
    btn1.type = 'button';
    btn1.setAttribute('data-bs-toggle', 'collapse');
    btn1.setAttribute('data-bs-target', '#dynamicCollapseOne');
    btn1.setAttribute('aria-expanded', 'true');
    btn1.setAttribute('aria-controls', 'dynamicCollapseOne');
    btn1.textContent = '动态项目1';

    const collapse1 = document.createElement('div');
    collapse1.id = 'dynamicCollapseOne';
    collapse1.className = 'accordion-collapse collapse show';
    collapse1.setAttribute('aria-labelledby', 'dynamicHeadingOne');
    collapse1.setAttribute('data-bs-parent', '#dynamicAccordion');

    const body1 = document.createElement('div');
    body1.className = 'accordion-body';
    body1.textContent = '动态生成的内容1';

    // 组装元素
    collapse1.appendChild(body1);
    header1.appendChild(btn1);
    item1.appendChild(header1);
    item1.appendChild(collapse1);
    accordionDiv.appendChild(item1);

    // 添加到页面容器并初始化
    container.appendChild(accordionDiv);
    new bootstrap.Accordion(accordionDiv);
}

// 页面加载和局部回发后调用
document.addEventListener('DOMContentLoaded', function() {
    createAccordion();
});

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
    createAccordion();
});

注意事项 #

• 确保页面已引入Bootstrap的CSS、JS文件，以及ASP.NET的MicrosoftAjax.js（用于监听局部回发事件）
• 动态创建元素时需保证ID唯一性，避免DOM冲突
• 初始化前销毁旧实例，防止内存泄漏和重复绑定事件

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