Aracılığıyla paylaş

Dinamik Olarak Accordion Bölmesi Ekleme (VB)

  • Makale

Christian Wenz tarafından

PDF’yi İndir

AJAX Denetim Araç Seti'ndeki Accordion denetimi birden çok bölme sağlar ve kullanıcının bir kerede bunlardan birini görüntülemesine olanak tanır. Paneller genellikle sayfanın kendi içinde bildirilir, ancak aynı sonucu elde etmek için sunucu tarafı kodu kullanılabilir.

Genel Bakış

AJAX Denetim Araç Seti'ndeki Accordion denetimi birden çok bölme sağlar ve kullanıcının bir kerede bunlardan birini görüntülemesine olanak tanır. Paneller genellikle sayfanın kendi içinde bildirilir, ancak aynı sonucu elde etmek için sunucu tarafı kodu kullanılabilir.

Adımlar

Accordion denetimi tüm önemli özellikleri sunucu tarafı kodunda kullanıma sunar. Diğer şeylerin dışında, Panes özelliği Accordion'ı oluşturan bölme koleksiyonuna erişim verir. Her bölme türündedir AccordionPane. Bu nedenle böyle bir bölme oluşturmak basit bir işlemdir:

Dim ap1 As New AccordionPane()

özelliğiAccordionPane, HeaderContainer bölmenin üst bilgi bölümündeki ASP.NET denetimlerine erişim sağlar; ContentContainer özelliği AccordionPane bölmenin içerik bölümü için de aynı işlemi yapar. Bu, ASP.NET kodun bölmelere içerik eklemesine olanak tanır:

ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using code is really flexible."))

Son olarak, bölmeler Accordion koleksiyonuna Panes eklenmelidir:

acc1.Panes.Add(ap1)

Bir Accordion denetimine iki bölme ekleyen tam bir sunucu tarafı kodu aşağıdadır:

<script runat="server">
Sub Page_Load()
 If Not Page.IsPostBack Then
 Dim ap1 As New AccordionPane()
 ap1.HeaderContainer.Controls.Add(New LiteralControl("Using Markup"))
 ap1.ContentContainer.Controls.Add(New LiteralControl("Adding panes using markup is really simple."))
 Dim ap2 As New AccordionPane()
 ap2.HeaderContainer.Controls.Add(New LiteralControl("Using Code"))
 ap2.ContentContainer.Controls.Add(New LiteralControl("Adding panes using code is really flexible."))
 acc1.Panes.Add(ap1)
 acc1.Panes.Add(ap2)
 End If
End Sub
</script>

Tek eksik öğe, ASP.NET ScriptManager denetiminin varlığına bağlı olan Accordion'ın kendisidir:

<form id="form1" runat="server">
 <asp:ScriptManager ID="asm" runat="server" />
 <div>
 <ajaxToolkit:Accordion ID="acc1" runat="server" 
 HeaderCssClass="header" ContentCssClass="content" Width="300px" FadeTransitions="true">
 </ajaxToolkit:Accordion>
 </div>
</form>

Örneği tamamlamak için Accordion denetiminde başvuruda bulunılan iki CSS sınıfı tarayıcı için stil bilgileri sağlar:

<style type="text/css">
 .header {background-color: blue;}
 .content {border: solid;}
</style>

Akordeondaki veriler sunucu tarafı koduyla dinamik olarak eklendi

Akordeondaki veriler sunucu tarafı koduyla dinamik olarak eklendi (Tam boyutlu görüntüyü görüntülemek için tıklayın)

Önceki