动态Bootstrap Accordion在show中加载

时间:2014-11-11 23:35:07

标签: asp.net twitter-bootstrap webforms

我有一个从代码后面动态生成的bootstrap手风琴。它在page_init期间加载。一切正常,除非它们都已打开('显示')未关闭('隐藏')。

如果我使用生成的标记并运行它,它可以正常工作,所以html没问题。有什么想法吗?

由于

==============编辑============

此脚本解决了问题

Private Sub SectionClose()
    Try
        Dim SB As New StringBuilder
        SB.Append("$(document).ready(function(){")
        SB.Append(" $('#accordion').accordion({ collapsible: true, active: false }); ")
        SB.Append("$('.selector').accordion(); ")
        SB.Append("}); ")
        ScriptManager.RegisterStartupScript(Me, Me.GetType(), "ShowCollapse", SB.ToString, True)
    Catch ex As Exception
        Dim vError As New SendError
        vError.MailError("214", PageName, ex)
    End Try
End Sub

它现在完美无缺,但抛出一个对象并不支持属性或方法'手风琴'

这就是生成的标记看起来像

 <div class="panel panel-default">
    <div class="panel-heading">Current Board Members</div>
    <!-- Start of Dynamic elements -->
    <div id="MainContent_ContactBoardMembers" class="panel-body">

        <div class="panel-group" id="accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse_1">John Doe - Treasurer</a></h4>
                </div>
                <div id="collapse_1" class="panel-collapse collapse">
                    <div class="panel-body"></div>
                </div>
                <div class="panel-heading">
                    <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse_2">John Smith - President</a></h4>
                </div>
                <div id="collapse_2" class="panel-collapse collapse">
                    <div class="panel-body"></div>
                </div>
                <div class="panel-heading">
                    <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse_3">Bill Mathews - Director at large</a></h4>
                </div>
                <div id="collapse_3" class="panel-collapse collapse">
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- End of Dynamic elements -->
</div>

编辑 - 添加以显示如何从后面的代码创建手风琴

 Dim i As Integer = 0
            For Each Row As DataRow In DT.Rows
                i = Row("Member_ID")
                Dim MemberName As String = ""
                MemberName += vFunction.ReturnText(Row("First_Name"))
                MemberName += " " & vFunction.ReturnText(Row("Surname"))
                MemberName += " - " & vFunction.ReturnText(Row("Position"))
                Dim PanelHeading As New HtmlGenericControl("div")
                With PanelHeading
                    .Attributes.Add("class", "panel-heading")
                End With
                Dim H4 As New HtmlGenericControl("h4")
                With H4
                    .Attributes.Add("class", "panel-title")
                End With
                PanelHeading.Controls.Add(H4)
                Dim aData As New HtmlGenericControl("a")
                With aData
                    .Attributes.Add("class", "accordion-toggle collapsed")
                    .Attributes.Add("data-toggle", "collapse")
                    .Attributes.Add("data-parent", "#accordion")
                    .Attributes.Add("href", "#collapse_" & i)
                    ' .Attributes.Add("data-target", "#collapse_" & i)
                    .InnerHtml = MemberName
                End With


                H4.Controls.Add(aData)

1 个答案:

答案 0 :(得分:1)

我注意到'解决方案'(添加脚本)没有帮助,当我向页面添加jquery.ui时(由于某种原因它在捆绑中没有工作)错误发生了,但问题是仍然存在 - 我注意到每次手风琴都出现javascript错误,所以我在主页中一次禁用一个脚本。

NavBar是动态构建的,并且根据它的大小来加载脚本以更改@media - 一旦我改变了.collapse到.navbar-collapse所有工作: - )