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

  • Статья

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

Загрузить PDF-файл

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

Общие сведения

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

Этапы

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

AccordionPane ap1 = new AccordionPane();

Свойство HeaderContainerAccordionPane объекта предоставляет доступ к элементам управления ASP.NET в разделе заголовка панели. ContentContainer Свойство AccordionPane объекта делает то же самое для раздела содержимого панели. Это позволяет 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>

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

Данные в аккордеоне были динамически добавлены серверным кодом

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

НазадВперед