Dinamik olarak accordion bölmesi ekleme (C#)

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

AccordionPane ap1 = 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">
void Page_Load() 
{
 if (!Page.IsPostBack)
 {
 AccordionPane ap1 = new AccordionPane();
 ap1.HeaderContainer.Controls.Add(new LiteralControl("Using Markup"));
 ap1.ContentContainer.Controls.Add(new 
 LiteralControl("Adding panes using markup is really simple."));
 AccordionPane ap2 = 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);
 }
}
</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)

ÖncekiSonraki