Postanowiłem pobrać nową wersję AJAX Control Toolkit aby dołożyć je do mojej pracy magisterskiej i przetestować przy okazji. Instalacja przebiega bezstresowo. Dopiero po odpaleniu projektu, który został stworzony przy użyciu szablonu AJAX Control Toolkit Web Site w Visual Studio 2005, okazuje się, że nowe elementy nie są dla nas dostępne.

Prostym wyjściem jest skopiowanie nowej wersji pliku AjaxControlToolkit.dll do katalogu /Bin w naszym projekcie. Ten plik możemy znaleźć w katalogu w którym domyślnie zapisywane są wszystkie projekty Visual Studio 2005. U mnie jest to standardowo My Documents/Visual Studio 2005/Templates/Project Templates/Visual C#/ . Następnie ze znajdującego się tam archiwum AjaxControlExtenderProjectCS.zip wypakowujemy plik AjaxControlToolkit.dll do katalogu /Bin w naszym projekcie.

Prościej jest utworzyć nowy projekt, po instalacji nowej wersji AJAX Control Toolkit, a potem zastąpienie pliku .dll w naszym projekcie plikiem .dll z nowego projektu.

Owocnej pracy

Dziękuję za uwagę

W zestawie Control Toolkit pojawiły się 4 nowe kontrolki.

AutoComplete, Calendar, MaskedEdit oraz TabContainer

Najciekawsza dla mnie to TabContainer. Muszę jednak zobaczyć co dokładnie potrafi.

Pierwszy krok to stworzenie Accordiona na którym będziemy się opierać.

<ajaxToolkit:Accordion runat="server" ID="mojAccordion">
<Panes>
<ajaxToolkit:AccordionPane runat="server">
<Header>Nagłówek 1</Header>
<Content>Zawartość 1</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane runat="server">
<Header>Nagłówek 2</Header>
<Content>Zawartość 2</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane runat="server">
<Header>Nagłówek 3</Header>
<Content>Zawartość 3</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

Teraz możemy zabrać się za formatowanie naszego obiektu. Pierwsze co możemy dodać to SelectedIndex , właściwość ta określa który z naszych paneli będzie wyświetlany domyślnie podczas ładowania strony.

Następnie żeby nasze panele nie wyglądały tak sucho możemy przypisać im klasy CSS. Możemy to zrobić dla całego Accordion lub dla osobnych paneli. Przypisuje się je wartościom HeaderCssClass (dla nagłówków paneli) oraz ContentCssClass (dla zawartości paneli).

<ajaxToolkit:Accordion runat="server" ID="mojAccordion"
SelectedIndex="2" ContentCssClass="zawartoscCSS">
<Panes>
<ajaxToolkit:AccordionPane runat="server" HeaderCssClass="naglowekCSS1">
<Header>Nagłówek 1</Header>
<Content>Zawartość 1</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane runat="server" HeaderCssClass="naglowekCSS2">
<Header>Nagłówek 2</Header>
<Content>Zawartość 2</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane runat="server" HeaderCssClass="naglowekCSS3">
<Header>Nagłówek 3</Header>
<Content>Zawartość 3</Content>
</ajaxToolkit:AccordionPane>

A tak wyglądają klasy CSS dla powyższego kodu.

<style type="text/css">
.naglowekCSS1 { color : red ; font-size : large ; background-color : black}
.naglowekCSS2 {color : gold; font-size : large}
.naglowekCSS3 {color : green; font-size : large}
.zawartoscCSS { color : blue ; font-size : small ; background-color : grey}
</style>

Kolejny element do ustawienia to AutoSize odpowiadający za rozwijanie naszych paneli. Ustawienie wartości None spowoduje, że panele będą się rozwijać bez ograniczeń co może wpłynąć na ułożenie innych elementów na stronie. Wartość Limit zezwala na rozwijanie do określonego rozmiaru ustawianego przez parametr Height, w wypadku gdy zawartość panelu nie zmieści się będzie można ją przewijać. Ostatnia możliwość to Fill, ustalona wartość Height powoduje rozciąganie Accordiona i wymusza stały rozmiar tego elementu.

FadeTransition odpowiada za efekt wygaszania podczas przejścia pomiędzy panelami, jeśli ustawiona jest wartość false wykonywane są standardowe przełączenia pomiędzy panelami. Dwie kolejne właściwości odpowiadają za czas animacji podczas przełączania paneli oraz ilość klatek na sekundę, TransitionDuration i FramesPerSecond.

<ajaxToolkit:Accordion runat="server" ID="mojAccordion"
SelectedIndex="2" ContentCssClass="zawartoscCSS" AutoSize="None"
FadeTransitions="true" TransitionDuration="2000" FramesPerSecond="35">

Po odpowiednim ustawieniu wszystkich parametrów będziemy mieli śliczny Accordion. Najłatwiej da się zaobserwować efekty przejść pomiędzy panelami jeśli zawartość paneli jest dosyć spora. Może to być kilka, kilkanaście linijek tekstu albo jakiś plik graficzny.

Miłego korzystania i owocnej pracy.

Pełny kod do artykułu można pobrać tutaj.
Był tutaj kod do tego artykułu ale niestety zaginął w odmętach internetu.

Pokój

Pisząc swoją pracę magisterską natknąłem się na bug (oczywiście nie jestem jedynym, który to odkrył) w zbiorze komponentów AJAX Control Toolkit. W wypadku gdy w umieścimy jakieś obiekty (najprostszy przykład to obiekt Button) posiadające eventy to niestety po kompilacji strony te eventy nie zostaną wykonane.
Podam przykład, który ułatwi zrozumienie. Oto kod przykładowej strony posiadającej Accordion z dwoma panelami, jeden z paneli posiada przycisk uruchamiający kod (czyli event), drugi zawiera tylko zwykły tekst. Kolorem wyróżniłem panel który będzie nas interesował.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



Nagłówek testowy 1


A to jest testowa zawartość numer 1


OnClick="Button1_Click" Text="Button" />




Nagłówek testowy 2


A to natomiast jest testowa zawartość numer 2

W pierwszym panelu umieszczony jest przycisk do którego podpięty jest kod zmieniający zawartość tekstową obiektu Label. Bardzo prosty kod. Wklejam tutaj całość pliku, kolorem zaznaczam interesujący nas kod eventu podpiętego do przycisku.

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "Panel odświeżony o " + DateTime.Now.ToString();
}
}

Wszystko wygląda w porządku i jest poprawnie napisane, gdyby identyczne obiekty znajdowały się poza panelem Accordionu nie byłoby żadnych problemów. Aby to zadziałało potrzebna jest malutka sztuczka. Należy dodać do funkcji Page_Init() kod, który programowo doda do panelu Accordiona (oczywiście tego w którym posiadamy obiekty z nie uruchamiającymi się eventami) obiekt HiddenField. Dziwne. Ja nie widzę związku pomiędzy tym a działaniem eventów. To jest jednak nieważne , liczy się efekt ponieważ po dokonaniu tego wszystko działa bez zarzutu.

A więc jeśli jeszcze nie posiadamy tworzymy funkcję Page_Init().

void Page_Init()
{
}

Musimy teraz dostać się do kolekcji paneli Accordion. Robimy to w ten sposób:

void Page_Init()
{
AjaxControlToolkit.AccordionPane pane1 = Moje.Panes[0];
}

Następnym krokiem jest stworzenie obiektu HiddenField oraz dodanie go do istniejącego panelu.

void Page_Init()
{
AjaxControlToolkit.AccordionPane pane1 = Moje.Panes[0];

HiddenField hfield = new HiddenField();
pane1.ContentContainer.Controls.Add(hfield);
}

Po tym zabiegu działa bez zarzutu. Od kilku dni dostępna jest nowa wersja AJAX Control Toolkit ale w changelogu nie zauważyłem poprawki tego błędu, może przeoczyłem to. W każdym razie rozwiązanie jest…i jest proste.

Pełny kod do artykułu można pobrać tutaj.

Dziękuje.