WebMatrix 2 Beta - Tworzenie aplikacji w ASP.NET

Autor: Tomasz Kowalczyk

Opublikowano: 2012-01-09

Tworzenie prostych aplikacji internetowych w języku ASP.NET nie powinno dla nikogo stanowić problemu. Jeśli chcesz nabyć taką umiejętność, to uważnie przeczytaj poniższy artykuł. Pokaże Ci on, na co zwrócić uwagę podczas nauki tworzenia stron Web oraz w jaki sposób wykorzystać do tego celu program WebMatrix 2 Beta.

Po przeczytaniu tego artykułu będziesz umiał:

• przygotować oprogramowanie WebMatrix 2 Beta do tworzenia strony od podstaw z wykorzystaniem ASP.NET Web Forms,
• wykorzystać usprawnienia WebMatrix 2 Beta podczas pisania aplikacji w ASP.NET, opartych o sposób ASP.NET Web Forms.

Wprowadzenie

ASP.NET jest to framework, opracowany przez firmę Microsoft, służący do tworzenia zróżnicowanych stron internetowych. Korzystając z ASP.NET w środowisku WebMatrix 2 Beta, masz dostęp do trzech sposobów budowania aplikacji internetowych:

• ASP.NET Web Forms – sposób ten pozwala na budowanie aplikacji Web z gotowych formatek, zgodnych z podstawami programowania zdarzeniowego;
• ASP.NET Web Pages – wraz z nowym silnikiem generowania widoku – Razor. Podejście to pozwala na sprawne funkcjonowanie kodu, działającego po stronie serwera w celu generowania dynamicznej zawartości;
• ASP.NET MVC – podejście to pozwala na tworzenie rozbudowanych aplikacji internetowych w oparciu o wzorzec MVC (Model-View-Controller), zgodnych ze współczesnymi standardami.

Artykuł ten zawiera informacje dotyczące wykorzystania WebMatrix 2 Beta, podczas tworzenia stron, z wykorzystaniem pierwszego podejścia (ASP.NET Web Forms).

Implementacja

1. Wybierz opcję Templates z menu początkowego. W następnym oknie, zatytułowanym Site from Template, wybierz Empty Site. W pole formularza o nazwie Site Name wpisz WebMatrix2_Beta_ASPX i naciśnij OK.
2. Z menu bocznego wybierz zakładkę Files i znajdź w niej plik o nazwie Default.cshtml, potem kliknij na niego prawym przyciskiem myszy i wybierz Delete.
3. Następnie kliknij prawym przyciskiem myszy na nazwę swojego projektu (WebMatrix2_Beta_ASPX) i wybierz New File, następnie szablon ASPX(C#) i nadaj mu nazwę Default.aspx.
4. W kolejnym kroku kliknij prawym przyciskiem myszy na nazwę swojego projektu (WebMatrix2_Beta_ASPX) i wybierz New File, następnie szablon Class(C#) i nadaj mu nazwę Default.aspx.cs. Plik ten to będzie Twój tzw. code-behind, w którym umieścisz logikę funkcjonowania strony.
5. Przed dokonaniem testu w celu ustalenia, czy wszystko poprawnie działa, dodaj kolejny wpis. Niech będzie to tytuł strony, który powinien być podany jako ciąg znaków pomiędzy tagami <title></title>. Wpisz tam np. Moja pierwsza strona Web. Zapis ten jest przedstawiony poniżej:

<title>Moja pierwsza strona Web</title>

6. Aby zobaczyć efekt powyższych prac, wybierz z lewego górnego rogu programu WebMatrix 2 Beta ikonkę z napisem Run. Wówczas uruchomiona zostanie domyślna przeglądarka internetowa z Twoją stroną Web. Rys. 1 Pierwsze uruchomieni projektu przedstawi widoczny rezultat.

Rys. 1. Pierwsze uruchomienie projektu.

Informacja

Warto zauważyć w tym momencie, że WebMatrix 2 Beta daje możliwość dokonania testu strony pod różnymi przeglądarkami. Aby tego dokonać, kliknij strzałkę skierowaną w dół, umieszczoną pod napisem Run i wybierz interesującą Cię przeglądarkę z tych, które zainstalowane są na Twoim komputerze.

7. Następnie dokonaj deklaracji nagłówka pliku Default.aspx, który określi m.in. plik z kodem code-behind, utworzony przez Ciebie. Ten kod powinien znajdować się w pierwszej linii pliku Default.aspx i jest przedstawiony poniżej:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default"%>

8. Jako, że pracujesz nad plikiem typu .aspx WebMatrix 2 Beta, w szablonie automatycznie został umieszczony fragment kodu, który jest niezbędny do prawidłowego działania strony opartej o ASP.NET Web Forms, czyli:

<form id="form1" runat="server">
</form>

9. W następnym kroku, pomiędzy powyższe tagi, dodaj 3 elementy formularza, aby przekonać się, na jakiej zasadzie działają strony wykonane zgodnie z ASP.NET Web Forms.

Będzie to element Label, na którym umieścisz napis, dodaj również element DropDownList, czyli listę wyboru, składającą się z trzech elementów listy – ListItem. Każdy z trzech elementów listy będzie zawierał nazwę koloru do wyboru. Ostatnim elementem, jaki dodasz do formularza będzie przycisk – Button. Po wybraniu koloru z elementu DropDownList i naciśnięciu przycisku – Button, wybrany kolor zostanie wyświetlony w elemencie – Label. Kod formularza przedstawiony jest poniżej:

<form id="form1" runat="server">
        <div>
            <asp:Label ID="Label1" runat="server" Text="Wybierz kolor:"></asp:Label>
            <br/>
            <asp:DropDownList ID="Color" runat="server">
                <asp:ListItem>Czerwony</asp:ListItem>
                <asp:ListItem>Zielony</asp:ListItem>
                <asp:ListItem>Niebieski</asp:ListItem>
            </asp:DropDownList>
            <br/>
            <asp:Button ID="SubmitButton" runat="server" Text="Przycisk" onClick="SubmitButton_Click"></asp:Button>
        </div>
</form>

10. Po uruchomieniu swojej strony zobaczysz obraz podobny do Rys. 2. Utworzony formularz, umieszczonego poniżej. Przedstawia on elementy formularza.

Rys. 2. Utworzony formularz.

11. Istotną sprawą jest to, by zwrócić jeszcze uwagę na atrybut OnClick elementu Button. Przyjmuje on wartość SubmitButton_Click co oznacza, że w pliku Default.aspx.cs należy zaimplementować metodę o tej nazwie, w której umieścisz kod odpowiedzialny za przetwarzanie formularza po przyciśnięciu elementu – Button.
12. Pora więc zaimplementować logikę przetwarzania danych z formularza na Twojej stronie. Aby tego dokonać, przejdź do edycji pliku Default.aspx.cs. Przede wszystkim zwróć uwagę na używane przestrzenie nazw (using). Powinny one być takie, jak przedstawione poniżej:

using System;
using System.Collections.Generic;
using System.Web;

13. Następnie dokonaj implementacji kodu klasy Default. Jest to klasa typu partial, gdyż część jej deklaracji znajduje się w pliku Default.aspx. Klasa Default powinna również dziedziczyć z klasy System.Web.UI.Page. Jej kod wraz zaimplementowaną metodą SubmitButton_Click przedstawiony jest poniżej:

public partial class Default : System.Web.UI.Page
{
   protected void SubmitButton_Click(object sender, EventArgs e)
   {
    this.Label1.Text = String.Format("Wybrałeś kolor: {0}", Color.SelectedValue);
   }
}

14. Czas więc na wykonanie testu aplikacji po to , aby dowiedzieć się, czy działa ona tak, jak tego oczekujemy. W tym celu wciśnij przycisk Run. Po wyświetleniu się strony z listy rozwijanej, wybierz dowolny kolor. Następnie naciśnij Button o nazwie Przycisk. Efekt końcowy działającego programu przedstawiony jest na Rys. 3. Efekt końcowy.

Rys. 3. Efekt końcowy.

Podsumowanie

W tym artykule poznałeś mechanizm tworzenia aplikacji internetowych w środowisku WebMatrix 2 Beta z wykorzystaniem ASP.NET Web Forms. Dowiedziałeś się również, jak usprawnienia, oferowane przez WebMatrix 2 Beta, wpływają na szybkość procesu wytwórczego, nie ujmując przy tym jakości wytwarzanych produktów.

W następnej części nauczysz się wykorzystywać składnię Razor do generowania dynamicznych stron Web.

 

---