Dinamik olarak bir Accordion bölmesi ekleme (VB)Dynamically Adding An Accordion Pane (VB)

Hristia WENZ tarafındanby Christian Wenz

Kodu indirin veya PDF 'yi indirinDownload Code or Download PDF

AJAX denetim araç setinde bulunan Accordion denetimi birden çok bölme sağlar ve kullanıcının her seferinde birini görüntülemesini sağlar.The Accordion control in the AJAX Control Toolkit provides multiple panes and allows the user to display one of them at a time. Panolar genellikle sayfanın kendisi içinde bildirilmiştir, ancak aynı sonucu elde etmek için sunucu tarafı kod kullanılabilir.Panels are usually declared within the page itself, but server-side code can be used to achieve the same result.

Genel bakışOverview

AJAX denetim araç setinde bulunan Accordion denetimi birden çok bölme sağlar ve kullanıcının her seferinde birini görüntülemesini sağlar.The Accordion control in the AJAX Control Toolkit provides multiple panes and allows the user to display one of them at a time. Panolar genellikle sayfanın kendisi içinde bildirilmiştir, ancak aynı sonucu elde etmek için sunucu tarafı kod kullanılabilir.Panels are usually declared within the page itself, but server-side code can be used to achieve the same result.

AdımlarSteps

Accordion denetimi, tüm önemli özellikleri sunucu tarafı koduna sunar.The Accordion control exposes all important properties to server-side code. Diğer şeyler arasında Panes özelliği, Accordion oluşturan bölmeler koleksiyonuna erişim izni verir.Among other things, the Panes property grants access to the collection of panes that make up the Accordion. Her bölme AccordionPanetürü vardır.Every pane there is of type AccordionPane. Bu nedenle, böyle bir bölme oluşturmak bu kadar basit olur:It is therefore trivial to create such a pane:

Dim ap1 As New AccordionPane()

AccordionPane HeaderContainer özelliği, bölmenin üst bilgi bölümünde ASP.NET denetimlerine erişim sağlar; AccordionPane ContentContainer özelliği, bölmenin içerik bölümü için aynı.The HeaderContainer property of AccordionPane provides access to the ASP.NET controls within the header section of the pane; the ContentContainer property of AccordionPane does the same for the content section of the pane. Bu, ASP.NET kodunun bölmelere içerik eklemesine izin verir:This allows ASP.NET code to add content to the panes:

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

Son olarak, bölmeleri Accordion Panes koleksiyonuna eklenmelidir:Finally, the pane(s) must be added to the Panes collection of the Accordion:

acc1.Panes.Add(ap1)

Bir Accordion denetimine iki bölme ekleyen tam bir sunucu tarafı kodu aşağıda verilmiştir:Here is a complete server-side code that adds two panes to an Accordion control:

<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>

Yalnızca eksik olan öğe, ASP.NET ScriptManager denetiminin varlığına bağlı olan Accordion kendisidir:The only missing element is the Accordion itself, which depends on the presence of the ASP.NET ScriptManager control:

<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ğin, Accordion denetiminde başvurulan iki CSS sınıfı tarayıcıya yönelik stil bilgilerini sağlar:To finish the example, the two CSS classes referenced in the Accordion control provide style information for the browser:

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

Accordion içindeki veriler, sunucu tarafı kodu tarafından dinamik olarak eklendiThe data in the accordion was dynamically added by server-side code

Accordion içindeki veriler, sunucu tarafı kodu tarafından dinamik olarak eklendi (tam boyutlu görüntüyü görüntülemek Için tıklayın)The data in the accordion was dynamically added by server-side code (Click to view full-size image)