Ćwiczenie 8. Kontrolki serwerowe

Transkrypt

1 Ćwiczenie 8 Temat: Kontrolki serwerowe ASP.NET cz.2 Cel ćwiczenia: W ramach tego ćwiczenie student zapozna się z kolejnymi kontrolkami serwerowymi oraz z metodami ich walidacji, a także z kontrolkami umożliwiającymi walidację innych kontrolek. Dodatkowo student pozna metodę zamiany znacznika HTML na kontrolkę serwerową, nauczy się zmiany stylu i atrybutów znaczników uruchamianych po stronie serwera z poziomu kodu c#.

2 Działanie i obsługa najpopularniejszych kontrolek serwerowych W poprzednim ćwiczeniu czytelnik zapoznany został z metodami wstawiania na stronę kontrolek serwerowych, ustalania ich własności, a także korzystania z ich metod. W trakcie tego ćwiczenia przedstawione zostaną kolejne najpopularniejsze kontrolki. Pierwszą przedstawianą grupą kontrolek są kontrolki list. W poprzednim ćwiczeniu, jako przedstawiciel tej grupy, przedstawiona został lista rozwijana (drop down list). Kolejnymi kontrolkami są: ListBox Kontrolka listy wielokrotnego wyboru Kontrolka wstawia listę w postaci ramki analogicznie jak kontrolka DropDownList z tą różnicą, iż kontrolka ListBox umożliwia zastosowania zaznaczenia wielu pozycji na liście (właściwość SelectionMode). Do jej najważniejszych właściwości należą: Właściowści: Items kolekcja elementów listy SelectedIndex numer wybranego elementu SelectedValue wartość wybranego elementu AutoPostBack automatyczne powiadomienie serwera SelectionMode wielokrotny wybór: tak / nie BackColor kolor tła kontrolki ForeColor kolor teksu kontrolki Visible kontrolka widoczna / niewidoczna Zdarzenie: SelectedIndexChange Pamiętać należy, że jeśli kontrolka ma ustaloną możliwość wielokrotnego wyboru to właściwości SelectedIndex oraz SelectedValue posiadają tylko wartości pierwszej zaznaczonej pozycji na liście. Aby poprawnie obsłużyć wszystkie zaznaczone elementy należy ListBox Kontrolka listy wielokrotnego wyboru 70

3 odwołać się do kolekcji elementów listy, np. tak jak to zostało przedstawione w poniższym przykładzie. Przykład Na stronie.aspx zdefiniowana została kontrolka typu ListBox która posiada 3 pozycje, a także zdefiniowaną możliwość wielokrotnego wyboru, oraz określoną metodę, która zostanie wywołana po zmianie zaznaczonych pozycji listy: <asp:listbox ID="ListBox1" runat="server" AutoPostBack="True" onselectedindexchanged="listbox1_selectedindexchanged" SelectionMode="Multiple"> <asp:listitem>a</asp:listitem> <asp:listitem>b</asp:listitem> <asp:listitem>c</asp:listitem> </asp:listbox> Natomiast w pliku kodu, aspx.cs zdefiniowana została metoda: protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e) Label1.Text = "Wybrano odpowiedź: "; for (int i = 0; i < ListBox1.Items.Count;i++ ) if (ListBox1.Items[i].Selected) Label1.Text += ListBox1.Items[i].Value+", "; Właściwość: Listbox1.Items.Count - zwraca ilość elementów listy ListBox1.Items[i].Selected zwraca prawdę lub fałsz, w zależności, czy element i jest wybrany ListBox1.Items[i].Value zwraca wartość elementu i Przykład 71

4 CheckBoxList Jest kontrolką reprezentująca listę wielokrotnego wyboru, składającą się z pól typu CheckBox. Kontrolka posiada analogiczne właściwości i metody jak kontrolka ListBox. RadioButtonList Jest kontrolką reprezentująca listę jednokrotnego wyboru, składającą się z pól typu RadioButton. Kontrolka posiada analogiczne właściwości i metody jak kontrolka DropDownList. Zadanie 1 Kontrolki List Stworzyć cztery pytania ankiety, jak w poniższym przykładzie. Po wciśnięciu przycisku Wyślij wyświetlić pod ankietą wybrane odpowiedzi w kontrolce Label. CheckBoxList 72

5 Walidacja W poprzednich ćwiczeniach czytelnik zapoznany został z metodami walidacji formularzy HTML z wykorzystaniem skryptów JavaScript. W ramach tego ćwiczeniach przedstawione zostaną metody walidacji zawartości po stronie serwera, a także z wykorzystaniem kontrolki walidującej zawartość innej kontrolki. Metody walidacji po stronie serwera Do najważniejszych metod wykorzystywanych przy walidacji zawartości wykorzystywanych po stronie serwera należą: IsMatch metoda sprawdza, czy łańcuch jest zgodny ze wzorcem opisanym wyrażeniem regularnym Matches - Zwraca kolekcję wystąpień wzorca Replace - Zastępuje wystąpienia wzorca łańcuchem tekstowym Walidacja może zostać dokonana np. po wystąpieniu zmiany w danej kontrolce lub dopiero po zdarzeniu zbiorowego wysłania danych, np. po wciśnięciu guzika wyślij. Jeśli walidacja zostaje wykonana zaraz po wpisaniu danych, warto jest zastosować dodatkową kontrolkę, np. typu Label, która będzie wyświetlała informację o tym, że tekst wprowadzony do danej kontrolki jest nieprawidłowy. W poniższym przykładzie zastosowana została metoda ismatch porównująca wyrażenie regularne z wpisanym przez użytkownika adresem Przykład W pliku.aspx zdefiniowane zostały tylko dwie kontrolki, TextBox w którym użytkownik wpisywał będzie adres oraz kotrolka Label, w której wpisany został domyślnie komunikat błędu, który domyślnie jest niewidoczny: <asp:textbox ID="tb_ " runat="server" AutoPostBack="True" ontextchanged="tb_ _textchanged"></asp:textbox> <asp:label ID="lbl_valid_ " runat="server" ForeColor="Red" Text="Wpisz poprawnie adres " Visible="False"></asp:Label> Metody walidacji po stronie serwera 73

6 W pliku kodu.aspx.cs zdefiniowana została metoda wywoływana po zmianie w polu tekstowym. Zadaniem metody jest sprawdzenie, czy wpisany adres spełnia kryteria wyrażenia regularnego, jeśli nie, wyświetlona zostanie kontrolka Label z komunikatem błędu: protected void tb_ _textchanged(object sender, EventArgs e) Regex re_ = new Regex("\\w+([-+.']\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*"); if (tb_ .text!= null && re_ .ismatch(tb_ .text)!= true) lbl_valid_ .visible = true; else lbl_valid_ .visible = false; (pamiętać należy aby używając wyrażeń regularnych użyć przestrzeni nazw: using System.Text.RegularExpressions; Przykład 2 Innym przykładem może być wykorzystanie metody replace np. w celu zamiany w adresach na inny symbol sugerujący, iż jest to adres poczty elektronicznej. Taki zabieg stosuje się, aby adres umieszony na stronie internetowej nie został odnaleziony przez automatyczne roboty zbierające adresy w sieci Internet, a następnie dopisany do list adresów na które wysyłane są niepożądane reklamy itp. Poniższy przykład przypisuje do kontrolki Label zawartość pola TextBox zamieniając na zwrot [at] Label1.Text = TextBox1.Text.Replace("@", "[at]"); Zadanie 2 Walidacja po stronie serwera Utworzyć formularz za pomocą 3 pól typu TextBox. Wyświetlić w odpowiednich polach typu Label ostrzeżenie, jeśli dane wpisane w polach są niepoprawne, wg wytycznych: pole imię powinno posiadać co najmniej 3 znaki oraz powinno zaczynać się od dużej litery Przykład 2 74

7 pole nazwisko powinno posiadać co najmniej 3 znaki oraz powinno zaczynać się od dużej litery pole powinno posiadać składnię odpowiednią dla adresów Kontrolki walidacyjne Środowisko Visual Studio udostępnia grupę kontrolek walidacyjnych, służących do walidacji innych kontrolek. Kontrolki te znaleźć można w sekcji Validation paska narzędzi Toolbox. Do najważniejszych wspólnych właściwości kontrolek walidacyjnych należą: ErrorMessage określa komunikat błędu ControlToValidate określa kontrolkę, która ma być weryfikowana za pomocą kontrolki walidacyjnej Do najpopularniejszych kontrolek walidacyjnych należą: RequiredFieldValidator sprawdza, czy pole zostało wypełnione (walidator pola wymaganego) RangeValidator sprawdza, czy wprowadzone wartość jest z podanego zakresu (właściwości MinimumValue oraz MaximumValue) RegularExpressionValidator sprawdza, czy wprowadzone wartość spełnia wzór wyrażenia regularnego Efekt działania wyżej wymienionych kontrolek jest taki sam jak w przypadku walidacji z wykorzystaniem kontrolki Label oraz metody ismatch, z tą jednak różnicą, że kontrolki z grupy Validation działają po stronie przeglądarki klienta poprzez wygenerowanie odpowiedniego skryptu JavaScript, dzięki czemu walidacja odbywa się znacznie szybciej niż w Kontrolki walidacyjne 75

8 przypadku walidacji serwerowej, jednak nie gwarantuje w pełni poprawności przesyłanych danych, ponieważ kod po stronie przeglądarki może zostać zmieniony w ten sposób, że dane które są wysyłane za pomocą formularza nie będą wymagały walidacji, dlatego właśnie walidacja po stronie przeglądarki klienta powinna być zawsze traktowana jako walidacja wstępna. Zadanie 3 Kontrolki walidacji Wykorzystując kontrolki serwerowe wykonać formularz wg poniższego wzoru. Do walidacji pól użyć kontrolek walidacyjnych wg założeń: pola imię i nazwisko powinno posiadać co najmniej 3 znaki oraz powinno zaczynać się od dużej litery pola i strona domowa powinny być weryfikowane za pomocą odpowiednich wyrażeń regularnych Pole wiek powinno być weryfikowane według zakresu: od 10 do 60 Zamiana kontrolek HTML na kontrolki serwerowe Każdy znacznik HTML może zostać przekształcony na kontrolkę serwerową w technologii ASP.NET. W tym celu zastosować należy dyrektywę runat= server oraz pamiętać o nadaniu znacznikowi unikalnego parametru ID, np.: Kontrolki walidacyjne 76

9 <div id="par1" runat="server">... </div> Taki zabieg umożliwia dostęp do atrybutów oraz stylów dowolnych znaczników z poziomu kodu c#, dzięki czemu wygląd i wartości atrybutów mogą być nadawane dynamicznie po zajściu odpowiedniego zdarzenia na stronie (po wywołaniu odpowiedniej metody, która w odpowiedni sposób zmodyfikuje znacznik). Dostęp do atrybutów znacznika Dostęp do atrybutów znacznika uruchamianego na serwerze odbywa się za pomocą składni: IDznacznika.Attributes["nazwa_atrybutu"] = "wartość"; Jeśli np. paragraf tekstu uruchamiany będzie po stronie serwera: <div id="par1" runat="server">... </div> to aby wyrównać tekst tego paragrafu do strony prawej za pomocą kodu c#, użyć należy składni: par1.attributes["align"] = "right"; Dostęp do stylu znacznika Analogicznie jak w przypadku ustalania wartości atrybutów znacznika uruchamianego po stronie serwera, ustalony może zostać styl znacznika: IDznacznika.Style[HtmlTextWriterStyle.Właściwość_stylu]= "wartość"; Jeśli np. paragraf tekstu uruchamiany będzie po stronie serwera: <div id="par2" runat="server">... </div> to aby za pomocą kodu c#, ustalić kolor tekstu paragrafu na niebieski, użyć należy składni: par2.style[htmltextwriterstyle.color] = "blue"; Możliwość dynamicznego dostępu do atrybutów oraz stylu znacznika z poziomu kodu c# daje ogromne możliwości projektującemu stronę, ponieważ pozwala na zmianę wyglądu strony Dostęp do atrybutów znacznika 77

10 po zajściu żądanego zdarzenia czy też interakcji z odwiedzającym lub dodatkowo pod określonym warunkiem itd. Zadanie 4 Dynamiczna zmiana styli elementów HTML Wykonać stronę wg poniższego wzoru. Wykorzystać kontrolki list do sterowania wyglądem tła strony oraz do sterowania wyglądem akapitu tekstowego: Dostęp do stylu znacznika 78