Technologie internetowe
Wykład 6
Kontrolki ASP.NET
Aplikacja ASP.NET Web Forms
Interfejs użytkownika budowany z
kontrolek
Filozofia obiektowa
Sterowanie zdarzeniami
Szybkie tworzenie aplikacji (RAD)
1
Kontrolki serwerowe
Osadzane w postaci specjalizowanych
znaczników
Programowane po stronie serwera
Adaptacyjny rendering
Wykorzystują najnowsze standardy
HTML
Każda kontrolka serwerowa musi mieć
niepowtarzalne ID
Strona Web Form ASP.NET
<%@ Page Language="C#" %>

KOD PO STRONIE SERWERA

0

2
Osadzanie kodu skryptowego we wnętrzu strony
<%@ Page Language="C#" %>

Text="Oblicz" />

Osadzanie kodu skryptowego w oddzielnym pliku
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Strona.aspx.cs" Inherits="Strona" %>





Strona.aspx

onclick="btnOblicz_Click" />

using System; Strona.aspx.cs

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;
public partial class Strona2 : System.Web.UI.Page
{
Zalety:
protected void btnOblicz_Click(object sender, EventArgs e)
" rozdzielenie części programistycznej
{
double a = Convert.ToDouble(txtBok.Text);
od wizualnej
lblPole.Text = Convert.ToString(a * a);
" ułatwienie pracy w zespole
}
}
3
Metody obsługi zdarzenia
Obiekt generujący zdarzenie (np. btnOblicz)
Argumenty zdarzenia
Nazwa metody (dowolna)
(dodatkowe informacje)
void btnOblicz_Click(object sender, EventArgs e)
{
double a = Convert.ToDouble(txtBok.Text);
lblPole.Text = Convert.ToString(a * a);
}
Kontrolki HTML
Znaczniki HTML uzupełnione o atrybuty
ID i runat="server
Programowane po stronie klienta i
serwera
Obsługują style CSS
Posiadają kolekcję Attributes
pozwalającą modyfikować ich atrybuty w
skrypcie serwerowym
4
Kontrolka HTML - input
<%@ Page Language="C#" %>

Kontrolka HTML - body
%@ Page Language="C#" %>

5
Kontrolka Label
" Kontrolka Label wyświetla statyczny tekst
" Podstawowe właściwości:
" Text  treść tekstu
" Font  czcionka tekstu
" BackColor  kolor tła
" ForeColor  kolor teksu
ForeColor="#0000CC">
Hello
Kontrolka TextBox
" Kontrolka TextBox wyświetla pole tekstowe
" Podstawowe właściwości:
" Text  treść początkowa lub tekst wpisany przez użytkownika
" Font  czcionka tekstu
" BackColor  kolor tła
" ForeColor  kolor teksu
" TexMode  jedna linia, wiele linii lub hasło
" AutoPostBack  automatyczne powiadomienie serwera o zmianie
" Zdarzenie:
" TextChanged




6
Kontrolka Button
" Kontrolka Button wyświetla przycisk inicjujący akcję na serwerze
" Podstawowe właściwości:
" Text  treść tekstu
" Font  czcionka tekstu
" BackColor  kolor tła
" ForeColor  kolor teksu
" Zdarzenie:
" Click


Przykład
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Kula.aspx.cs" Inherits="_Kula" %>



Kula.aspx

using System;
Kula.aspx.cs
public partial class _Kula : System.Web.UI.Page
{
protected void btnOblicz_Click(object sender, EventArgs e)
{
double r = Convert.ToDouble(txtPromien.Text);
double V = 4.0 / 3.0 * Math.Pow(r, 3);
lblObjetosc.Text = V.ToString("F2");
}
7
Kontrolki list
ListBox
DropDownList Wspólne właściowści:
" Items  kolekcja elementów listy
CheckBoxList
" SelectedIndex  numer wybranego elementu
RadioButtonList
" SelectedValue  wartość wybranego elementu
BulletedList
" AutoPostBack  automatyczne powiadomienie serwera
" BackColor
" ForeColor
" Font
Wspólne zdarzenie:
" SelectedIndexChange
Kontrolka ListBox

Katowice
Kolekcja Items
Sosnowiec
Bytom


Katowice
Sosnowiec
Bytom

function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
8
Kontrolka DropDownList

Katowice
Kolekcja Items
Sosnowiec
Bytom


Katowice
Sosnowiec
Bytom

Kontrolka RadioButtonList

Katowice
Kolekcja Items
Sosnowiec
Bytom

Katowice

Sosnowiec

Bytom

9
Przykład
<%@ Page Language="C#" AutoEventWireup="true" CodeFile= Kolory.aspx.cs" Inherits="_Kolory" %>

Kolory.aspx
onselectedindexchanged="rblKolory_SelectedIndexChanged">
Czerwony
Niebieski
Zielony

using System;
Kolory.aspx.cs
public partial class _Kolory : System.Web.UI.Page
{
protected void rblKolory_SelectedIndexChanged(object sender, EventArgs e)
{
cialo.Style.Add("background-color", rblKolory.SelectedValue);
}
}
Kontrolka CheckBoxList

Katowice
Kolekcja Items
Sosnowiec
Bytom

Czerwony

Niebieski

Zielony

10
Kontrolka ListBox - Multiple

Czerwony
Kolekcja Items
Niebieski
Zielony


Czerwony
Niebieski
Zielony

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

Z czego składa się samochód?

Koła
Wiosła
Śmigło
Silnik






using System;

public partial class _Test : System.Web.UI.Page

{
protected void rblKolory_SelectedIndexChanged(object sender, EventArgs e)
{
// cialo.Style.Add("background-color", rblKolory.SelectedValue);
}
protected void btnSprawdz_Click(object sender, EventArgs e)
{
if (cblPytanie.Items[0].Selected && !cblPytanie.Items[1].Selected
&& !cblPytanie.Items[2].Selected && cblPytanie.Items[3].Selected)
lblOcena.Text = "Dobrze";
else
lblOcena.Text = "Żle";
}
}
11
Kontrolka BulletedList

Czerwony
Kolekcja Items
Niebieski
Zielony

• Czerwony


• Niebieski


• Zielony

Kolekcja Items
Właściwości:
" Count  ilość elementów
Metody:
" Add(element)  dodaj element na końcu listy
" Insert(pozycja, element)  wstaw element na wybranej pozycji
" RemoveAt(pozycja)  usuń element z wybranej pozycji
" Clear()  usuń wszystkie elementy
" IndexOf(element)  znajdz
pozycje elementu lub zwróć -1
12
Przykład
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Dane.aspx.cs"
Inherits="Dane" %>

Dana:



Text="Dodaj pierwszy" />
Text="Dodaj ostatni" />


using System;

public partial class Dane : System.Web.UI.Page

{
protected void btnPierwszy_Click(object sender, EventArgs e)
{
lstDane.Items.Insert(0, txtDana.Text);
}
protected void btnOstatni_Click(object sender, EventArgs e)
{
lstDane.Items.Add(txtDana.Text);
}
protected void btnUsun_Click(object sender, EventArgs e)
{
if (lstDane.SelectedIndex!=-1) lstDane.Items.RemoveAt(lstDane.SelectedIndex);
}
}
Kontrolka LinkButton
" Kontrolka LinkButton wyświetla przycisk inicjujący akcję na serwerze
" Podstawowe właściwości:
" Text  treść tekstu
" Font  czcionka tekstu
" BackColor  kolor tła
" ForeColor  kolor teksu
" Zdarzenie:
" Click
Oblicz
Oblicz
13
Kontrolka ImageButton
" Kontrolka ImageButton wyświetla przycisk inicjujący akcję na serwerze
" Podstawowe właściwości:
" Text  treść tekstu
" Font  czcionka tekstu
" BackColor  kolor tła
" ForeColor  kolor teksu
" ImageUrl  adres pliku grafiki
" Zdarzenie:
" Click


Przykład
using System;
public partial class Mapa: System.Web.UI.Page
{
protected void ibtnLogo_Click(object sender, System.Web.UI.ImageClickEventArgs e)
{
lblWspolrzedne.Text = "("+e.X + "," + e.Y + ")";
}
}
14
Kontrolka Image
" Kontrolka Image wyświetla grafikę
" Podstawowe właściwości:
" ImageUrl  adres pliku grafiki
" AlternativeText  tekst  dymka


Kontrolka ImageMap
" Kontrolka Image wyświetla grafikę
" Podstawowe właściwości:
" ImageUrl  adres pliku grafiki
" AlternativeText  tekst  dymka
" HotSpot  kolekcja obszarów aktywnych
ImageUrl="~/logo.png" onclick="imapLogo_Click">
X="60" Y="60" />
PostBackValue="Róg" />
NavigateUrl="http://www.polsl.pl" Right="110" Top="20" />



15
Przykład
using System;
public partial class Mapa: System.Web.UI.Page
{
protected void imapLogo_Click(object sender, ImageMapEventArgs e)
{
lblObszar.Text = e.PostBackValue;
}
}
Kontrolka Literal
" Kontrolka Label wyświetla statyczny tekst
" Podstawowe właściwości:
" Text  treść tekstu
" Mode  włączenie lub wyłączenie enkodowania HTML

Piotr

<b>Piotr</b>
16
Kontrolka CheckBox
" Kontrolka CheckBox wyświetla statyczny tekst
" Podstawowe właściwości:
" Text  treść tekstu
" Font  czcionka tekstu
" BackColor  kolor tła
" ForeColor  kolor teksu
" Checked  stan
" AutoPostBack


Student
Kontrolka RadioButton
" Kontrolka CheckBox wyświetla statyczny tekst
" Podstawowe właściwości:
" Text  treść tekstu
" Font  czcionka tekstu
" BackColor  kolor tła
" ForeColor  kolor teksu
" Checked  stan
" GroupName
" AutoPostBack
Text="Katowice" />

Katowice
17
Kontrolka Table


Imię
Nazwisko


Jan
Kowalski

Imię	Nazwisko
Jan	Kowalski

Kontrolki MultiView i View
" Kontrolka MultiView jest kontenerem dla zakładek View
" Podstawowe właściwości:
" ActiveViewIndex  numer aktualnie wyświetlanej zakładki








Informacje o Katowicach
18
Kontrolka Calendar
" Kontrolka Calendar wyświetla stronę kalendarza i pozwala wybrać datę
" Podstawowe właściwości:
" SelectedDate  wybrana przez użytkownika data
" SelectionMode  tryb wyboru (dzień, tydzień, miesiąc)
" SelectedDates  kolekcja wybranych dat

Kontrolka AdRotator
" Kontrolka AdRotator wyświetla baner reklamowy
" Podstawowe właściwości:
" AdvertisementFile  nazwa sterującego pliku XML
19