03. Przykłady zastosowania popularnych kontrolek - część I

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.

Obiekty te możemy rozmieścić na formatce w następujący sposób:

Użytkownik powinien wprowadzić swoje imię i nazwisko w odpowiednich TextBoxach. Po naciśnięciu przycisku „Wyślij", chcemy wyświetlić wprowadzone dane w dolnej części ekranu. Metoda wywoływana w momencie naciśnięcia przycisku wyglądać będzie następująco:

protected void btnSubmit_Click(object sender, EventArgs e)
{
            this.lblResults.Text = "Użytkownik: " + this.tbName.Text + " " + this.tbSurname.Text;
            this.tbName.Text = "";
            this.tbSurname.Text = "";
}

Pierwsza linia kodu kopiuje zawartość tekst wpisany do pól tekstowych przez użytkownika. Kolejne wyczyszczą ich zawartość.

Strona startowa:

Po naciśnięciu przycisku „Wyślij":

Jeżeli chcesz, aby elementy strony rozmieszczone były równo, najprostszym rozwiązaniem będzie umieszczenie ich w tabeli html, dostępnej w pasku narzędziowym (zakładka: „HTML").

Wyobraźmy sobie teraz sytuację, w której użytkownik, obok swoich danych pragnie wprowadzić ilość produktów, które prawnie zakupić. Pierwszym krokiem, który musi uczynić, jest wybranie dostępnych produktów, kolejnym natomiast wprowadzenie ich liczby i naciśnięcie przycisku „Wyślij". Do realizacji tego zadania możemy wykorzystać kontrolki o nazwie CheckBox. W oknie Visual Studio zmodyfikujmy zawartość formatki w następujący sposób:

Załóżmy, że CheckBoxy odpowiadające kolejnym książką, będą nazywać się odpowiednio: CheckBox1, CheckBox2 i CheckBox3, natomiast TextBoxy: TextBox1, TextBox2, TextBox3. Ponadto dla wszystkich pól tekstowych, służących do wprowadzania liczby egzemplarzy książek, ustawiamy w oknie „Properties" wartość właściwości „Visible" na false.

Dodajmy teraz do naszej klasy reprezentującej formatkę metodę TotalCost. Metoda ta, sprawdza, w którymś z pól tekstowych podana została liczba egzemplarzy i zwraca całkowity koszt zakupu lub -1 w przypadku, kiedy żadne z pól nie zostało wypełnione. Dla ułatwienia przyjmijmy, że każda z książek kosztuje 20 zł.

int TotalCost()
{
            if ((this.TextBox1.Text.Trim() == "") && (this.TextBox2.Text.Trim() == "") && (this.TextBox3.Text.Trim() == ""))
            {
                       return -1;
            }

            int totalCost = 0;
            if (this.TextBox1.Text != "")
            {
                       totalCost += 20 * System.Int32.Parse(this.TextBox1.Text);
            }
            if (this.TextBox2.Text != "")
            {
                       totalCost += 20 * System.Int32.Parse(this.TextBox2.Text);
            }
            if (this.TextBox3.Text != "")
            {
                       totalCost += 20 * System.Int32.Parse(this.TextBox3.Text);
            }
            return totalCost;
}

Wykorzystywana w odniesieniu do zawartości każdego z TextBoxów funkcja Trim() powoduje obcięcie początkowych i końcowych pustych znaków (tzn. „spacji, tabulatorów itp.). Uwaga – metoda ta nie sprawdza w jakikolwiek sposób, czy podany ciąg znaków jest naprawdę liczbą. W przypadku wpisania znaku, który nie jest liczbą mogą wystąpić błędy. W czasie tworzenia „prawdziwej" aplikacji koniecznie musimy zaimplementować sprawdzanie wejściowego ciągu.

Kolejnym krokiem, jest modyfikacja zawartości funkcji Page_Load oraz btnSubmit_Click, uruchamianej w momencie naciśnięcia przycisku „Wyślij".

    protected void Page_Load(object sender, EventArgs e)
    {
            if(this.CheckBox1.Checked)
            {
                       this.TextBox1.Visible = true;
            }
            if (this.CheckBox2.Checked)
            {
                       this.TextBox2.Visible = true;
            }
            if (this.CheckBox3.Checked)
            {
                       this.TextBox3.Visible = true;
            }
    }

    protected void btnSubmit_Click(object sender, EventArgs e)
    {
            if (this.TotalCost() != -1)
            {
                       this.lblResults.Text = "Użytkownik: " + this.tbName.Text + " " + this.tbSurname.Text;
                       this.lblResults.Text += "<BR>"  + "Calkowity koszt zakupu: " + this.TotalCost().ToString();
                       this.tbName.Text = "";
                       this.tbSurname.Text = "";
           }
    }

Za każdym razem w momencie uruchomienia strony sprawdzane jest, które z checkBoxów zostały zaznaczone (służy do tego właściwość Checked tych obiektów). Jeśli wybrana została któraś z książek po przeładowaniu pojawia się przy niej pole gdzie możemy wprowadzić liczbę zamawianych egzemplarzy. W przypadku, kiedy przynajmniej jeden z textBox’ów, powiązanych z książkami, został wypełniony, po naciśnięciu przycisku „Wyślij" następuje wyświetlenie danych użytkownika, oraz całkowitego kosztu zamówionych książek.

Tak wygląda strona po pierwszym załadowaniu:

Po zaznaczeniu wybranych tytułów i kliknięciu przycisku „wyślij", po przeładowaniu strony pojawią się pola, w których możemy podać liczbę egzemplarzy:

Wyrażamy chęć zakupu jednego egzemplarza obu pozycji. Aplikacja wyświetla nasze dane i oblicza koszt zakupu:

Wyobraźmy sobie sytuację, w której internetowa księgarnia oferuje 10% zniżki przy zakupie dla określonej grupy klientów. Przyjmijmy, że będą to posiadacze karty stałego klienta. Dodajmy na formatce obiekt DropDownList, który odpowiada za wyświetlanie listy rozwijalnej. Po przeciągnięciu obiektu na formatkę pojawi się okienko zatytułowane „DropDownList Task", w którym wybieramy opcję „Edit Items". W oknie, które się teraz pojawi („ListItem Collection Editor") dodajmy dwa nowe pola – pierwsze o parametrach Text = "Nie posiadam karty stałego klienta", Value = 0 – oraz drugie – Text = "Posiadam kartę stałego klienta", Value = 1

Po kliknięciu ok., musimy jeszcze wprowadzić zmiany w metodzie TotalCost.

int TotalCost()
{
            if ((this.TextBox1.Text.Trim() == "") && (this.TextBox2.Text.Trim() == "") && (this.TextBox3.Text.Trim() == ""))
            {
                       return -1;
            }
            int totalCost = 0;
            if (this.TextBox1.Text != "")
            {
                       totalCost += 20 * System.Int32.Parse(this.TextBox1.Text);
            }
            if (this.TextBox2.Text != "")
            {
                       totalCost += 20 * System.Int32.Parse(this.TextBox2.Text);
            }
            if (this.TextBox3.Text != "")
            {
                       totalCost += 20 * System.Int32.Parse(this.TextBox3.Text);
            }
            if (this.DropDownList1.SelectedValue == "1")
            {
                        totalCost = (9 * totalCost) / 10;
            }
            return totalCost;
}

Przed zwróceniem wartości całkowitego kosztu zakupu program sprawdza, czy użytkownik nie wybrał opcji  "Posiadam kartę stałego klienta". W tym przypadku całkowity koszt zakupu zostaje zmniejszony o 10%.