Динамическое добавление панели аккордеона (C#)

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

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

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

Обзор

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

Шаги

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

AccordionPane ap1 = 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">
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>

Единственным отсутствующим элементом является сам Аккордеон, который зависит от наличия элемента управления 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>

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