• Artykuł

     

ASP.NET AJAX - Wprowadzenie do ASP.NET AJAX Control Toolkit  Udostępnij na: Facebook

Autor: Piotr Bubacz

Opublikowano: 2012-03-02

Przygotowanie efektownie wyglądającego, dynamicznego interfejsu strony internetowej zawsze kojarzyło się z poświęceniem dużej ilości cennego czasu. Jednakże, możemy go zaoszczędzić wykorzystując w tym celu bibliotekę AJAX Control Toolkit. Dzięki niej, w prosty sposób możemy dodać dynamiczne, nowoczesne elementy rozszerzające funkcjonalność strony internetowej. W tym samouczku, krok po kroku, sprawdzimy jej możliwości.

Przed wykonaniem zadań powinieneś wiedzieć:

  • jak tworzyć strony internetowe w ASP.NET.

Po wykonaniu zadań nauczysz się:

  • dodawać bibliotekę AJAX Control Toolkit do Visual Studio,
  • dodawać znak wodny do kontrolek,
  • filtrować wpisywane elementy przez użytkownika,
  • wyświetlać interaktywny kalendarz.

Implementacja

Twoim zadaniem będzie przygotowanie strony internetowej i rozszerzenie jej możliwości o kontrolki i rozszerzenia zawarte w pakiecie AJAX  Control Toolkit. Wynik zadania został przedstawiony na Rys. 1.

Rys.  1. Strona wykorzystująca możliwości AJAX Control Toolkit.

Rozszerzenie funkcjonalności kontrolek przy pomocy ASP.NET AJAX Control Toolkit

Twoim pierwszym zadaniem będzie dodanie ASP.NET AJAX Control Toolkit do Visual Studio.

  1. Dodaj ASP.NET AJAX Control Toolkit do Visual Studio:
  • na pasku zadań wybierz Tools -> ExtensionManager,
  • w lewym menu wybierz Online Gallery, następnie w oknie pośrodku zaznacz NuGet Package Manager i kliknij zainstaluj,
Informacja
Więcej informacji o NuGet znajdziesz w artykule NuGet – system dystrybucji bibliotek. 
  • po zainstalowaniu utwórz nową pustą stronę ASP.NET,
  • na pasku zadań wybierz Tools -> Library Package Manager -> Manage NuGet Packages …,
  • w kategorii Online wyszukaj AjaxControlToolkit i zainstaluj (Rys.  2.).

Rys.  2. Instalowanie AjaxControlToolkit poprzez NuGet.

  • jeżeli nie możesz go zainstalować przy wykorzystaniu NuGet, wejdź na stronę https://ajaxcontroltoolkit.codeplex.com/ i pobierz ostatnią wersję biblioteki w archiwum zip.,
  • rozpakuj archiwum na dysku w folderze C:\Program Files (x86)\Microsoft ASP.NET\,
  • przejdź do Visual Studio,
  • w oknie Toolbox kliknij prawym przyciskiem myszy i wybierz Add Tab. Nazwij AjaxControlToolkit,
  • kliknij prawym przyciskiem myszy na nowo dodaną zakładkę i wybierz Choose Items (Rys. 3.),

 

Rys. 3. Okno wyboru dodatkowych elementów na zakładce w Visual Studio.

  • kliknij Browse,
  • wskaż plik C:\Program Files (x86)\Microsoft ASP.NET\AjaxControlToolkit.Binary.NET4\AjaxControlToolkit.dll i kliknij Open,
  • następnie kliknij Ok,
  • powinna pojawić się w zakładce lista nowych kontrolek i rozszerzeń kontrolek (Rys. 4.)

Rys. 4. Lista dodanych kontrolek i rozszerzeń.

Informacja

Wybrane elementy ASP.NET AJAX Control Toolkit to:

  • TextBoxWatermark – rozszerza kontrolkę TextBox o możliwość wyświetlania znaku wodnego, gdy użytkownik nie wprowadził żadnej wartości,
  • FilteredTextBox – rozszerza możliwości kontrolki TextBox o zezwolenie na wprowadzania informacji zgodnie z określonym wzorcem,
  • Calendar – rozszerza możliwości kontrolki TextBox, wyświetlając kalendarz i przekazując wybraną datę do kontrolki.

Przygotowanie prostej strony internetowej

Przygotuj prostą stronę internetową umożliwiającą pobranie od użytkownika: imienia, kodu pocztowego i daty urodzenia.

  1. Utwórz aplikację internetową:
  • otwórz Visual Studio, wybierz File->** New-> Web Site -> Empty Web Site**,
  • kliknij OK,
  • w oknie Solution Explorer kliknij prawym przyciskiem myszy na Web Site -> Add New Item -> Web Form,
  • kliknij OK.
  1. Dodaj kontrolki umożliwiające pobranie od użytkownika wymaganych informacji:
  • na stronie wpisz Podaj imię:,
  • dodaj kontrolkę TextBox i w polu ID wpisz tbImie,
  • pod spodem, na stronie wpisz Podaj kod pocztowy:,
  • dodaj kontrolkę TextBox i w polu ID wpisz tbKod,
  • pod spodem, na stronie wpisz Podaj datę urodzenia:
  • dodaj kontrolkę TextBox i w polu ID wpisz tbDataUrodzenia.
  1. Sprawdź działanie aplikacji. Zapisz zmiany i uruchom formularz.

Dodanie rozszerzeń z biblioteki AJAX Control Toolkit

  1. Dodaj znak wodny do kontrolek.
  • do strony Default.aspx, na górze, przed innymi kontrolkami, dodaj kontrolkę ScriptManager,
  • do strony Default.aspx, w widoku Source, przed znacznikiem </head> dodaj następujący kod:
<style type="text/css">
    .watermarked {
        height:20px;
        width:150px;
        padding:2px 0 0 2px;
        border:1px solid #BEBEBE;
        background-color:#F0F8FF;
        color:gray; }
</style>
  • wybierz kontrolkę TextBoxo id = tbImie, kliknij Smart Tag, wybierz Add Extender,
  • w oknie Extender Wizard wybierz TextBoxWatermarkExtender i kliknij OK (Rys. 4.).

Rys. 4. Dodanie rozszerzenia umożliwiającego dodanie znaku wodnego do kontrolki TextBox.

  • W oknie Properties znajdź grupę Extenders i rozwiń tbImie_ TextBoxWatermarkExtender:
    —   w polu WatemarkText wpisz Podaj imię,
    —   w polu WatermarkCssClass wpisz watermarked.
  • To samo wykonaj dla kontrolek tbKod i tbDataUrodzenia, wpisując odpowiednie komunikaty.
  1. W kontrolce tbKod dodaj możliwość wpisywania jedynie liczb oraz znaku – (myślnik).
  • wybierz kontrolkę TextBox o id = tbKod, kliknij Smart Tag. Wybierz Add Extender,
  • w oknie Extender Wizard wybierz FilteredTextBoxExtender i klinij Ok,
  • w oknie Properties znajdź grupę Extenders i rozwiń tbKod_ FilteredTextBoxExtender:
    —   w polu FilterType, do listy rozwijanej, wpisz Custom, Numbers,
    —   w polu ValidChars wpisz – (myślnik).
  1. Dodaj interaktywny  kalendarz:
  • wybierz kontrolkę tbDataUrodzenia, dodaj rozszerzenie CalendarExtender.
  1. Sprawdź działanie aplikacji. Zapisz zmiany i uruchom formularz:
Informacja
Kalendarz standardowo jest wyświetlany w języku angielskim, aby to zmienić należy ustawić możliwość dopasowania do ustawień lokalnych przeglądarki użytkownika (właściwość EnableScriptGlobalization) w kontrolce ScriptManager, odpowiedzialnej za wszystkie skrypty na stronie.
  1. Ustaw możliwość dopasowania kontrolek do ustawień lokalnych przeglądarki:
  • wybierz kontrolkę ScriptManager,
  • w oknie Properties zmień właściwość EnableScriptGlobalization na True.
  1. Sprawdź działanie aplikacji. Zapisz zmiany i uruchom formularz:

Podsumowanie

W tym artykule nauczyliśmy się wykorzystywać podstawowe rozszerzenia kontrolek, dostępne w bibliotece AJAX Control Toolkit. Zachęcam do odwiedzenia strony https://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/ i przetestowania wszystkich kontrolek i rozszerzeń dostępnych w tej bibliotece.