Kurs ASP NET

Kurs ASP NET, ASP.NET

Spis treści

Chcąc jak najszybciej utworzyć naszą pierwszą internetową aplikację, w górnym menu klikamy kolejno: File -> Web Site. Na ekranie pojawi się wówczas się okienko, w którym będziemy musieli wskazać typ szablonu, według którego chcemy tworzyć naszą aplikację. Nas interesuje oczywiście: „ASP.NET Web Site”. Zakładka Location umożliwia nam umieszczenie naszej aplikacji na lokalnym dysku twardym, bądź też zdalnym serwerze. Na początku proponuje pozostawić wybraną domyślnie opcję: File System. Poniżej możemy również wybrać język programowania, w którym będziemy pisać naszą aplikację. Standartowo, do wyboru mamy Visual Basica, C# oraz J#. W czasie kursu wszystkie omawiane przeze mnie przykłady tworzone będą w języku C#.

Po naciśnięciu przycisku „Ok” Visual Studio utworzy nowy projekt. W środkowej części ekranu środowiska programistycznego będziemy mogli zobaczyć wygenerowany kod, zawarty w pliku Default.aspx. Plik ten możemy edytować w trybie Source, w którym formatki otwierają się domyślnie, oraz „Design”, pozwalającym na wizualną edycję strony internetowej. Po prawej stronie ekranu znajdują się okna, zatytułowane: Solution Explorer, gdzie widoczne są wszystkie pliki wchodzące w skład projektu, oraz Properties, służące do edycji parametrów aktualnie wybranego obiektu. Natomiast po lewej stronie ekranu możemy zobaczyć zakładki: Server Explorer oraz Toolbox. Naciśnięcie na którejś z nich spowoduje rozwinięcie nowych list, zawierających odpowiednie elementy. Korzystanie z elementów Toolboxa oraz Server Explorera zostanie wyjaśnione na przykładach w dalszej części kursu.

Spróbujmy, zatem utworzyć pierwszą, prostą stronę internetową, wykorzystując Visual Studio 2005. Pierwszym krokiem, który musimy wykonać jest zmiana domyślnej nazwy strony. W wyświetlanym domyślnie na początku kodzie strony Default.aspx odnajdujemy linię wyglądającą następująco:

<title>Untitled Page</title>

Pomiędzy html-owskie znaczniki <title></title> możemy wstawić dowolny tekst. Przykładowo, w omawianej linii możemy wprowadzić następujące zmiany:

<title>Moja pierwsza strona</title>

Następnie zmieniamy tryb wyświetlania dokumentu na „Design” (służy do tego zakładka, znajdująca się w lewym, dolnym rogu edytowanej strony. Po przejściu w ten tryb w Visual Studio wyświetli nam podgląd aktualnej zawartości strony. W trybie tym możemy dodawać i usuwać nowe elementy formatki, korzystając z wspomnianego wcześniej narzędzia Toolbox. Po kliknięciu lewym przyciskiem myszy na zakładkę, znajdującą się w lewej części ekranu na ekranie ujrzymy listę elementów, które możemy wykorzystać przy tworzeniu witryny.

Spróbujmy, zatem wprowadzić zmiany na naszej stronie, wykorzystując do tego narzędzie Toolbox (często nazywane po prostu „Paskiem narzędzi”). W tym celu rozwijamy znajdującą się na samej górze narzędzia, zakładkę „HTML”. Na liście, która powinna pojawić się w tym momencie, dostrzeżemy standardowe elementy języka html, takie jak na przykład: tabela („Table”), pola tekstowe („Textarea”, „Input (Text)”), czy też rozmaite przyciski. Spróbujmy wybrać, naciskając lewym przyciskiem myszy, element „Input (Text)”, a następnie przeciągnąć go na edytowaną stronę Default.aspx (uwaga – strona musi być otwarta w trybie „Design”). Widzimy, że wybrany przez nas element pojawił się w środkowym oknie Visual Studio. Następnie wybieramy ponownie element (tym razem na otwartej formatce, nie na pasku narzędzi), klikając na nim lewym przyciskiem myszy. W tym momencie w prawym, dolnym oknie Visual Studio pojawią się właściwości zaznaczonego elementu. W okienku tym (zatytułowanym po prostu: Properties) odnajdujemy wartość zatytułowaną „Value”. Odpowiada ona za tekst wyświetlany w polu tekstowym po uruchomieniu strony. Wpisując w oknie właściwości wybrany tekst, ustawiamy wartość atrybutu naszego pola tekstowego.

Ostatnim krokiem, będzie obejrzenie efektów naszej dotychczasowej pracy. W Visual Studio wybieramy opcje: Build - > Build Page, a następnie: Debug -> Start Without Debugging. W tym momencie Visual Studio automatycznie uruchomi proces serwera IIS oraz otworzy okno przeglądarki, w którym wyświetlona zostanie zawartość edytowanej przez nas witryny. Efekt naszej dotychczasowej pracy powinien przedstawiać się następująco:

Po otwarciu pliku Default.aspx.cs widzimy, że została zdefiniowana w nim jedna klasa o nazwie _Default. Klasa ta dziedziczy z klasy System.Web.UI.Page, która reprezentuje pojedynczą formatkę (czyli w praktyce stronę widzianą w oknie przeglądarki). Klasa ta, zawiera aktualnie tylko jedną metodę o nazwie „Page_Load", która uruchamiana jest przy każdym załadowaniu strony w oknie przeglądarki.

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

      }
}

Widzimy, więc że każda tworzona przez nas formatka jest oddzielnym obiektem, działającym na serwerze. Obiekt ten tworzony jest za każdym razem, w momencie zapytania klienta do serwera, jego zadaniem jest wygenerowanie odpowiedzi dla klienta. Po wykonaniu tego zadania obiekt jest niszczony. Dlatego między innymi w obiekcie tego typu nie można przechowywać wartości jako jego właściwości, między kolejnymi wywołaniami strony.

Otwórzmy ponownie w oknie środowiska programistycznego plik Default.aspx. Dotychczas, przy tworzeniu stron w technologii ASP.NET wykorzystywaliśmy kontrolkę html. Tym razem użyjemy kontrolek serwerowych. W pasku narzędzi wybierzmy grupę kontrolek „Standard". Następnie przeciągnijmy na formatkę obiekty: „Label" oraz „Buton".

Zadaniem kontrolki Label jest wyświetlanie tekstu w oknie przeglądarki. Żeby zmienić wyświetlany tekst kliknijmy na obiekcie lewym przyciskiem myszy, a następnie w oknie właściwości (Properties) zmieńmy wartość atrybutu Text. Proponuje zmienić jego wartość na: „pierwsze uruchomienie strony".

Następnie kliknijmy dwukrotnie lewym przyciskiem myszy na przycisku Button. W tym momencie zostanie ponownie otwarty plik Default.aspx.cs, gdzie wewnątrz klasy _Default, została wygenerowana nowa metoda Button1_Click. Metoda ta będzie uruchamiana w momencie naciśnięcia przez użytkownika przycisku. Załóżmy, że chcemy, aby po naciśnięciu przycisku zmieniał się tekst widoczny w przeglądarce internetowej. W tym celu musimy zmodyfikować metodę Button1_Click w następujący sposób.

protected void Button1_Click(object sender, EventsArgs e){
    this.Label1.Text = "Właśnie nacisnąłeś przycisk!";
}

Wszystkie obiekty obecne na formatce są właściwościami naszej klasy _Default, do których mamy dostęp dzięki słowu kluczowemu „this" (jego stosowanie nie jest jednak wymagane). „Label1" jest nazwą obiektu, reprezentującego pole tekstowe, natomiast Text, zmienianą już przez nas wcześniej (z wykorzystaniem okna „Properties") polem tego obiektu.

Otwierając źródło pliku Default.aspx w edytorze Visual Studio możemy dostrzec pojawienie się nowych linii kodu:

<asp:Label ID="Label1" runat="Server" Text="Pierwsze uruchomienie strony"></asp:Label>
<asp:Buton ID="Button1" runat="Server" OnClick="Button1_Click" Text="Buton"></asp:Buton>

Najważniejszą zmianą, w porównaniu ze stosowanym poprzednio polem tekstowym html, jest obecność atrybutu runat="Server" przy obu kontrolkach. Oznacza to, że działają one po stronie serwera. Wyjaśnimy to dokładnie na przykładzie stworzonej przez nas formatki. Zdefiniowany na niej Buton posiada właściwość „OnClick", która mówi o tym, jaka akcja powinna być wykonana w momencie naciśnięcia przycisku przez użytkownika. „Życie" naszej aplikacji rozpoczyna się w momencie, kiedy użytkownik zechce wyświetlić w oknie przeglądarki stronę Default.aspx. Przeglądarka wysyła zapytanie do serwera, gdzie tworzony jest obiekt klasy _Default. Następnie serwer wysyła odpowiedź do klienta (czego efektem będzie pojawienie się strony w oknie przeglądarki). Obiekt reprezentujący pojedynczą formatkę jest w tym momencie niszczony.

Następnie użytkownik naciska przycisk „Button" w oknie przeglądarki. W tym momencie przeglądarka klienta wysyła ponowne zapytanie do serwera (zdarzenie to, określane jest jako „PostBack"). Tym razem zawiera ono jednak obiekt ViewState, zawierający informacje, na temat zawartości strony. Na serwerze tworzony jest ponownie obiekt klasy _Default.aspx, wywoływana jest jego metoda Button1_Click, następnie do klienta odsyłana jest odpowiedź, a sam obiekt jest ponownie niszczony. Efektem działania wspomnianej metody widoczny jest w oknie przeglądarki klienta.

Aplikacja kończy działanie w momencie wygaśnięcia sesji użytkownika (domyślnie jest to dwadzieścia minut). W tym czasie, żaden klient nie może kierować zapytań do aplikacji. Natomiast obiekty reprezentujące poszczególne formatki tworzone są tylko w celu odpowiedzi na konkretne zapytanie klienta i po udzieleniu odpowiedzi przez serwer są natychmiast niszczone.

Oprócz plików reprezentujących poszczególne formatki w skład aplikacji WWW wchodzić może wiele innych obiektów. Aby zobaczyć ich listę w oknie Visual Studio wybieramy opcję: Website -> Add New Item. Wyświetli się wówczas okno, zawierające umożliwiające wybór obiektów, które mogą wchodzić w skład aplikacji.

Widzimy, że środowisko programistyczne daje nam możliwość dołączenia do projektu kolejnych formatek („Web Form"), zwykłych stron html, plików zawierających szablony stylów, oraz skryptów wykonywanych po stronie klienta. W sumie do wyboru mamy prawie trzydzieści rozmaitych obiektów, począwszy od najprostszych plików tekstowych, poprzez obiekty odpowiedzialne za wygląd i działanie witryny, a skończywszy na obiektach odpowiedzialnych za pobieranie i przechowywanie danych w pamięci serwera. Spróbujmy dodać do projektu nową formatkę. W tym celu wybieramy w wyświetlonym oknie szablon „Web Form", nadajemy mu nazwę (domyślnie jest to: „Default2.aspx"), wybieramy język programowania w jakim tworzony będzie kod źródłowy strony. W końcu, musimy odpowiedzieć na pytanie czy chcemy by kod strony był umieszczany w oddzielnym pliku (jest to rozwiązanie zalecane, znacznie zwiększające przejrzystość tworzonych obiektów), oraz czy strona powinna być powiązana z obecnym w projekcie obiektem MasterPage (mechanizm ten służący do prostego ujednolicania wyglądu wszystkich formatek obecnych w projekcie zostanie omówiony w kolejnych rozdziałach kursu). Po kliknięciu „Ok", w Solution Explorerze będzie widoczny nowy obiekt reprezentujący dodaną formatkę. Jeżeli chcemy, aby nowa strona była wyświetlana jako pierwsza po uruchamianiu projektu, klikamy na nią w oknie Solution Explorera prawym przyciskiem myszy i wybieramy opcję: „Set As Start Page".

Platforma .NET udostępnia pokaźną ilość kontrolek, które możemy wykorzystywać przy tworzeniu stron internetowych w technologii ASP.NET. Wiele tego typu elementów tworzonych i udostępnianych jest również (darmowo, lub za opłatą) przez niezależne firmy. W rozdziale tym, postaram się zaprezentować zasady działania i wykorzystywania kilku najpopularniejszych kontrolek.

W poprzednim rozdziale naszego kursu, wykorzystywaliśmy obiekt Label, służący do wyświetlania tekstu w oknie przeglądarki internetowej. Po naciśnięciu przycisku następowała zmiana tekstu, wyświetlanego przez tą kontrolkę. Wyobraźmy sobie sytuację, w której użytkownik musi własnoręcznie wprowadzić wymagany tekst. Dzieje się tak ogromnej większości rozmaitych formularzy, umieszczanych na stronach internetowych. Do wprowadzania danych może posłużyć kontrolka TextBox. W Visual Studio stwórzmy nową stronę, która zawierać będzie 3 obiekty typu Label, dwa TextBoxy jeden przycisk Buton. Parametry, które należy zmienić dla każdego z obiektów przedstawiam w poniższej tabeli.

Klasa obiektu

ID

 Text

Label