Динамическое добавление области аккордеона (VB)

Кристиан Венц

Скачать в формате PDF

Элемент управления "Аккордеон" в наборе средств управления AJAX предоставляет несколько панелей и позволяет пользователю одновременно отображать один из них. Панели обычно объявляются внутри самой страницы, но серверный код можно использовать для достижения того же результата.

Обзор

Элемент управления "Аккордеон" в наборе средств управления AJAX предоставляет несколько панелей и позволяет пользователю одновременно отображать один из них. Панели обычно объявляются внутри самой страницы, но серверный код можно использовать для достижения того же результата.

Шаги

Элемент управления "Аккордеон" предоставляет все важные свойства для кода на стороне сервера. Помимо прочего, Panes свойство предоставляет доступ к коллекции панелей, составляющих Аккордеон. Каждая панель имеет тип AccordionPane. Таким образом, создать такую панель не составляет труда.

Dim ap1 As New AccordionPane()

Свойство HeaderContainerAccordionPane предоставляет доступ к элементам управления ASP.NET в разделе заголовка области; ContentContainerAccordionPane свойство выполняет то же самое для раздела содержимого панели. Это позволяет коду ASP.NET добавлять содержимое в панели.

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

Наконец, панели необходимо добавить в Panes коллекцию элемента "Accordion".

acc1.Panes.Add(ap1)

Ниже приведен полный серверный код, который добавляет две панели в элемент управления Accordion:

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

Единственным отсутствующим элементом является сам Аккордеон, который зависит от наличия элемента управления ASP.NET ScriptManager :

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

Чтобы завершить пример, два класса CSS, на которые ссылается элемент управления Accordion, предоставляют сведения о стиле браузера:

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

Данные в аккордеоне были динамически добавлены серверным кодом (щелкните, чтобы просмотреть изображение полного размера)