1. Wstaw linki do ankiet na stronie glownej aplikacji Na stronie

1. Wstaw linki do ankiet na stronie glownej aplikacji Na stronie

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:
— e-mail (ID: emailTextBox)
— telefon (ID: telTextBox)
— ulica (ID: ulicaTextBox)
— numer domu (ID: domTextBox)
— numer mieszkania (ID: mieszTextBox)
— kod pocztowy (ID: kodTextBox)
— miejscowośd (ID: miejscTextBox)
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: 500 – 1000 zł, wartośd: 10
— tekst wyświetlany: 1000 - 1500, 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".
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: E-Mail, 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.
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>
</configuration>
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
• 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
— w polu Text wpisz *
• Wstaw obok kontrolki emailTextBox kontrolkę RequiredFieldValidator
• Wybierz dodaną kontrolkę i w oknie Properties:
— w polu ControlToValidate z listy rozwijanej wybierz emailTextBox
— w polu ErrorMessage wpisz Pole E-mail jest wymagane
— w polu Text wpisz *
• Zapisz zmiany i przetestuj możliwośd wysłania formularza bez wypełnienia
informacji w polach Imię i E-Mail.
• 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 E-Mail.
• Do formularza Ankieta.aspx obok kontrolki emailTextBox wstaw kontrolkę
RegularExpressionValidator z okna Toolbox (kategoria Validation) i w oknie
Properties:
— w polu ControlToValidate z listy rozwijanej wybierz emailTextBox
— w polu ErrorMessage wpisz Nieprawidłowy adres E-Mail
— w polu Text wpisz *
— w polu ValidationExpression wciśnij przycisk […], a następnie z listy
Standard expressions wybierz Internet e-mail 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 — w polu Text wpisz *
— w polu ValidationExpression wpisz: ([0-9]+)$
• Obok kontrolki wzrostTextBox wstaw kontrolkę RegularExpressionValidator.
W oknie Properties:
— w polu ControlToValidate z listy rozwijanej wybierz wzrostTextBox
— w polu ErrorMessage wpisz Nieprawidłowy wzrost – podaj wzrost w
centymetrach
— w polu Text wpisz *
— w polu ValidationExpression wpisz: ([0-9]+)$
• 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
— w polu Text wpisz *
— w polu ValidationExpression wpisz: ([0-9]+)$
• 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
— w polu Text wpisz *
— w polu ValidationExpression wpisz: ([0-9]+)$
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 Text wpisz *
— 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 Text wpisz *
— 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.
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>http://www.asp.net</NavigateUrl>
<AlternateText>Strona główna ASP.NET </AlternateText>
</Ad>
<Ad>
<ImageUrl>~/Adv/Adv2.png</ImageUrl>
<NavigateUrl>http://www.codeplex.com</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.