Dodaj do kontrolki MultiView dwie kontrolki View, nazywając je po kolei: ankietaglowna i podsumowanie.

Transkrypt

1 1. Wstaw linki do ankiet na stronie glownej aplikacji 2. Dodaj strone Ankieta.aspx do projektu 3.Dodawanie kontrolek MultiView Na stronie Default.aspx wstaw dwa odnośniki wskazujące na ankietę dla nowych klientów planujących zakup nowego roweru oraz ankietę dla osób już posiadających rowery. W tym celu w widoku Source dodaj: <a href="ankieta.aspx?view=nowy">ankieta dla nowych klientów</a> <br /> <a href="ankieta.aspx?view=wycieczki">ankieta dla osób posiadających rower</a> Wybierz Website -> Add New Item. Z listy wybierz Web Form. W polu Name wpisz Ankieta.aspx. Z listy Language wybierz Visual C#. Upewnij się, że opcja Place code in separate file jest zaznaczona. Upewnij się, że opcja Select master page nie jest zaznaczona. Kliknij OK. Do formularza dodaj kontrolkę MultiView, a następnie w oknie Properties określ właściwośd ID na mainmultiview. Dodaj do kontrolki MultiView dwie kontrolki View, nazywając je po kolei: ankietaglowna i podsumowanie. W kontrolce View o ID=AnkietaGlowna poniżej dodanych kontrolek dodaj kontrolkę MultiView i nazwij ją ankietamultiview. 4. Przygotuj wspolna poczatkowa czesc obu ankiet Dodaj do kontrolki ankietamultiview dwie kontrolki View, nazywając je po kolei: nowyview i wycieczkiview. W kontrolce ankietaglowna w widoku Design napisz Imię: i naciśnij Enter, a następnie umieśd kontrolkę TextBox i ponownie przejdź do nowej linii. W oknie Properties określ właściwośd (ID) na imietextbox. W dodanej linii na formularzu napisz Płed: i umieśd kontrolkę DropDownList. W oknie Properties określ właściwośd (ID) na plecdropdownlist. Kliknij Smart Tag dodanej kontrolki i wybierz Edit Items. Wciśnij przycisk Add, a następnie w obszarze ListItem properities: w polu Text wpisz Kobieta w polu Value wpisz K Wciśnij przycisk Add, a następnie w obszarze ListItem properities: w polu Text wpisz Mężczyzna w polu Value wpisz M Wciśnij przycisk Add, a następnie w obszarze ListItem properities: w polu Text wpisz Nie podaję w polu Value wpisz N w polu Selected wybierz True Wciśnij OK. Do formularza dodaj kontrolki TextBox umożliwiające pobranie od użytkownika następujących danych: (ID: textbox) telefon (ID: teltextbox) ulica (ID: ulicatextbox) numer domu (ID: domtextbox) numer mieszkania (ID: miesztextbox) kod pocztowy (ID: kodtextbox) miejscowośd (ID: miejsctextbox)

2 5.Dodaj kontrolki do kontrolki nowyview. 6. Dodaj kontrolki do kontrolki wycieczkiview Ustaw kursor wewnątrz kontrolki View o ID="nowyView". Wpisz Wzrost: i w nowej linii dodaj kontrolkę TextBox o ID="wzrostTextBox". Wpisz Rama roweru: i dodaj kontrolkę DropDownList o ID="ramaDropDownList". Kliknij Smart Tag i wybierz Edit Items. Dodaj elementy o następujących właściwościach, po czym zamknij okno: tekst wyświetlany: Damska, wartośd: D tekst wyświetlany: Męska, wartośd: M tekst wyświetlany: Nie ma znaczenia, wartośd: N, zaznaczenie Wpisz Marka: i dodaj kontrolkę ListBox o ID="markaListBox". Kliknij Smart Tag i wybierz Edit Items. Dodaj elementy o następujących właściwościach, po czym zamknij okno: tekst wyświetlany: Cateye, wartośd: C tekst wyświetlany: Giant, wartośd: G tekst wyświetlany: Kenda, wartośd: Ke tekst wyświetlany: Kross, wartośd: Kr tekst wyświetlany: Nie ma znaczenia, wartośd: N, zaznaczenie Wpisz Rodzaj roweru: i dodaj kontrolkę ListBox o ID="rodzajListBox". Kliknij Smart Tag i wybierz Edit Items. Dodaj elementy o następujących właściwościach, po czym zamknij okno: tekst wyświetlany: Górski, wartośd: G tekst wyświetlany: Miejski, wartośd: M tekst wyświetlany: Szosowy, wartośd: S tekst wyświetlany: BMX, wartośd: B tekst wyświetlany: Dziecięcy, wartośd: D tekst wyświetlany: Nie wiem, wartośd: N, zaznaczenie Wpisz Kwota planowanych wydatków: i dodaj kontrolkę RadioButtonList o ID="cenaRadioButtonList". Dodaj do listy elementy o następujących właściwościach: tekst wyświetlany: Nie ma znaczenia, wartośd: 0, zaznaczenie tekst wyświetlany: do 500 zł, wartośd: 5 tekst wyświetlany: zł, wartośd: 10 tekst wyświetlany: , wartośd: 15 tekst wyświetlany: pow. 1500, wartośd: 20 tekst wyświetlany: Zakres:, wartośd: 1 Poniżej kontrolki cenaradiobuttonlist wpisz od: i dodaj kontrolkę TextBox o ID="odTextBox", a następnie w tej samej linii wpisz do: i dodaj kontrolkę TextBox o ID="doTextBox". Ustaw kursor wewnątrz kontrolki View o ID="wycieczkiView". Wpisz Rodzaj posiadanego roweru: i dodaj kontrolkę ListBox o ID="posiadaListBox". Dodaj do listy elementy o następujących właściwościach: tekst wyświetlany: Górski, wartośd: G tekst wyświetlany: Miejski, wartośd: M tekst wyświetlany: Szosowy, wartośd: S tekst wyświetlany: BMX, wartośd: B tekst wyświetlany: Dziecięcy, wartośd: D tekst wyświetlany: Nie wiem, wartośd: N, zaznaczenie Wpisz Data ostatniej wycieczki i dodaj poniżej kontrolkę Calendar o ID="ostatniaCalendar". Wpisz Data następnej wycieczki: i dodaj poniżej kontrolkę Calendar o ID="nastepnaCalendar".

3 7.Dodaj wspolna czesc końcową. 8. Dodaj podsumowanie ankiety 9. Dodaj kod umożliwiający wybranie odpowiedniej kontrolki View w zależności od parametru wywołania strony 10. Dodaj obsługę wysłania wypełnionej ankiety do serwera Wpisz Ilośd kilometrów średnio na jednej wycieczce: i dodaj kontrolkę TextBox o ID="kmTextBox". Wpisz Poziom umiejętności: i dodaj kontrolkę DropDownList o ID="poziomDropDownList". Dodaj do listy elementy o następujących właściwościach: tekst wyświetlany: Początkujący, wartośd: P tekst wyświetlany: Średniozaawansowany, wartośd: S tekst wyświetlany: Zaawansowany, wartośd: Z Poniżej kontrolki ankietamultiview w nowym wierszu wpisz Preferowany rodzaj kontaktu: i dodaj kontrolkę CheckBoxList o ID="kontaktCheckBoxList". Dodaj do listy elementy o następujących właściwościach: tekst wyświetlany: , wartośd: E tekst wyświetlany: Telefon, wartośd: T tekst wyświetlany: Osobisty, wartośd: O Poniżej dodaj kontrolkę Button i w oknie Properities w polu Text wpisz Wyświetl, a w polu (ID) wyswietlbutton. W kontrolce View o ID="Podsumowanie" w widoku Design napisz Dziękujemy za wypełnienie ankiety i wstaw odnośnik do strony głównej. Odnośniki W widoku Design dwukrotnie kliknij formularz lub otwórz plik Ankieta.aspx.cs. W metodzie Page_Load dodaj kod sprawdzający, czy strona nie jest po komunikacji zwrotnej. Jeśli nie, to prezentowany jest pierwszy widok kontrolki mainmultiview oraz, w zależności od parametru wywołania, odpowiedni widok kontrolki ankietamultiview: if (!IsPostBack) { mainmultiview..setactiveview(ankietaglowna); if (Request.QueryString["view"] == "nowy") ankietamultiview.setactiveview(nowyview); else if (Request.QueryString["view"] == "wycieczki") ankietamultiview.setactiveview(wycieczkiview); else Response.Redirect("~/Default.aspx"); } Dwukrotnie kliknij kontrolkę Button o ID="wyslijButton". Visual Studio otworzy edytor kodu strony i umieści kursor w metodzie wyslijbutton_click. Do metody dodaj kod aktywujący widok Podsumowanie w kontrolce o ID="mainMultiView": mainmultiview.setactiveview(podsumowanie); Zapisz zmiany i przetestuj działanie strony.

4 UWAGA W PLIKU WEB CONFIG NALEŻY UMIESCIC DODATKOWY KOD. <configuration> <appsettings> <add key="validationsettings:unobtrusivevalidationmode" value="none" /> </appsettings> <system.web> <compilation debug="true" targetframework="4.5.2" /> <httpruntime targetframework="4.5.2" /> </system.web> 1.Dodaj kontrolki sprawdzajace, czy pole zostało wypełnione 2. Dodaj kontrolke wyswietlajaca informacje o bledach 3. Dodaj kontrolki sprawdzające poprawność wpisanych danych za pomocą wyrazen regularnych </configuration> Do wcześniej utworzonego formularza Ankieta.aspx w widoku Design wstaw obok kontrolki imietextbox kontrolkę RequiredFieldValidator z okna Toolbox (kategoria Validation). Wybierz dodaną kontrolkę i w oknie Properties: w polu ControlToValidate z listy rozwijanej wybierz imietextbox w polu ErrorMessage wpisz Pole Imię jest wymagane Wstaw obok kontrolki textbox kontrolkę RequiredFieldValidator Wybierz dodaną kontrolkę i w oknie Properties: w polu ControlToValidate z listy rozwijanej wybierz textbox w polu ErrorMessage wpisz Pole jest wymagane Zapisz zmiany i przetestuj możliwośd wysłania formularza bez wypełnienia informacji w polach Imię i . Do formularza Ankieta.aspx na koncu wstaw kontrolkę ValidationSummary z okna Toolbox (kategoria Validation). Zapisz zmiany i przetestuj możliwośd wysłania formularza bez wypełnienia informacji w polach Imię i . Do formularza Ankieta.aspx obok kontrolki textbox wstaw kontrolkę RegularExpressionValidator z okna Toolbox (kategoria Validation) i w oknie Properties: w polu ControlToValidate z listy rozwijanej wybierz textbox w polu ErrorMessage wpisz Nieprawidłowy adres w polu ValidationExpression wciśnij przycisk [ ], a następnie z listy Standard expressions wybierz Internet address Obok kontrolki teltextbox wstaw kontrolkę RegularExpressionValidator. W oknie Properties: w polu ControlToValidate z listy rozwijanej wybierz teltextbox w polu ErrorMessage wpisz Nieprawidłowy numer telefonu podaj same cyfry Obok kontrolki wzrosttextbox wstaw kontrolkę RegularExpressionValidator. W oknie Properties: w polu ControlToValidate z listy rozwijanej wybierz wzrosttextbox

5 w polu ErrorMessage wpisz Nieprawidłowy wzrost podaj wzrost w centymetrach Obok kontrolki odtextbox wstaw kontrolkę RegularExpressionValidator. W oknie Properties: w polu ControlToValidate z listy rozwijanej wybierz odtextbox w polu ErrorMessage wpisz Nieprawidłowa kwota podaj zaokrąglając do pełnych złotych Obok kontrolki dotextbox wstaw kontrolkę RegularExpressionValidator. W oknie Properties: w polu ControlToValidate z listy rozwijanej wybierz dotextbox w polu ErrorMessage wpisz Nieprawidłowa kwota podaj zaokrąglając do pełnych złotych 4. Dodaj kontrolki sprawdzające poprawność wpisanych danych za pomocą porównania wartości. Zapisz zmiany i przetestuj możliwośd wysłania formularza z błędami w kontrolkach. Obok kontrolki wzrosttextbox wstaw kontrolkę RangeValidator z okna Toolbox (kategoria Validation) i w oknie Properties: w polu ControlToValidate z listy rozwijanej wybierz wzrosttextbox w polu ErrorMessage wpisz Podaj poprawny wzrost w zakresie od 50 do 250 cm w polu MaximumValue wpisz 250 w polu MinimumValue wpisz 50 w polu Type wybierz Integer Obok kontrolki dotextbox wstaw kontrolkę CompareValidator. W oknie Properties: w polu ControlToCompare z listy rozwijanej wybierz odtextbox w polu ControlToValidate z listy rozwijanej wybierz dotextbox w polu ErrorMessage wpisz Wartośd w polu Do musi byd większa od wartości w polu Od w polu Operator z listy rozwijanej wybierz GreaterThan w polu Type wybierz Integer W metodzie wyslijbutton_click zamien istniejącą linię następującym kodem: if (IsValid) { mainmultiview.setactiveview(podsumowanie); } Zapisz zmiany i przetestuj możliwość wysłania formularza z błędami w kontrolkach.

6 1. Dodaj katalog pliki graficzne reklam 2. Okresl lokalizacje plików reklam oraz adresy na które wskazuja 3. Dodaj kontrolke AdRotator Do projektu dodaj katalog Adv. Kliknij katalog prawym przyciskiem myszy i wybierz Add Existing Item, a następnie wskaż pliki Adv1.png i Adv2.png. Wciśnij Add. Kliknij prawym przyciskiem myszy katalog Adv i wybierz Add New Item. Z okna Templates wybierz XML File, a następnie w polu Name wpisz adv.xml. Do pliku dodaj następujący fragment: <Advertisements> <Ad> <ImageUrl>~/Adv/Adv1.png</ImageUrl> <NavigateUrl> <AlternateText>Strona główna ASP.NET </AlternateText> </Ad> <Ad> <ImageUrl>~/Adv/Adv2.png</ImageUrl> <NavigateUrl> <AlternateText>Projekty OpenSource - CodePlex </AlternateText> </Ad> </Advertisements> Zapisz zmiany. Do wcześniej utworzonego formularza Ankieta.aspx na początku strony wstaw kontrolkę AdRotator i w oknie Properties w polu AdvertisementFile wpisz ~/Adv/adv.xml. Zapisz zmiany i przetestuj funkcjonalnośd wyświetlania reklam na stronie.