Введение
Этот пост посвящён компоненту TabContainer из ASP.NET AJAX Control Toolkit.
Для тех, кто не знает: ASP.NET AJAX Control Toolkit — это библиотека, содержащая набор компонентов по работе с ASP.NET Ajax. Кроме прочих, существует такой замечательный компонент, как TabContainer. Он позволяет легко создавать клиентские вкладки на странице. Однако, не все осведомлены о многих возможностях, которые он предоставляет, а так же о «подводных камнях», с которыми можно столкнуться при работе с этим элементом.
Подготовка к работе
Чтобы наш TabContainer мог нормально функционировать, мы должны на нашей странице разместить один экземпляр класса ScriptManager. Этот серверный элемент организует работу серверной инфраструктуры ASP.NET Ajax, а так же во многих местах управляет клиентской частью. Это можно сделать, прописав в aspx-файле, отвечающему за нашу страницу, строчку:
<asp:ScriptManager ID="ScriptManager1" runat="server" /><br><br>* This source code was highlighted with Source Code Highlighter.
Кроме того, мы должны подключить сборку AjaxControlToolkit.dll и зарегистрировать её в странице:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><br><br>* This source code was highlighted with Source Code Highlighter.
Пример использования
Управлять элементом TabContainer очень просто. Давайте научимся это делать. Прежде всего, поместим компонент на нашу страницу:
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server"><br> </ajaxToolkit:TabContainer><br><br>* This source code was highlighted with Source Code Highlighter.
Как и у всех остальных серверных элементов, нужно не забывать указывать, что они серверные (runat=«server»).
Далее, давайте добавим пару вкладок в наш TabContainer:
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server"><br> <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="Panel1" runat="server"><br> </ajaxToolkit:TabPanel><br> <ajaxToolkit:TabPanel ID="TabPanel2" HeaderText="Panel2" runat="server"><br> </ajaxToolkit:TabPanel><br></ajaxToolkit:TabContainer><br><br>* This source code was highlighted with Source Code Highlighter.
У вкладок можно изменять заголовок и содержимое. Для формирования заголовка можно использовать либо HeaderText, как сделано в примере, либо включить его описание внутрь вкладки, заключив в теги <HeaderTemplate></HeaderTemplate>. Это может быть полезно, если, скажем, вы хотите разместить вместо обычного текста некоторое изображение. Теперь перейдём к описанию содержимого вкладки. Оно заключается в теги <ContentTemplate></ContentTemplate>. Давайте добавим в содержимое каждой вкладки по элементу Label:
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server"><br> <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="Panel1" runat="server"><br> <ContentTemplate><br> <asp:Label ID="Label1" Text="Hello 1" runat="server"/><br> </ContentTemplate><br> </ajaxToolkit:TabPanel><br> <ajaxToolkit:TabPanel ID="TabPanel2" HeaderText="Panel2" runat="server"><br> <ContentTemplate><br> <asp:Label ID="Label2" Text="Hello 2" runat="server"/><br> </ContentTemplate><br> </ajaxToolkit:TabPanel><br></ajaxToolkit:TabContainer><br><br>* This source code was highlighted with Source Code Highlighter.
Вот мы и получили простой пример использования TabContainer. Осталось только заполнить его нужным содержимым, подредактировать параметры и можно использовать на своей странице.
Свойства
Свойства TabContainer.
- ActiveTabChanged
Событие на стороне сервера, которое срабатывает при смене вкладки.
- OnClientActiveTabChanged
Событие на стороне клиента, которое срабатывает при смене вкладки. Тут нужно указать имя некоторой JavaScript-функции.
- CssClass
Css-класс, который отвечает за внешний вид вкладок.
- ActiveTabIndex
Номер активной вкладки. С помощью этого свойства можно менять активную вкладку, используя сторонние элементы.
- Height
Высота тела вкладки (высота заголовка не включается).
- Width
Ширина тела вкладки
- ScrollBars
Определяет отображение элемента ScrollBar. Возможные значения: None (отсутствие скроллбаров), Horizontal (горизонтальный скроллбар), Vertical (вертикальный скроллбар), Both (скроллбары в вертикальном и горизонтальном положении), Auto (автоматическое определение нужных скроллбаров).
- TabStripPlacement
Положение заглавий вкладок. Возможные значения: Top (вверху), Bottom (внизу).
- AutoPostBack
Нужно ли делать PostBack после смены вкладки.
Свойства TabPanel
- OnClientClick
Событие на стороне клиента, которое срабатывает при клике мышкой. Тут нужно указать имя некоторой JavaScript-функции.
- HeaderText, HeaderTemplate, ContentTemplate
Об этих свойствах уже было сказано выше. Они определяют содержимое заглавий вкладки и, непосредственно, её контента.
Подводные камни
Переименование элементов
Давайте создадим простой TabContainer с одной вкладкой и одним элементом Label:
<ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="Panel1" runat="server"><br> <ContentTemplate><br> <asp:Label ID="Label1" Text="Hello, world!" runat="server"/><br> </ContentTemplate><br> </ajaxToolkit:TabPanel><br> </ajaxToolkit:TabContainer><br><br>* This source code was highlighted with Source Code Highlighter.
А теперь посмотрим html-код получившейся страницы:
<div class="ajax__tab_xp" id="TabContainer1" style="visibility:hidden;"> <br> <div id="TabContainer1_header"> <br> <span id="TabContainer1_TabPanel1_tab"><span class="ajax__tab_outer"><span class="ajax__tab_inner"><span class="ajax__tab_tab" id="__tab_TabContainer1_TabPanel1">Panel1</span></span></span></span> <br> </div><div id="TabContainer1_body"> <br> <div id="TabContainer1_TabPanel1" class="ajax__tab_panel"> <br> <br> <span id="TabContainer1_TabPanel1_Label1">Hello, world!</span> <br> <br> </div> <br> </div> <br></div> <br><br>* This source code was highlighted with Source Code Highlighter.
Как мы видим, наш объект Label1 переименовался в TabContainer1_TabPanel1_Label1. Так произойдёт со всеми серверными объектами, которые попадут в TabContainer. Это очень неприятный момент, если у вас уже готовы JavaScript-ы, которые используют оригинальные имена объектов.
Есть много разных решений проблемы. Я опишу один, на мой взгляд самый простой. Если мы будем рассматривать наши объекты на стороне сервера, то увидим, что у них есть ID и ClientID. ID — это оригинальный ID, который используется для серверной части (в нашем случае Label1). ClientID используется на стороне клиента (в нашем случае TabContainer1_TabPanel1_Label1). Чтобы избежать многих проблем, можно заранее обойти все объекты, размещённые на странице, и сделать словарь вида (ID->ClientID). Далее при подключении любого JavaScript-сценария мы будем просматривать весь словарь и выполнять необходимые замены.
ActiveTabChanged
С этой проблемой сталкиваются очень многие из тех, кто только начинает осваивать TabContainer. Иногда нам необходимо использовать динамически подгружаемый контент на вкладках. Иными словами: пока вкладка не отображается — на ней может находиться что угодно. Но когда она становится активной — мы должны либо видоизменить, либо перезагрузить контент, который находится в ней. Конечно, приятнее это делать на стороне сервера. Но, если мы возьмём и просто используем событие ActiveTabChanged, то мы не получим ожидаемого результата: оно не будет срабатывать при смене вкладки. В чём же дело? А дело в том, что TabContainer по умолчанию не отправляет запрос на сервер при смене вкладки. Событие ActiveTabChanged сработает только при следующем PostBack'e. В нашем случае это не очень удобно. Но нам приходит на помощь свойство AutoPostBack. Если установить его в true, то наша проблема будет решена:
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" OnActiveTabChanged="TabContainer1_ActiveTabChanged" AutoPostBack="True"><br> <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="Panel1" runat="server"><br> </ajaxToolkit:TabPanel><br> <ajaxToolkit:TabPanel ID="TabPanel2" HeaderText="Panel2" runat="server"><br> </ajaxToolkit:TabPanel><br> </ajaxToolkit:TabContainer><br><br>* This source code was highlighted with Source Code Highlighter.
Цвет фона
Для красивого дизайна нашей страницы иногда бывает нужно изменить цвет фона. Но если вы просто поменяете BackColor у TabContainer — то вы не получите никакого результата. Цвет фона не поменяется. Наиболее удобным способом изменить цвет фона будет использование css:
<style type="text/css"><br> .TabContainerCss<br> {<br> color:Blue; /* Цвет текста */<br> background-color:Gray; /* Цвет фона */<br> }<br> </style><br><br> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" CssClass="TabContainerCss"><br> ...<br> </ajaxToolkit:TabContainer><br><br>* This source code was highlighted with Source Code Highlighter.
Ссылки
Официальный сайт ASP.NET Ajax
Пример использования TabContainer на официальном сайте
Проект «ASP.NET AJAX Control Toolkit» на Codeplex. Отсюда можно скачать саму библиотеку.