Kurs: Core Web Application Technologies
Modul: Serverske kontrole
Autor: Marko Stojićević
Naziv jedinice: HTML serverske kontrole
Materijali vezani uz ovu lekciju:
-
Test html serverske kontrole -
HTML serverske kontrole (PDF dokument)
Šta su HTML kontrole
HTML kontrole predstavljaju odgovarajuće HTML Tag-ove koji se renderuju od strane veb browser-a. Podrazumeva se da ove kontrole nisu raspložive za kod na strani servera. Da bi se omogućila interakcija koda sa HTML kontrolama potrebno je dodati atribut runat="server“ prilikom definisanja kontrole, ali se u tom slučaju peporučuje upotreba ASP.NET serverskih kontrola. HTML kontrole nalaze se u HTML sekciji Toolbox-a. Mogu se prevlačiti kako u dizajn modu, tako i u izvorišnom modu.
Vrste HTML kontrola
Div kontrola (renderuje se kao div Tag). Horizontal Rule kontrola predstavlja <hr /> tag tj. horizontalnu liniju koja se proteže po širini veb strane. Image kontrola se renderuje kao HTML <img> tag, Table kontrola predstavlja odgovarajuću HTML tabelu. Input(Text) kontrola, (Input)RadioButton, (Input)CheckBox, Input(Button), Input(Submit) i Select kontrola se koriste za interakciju sa korisnikom i detaljno će biti obrađene.
(Input)Button kontrola
Vrsta dugmeta se specificira atributom Type unutar Input Tag-a. Ako je type="reset", radi se o reset dugmetu, tj. dugmetu koje resetuje sadržaj kontrola na HTML formi. Ako je type="button”, radi se o klasičnom HTML dugmetu za koje se mogu implementirati događaji. Ako je type="submit”, klik na takvo dugme vrši slanje HTML forme do veb servera tj. prosleđuje formu.
<input id="Reset1" type="reset" value="reset" style="width: 44px" />
<br />
<input id="Button1" type="button" value="button" /><br />
<br />
<input id="Submit1" type="submit" value="submit" /><br />
U primeru upotrebe HTML dugmeta, ono je konvertovano u serversku kontrolu. Za dugme je definisan serverski događaj Button2_ServerClick i dva klijentska događaja onmouseover i onmouseout.
<button id=Button2 onServerClick="Button2_ServerClick"
style="font: 8pt verdana; background-color:lightgreen; border-color:black; height:30; width:100"
onmouseover="this.style.backgroundColor='yellow'"
onmouseout="this.style.backgroundColor='lightgreen'"
runat="server“ >
Click me
</button>
Input(Text) i Input(Password) kontrole
Kada se za input HTML kontrolu specificira type="text", radi se o kontroli za unos teksta. Ako se za input HTML kontrolu specificira type="password", radi se o kontroli za unos teksta, pri čemu je tekst koji se unosi maskiran. U primeru je definisano i dugme koje vrši prosleđivanje forme, za koje je definisan serverski događaj Submit1_ServerClick. Ukoliko je uneta vrednost u tekst polje ASP.NET, prelazi se na stranu Ulaz.aspx, u suprotnom se na HTML strani ispisuje poruka.
Probajte ponovo korišćenjem span kontrole.
Unesi ime
<input id="Text1" type="text" runat="server" />
<br />
<br />
Unesi sifru
<input id="Password1" style="width: 147px" type="password" runat="server" />
<br />
<br />
<input id="Submit1" type="submit" value="Prijava" onserverclick="Submit1_ServerClick" runat="server" /><br />
<span id="Span1" style="color:red" runat=server></span>
protected void Submit1_ServerClick(object sender, EventArgs e)
{
if (Password1.Value != "ASP")
Span1.InnerHtml = "Probajte ponovo";
else
Server.Transfer(“Ulaz.aspx");
}
HTML Check box kontrola
Kada se za input kontrolu specificira atribut type="checkbox", radi se o Check box kontroli. Da bi joj se pristupalo iz serverskog koda, dodat je atribut runat="server". Stanje Check box kontrole ispituje se korišćenjem svojstva Checked. Ukoliko na formi postoji više Check box-ova, tada u istom trenutku može biti čekirano više od jednog Check box-a.
<script runat="server">
protected void Submit1_ServerClick(object sender, EventArgs e)
{
if (Checkbox1.Checked)
Span1.InnerHtml = "Check box je selektovan";
else
Span1.InnerHtml = "Check box nije selektovan";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Checkbox1" type="checkbox" runat="server" />
CheckBox1<br />
<br />
<input id="Submit1" runat="server" type="submit" value="Klikni" onserverclick="Submit1_ServerClick" /><br />
<span id="Span1" style="color:red" runat=server></span>
</div>
</form>
</body>
</html>
HTML Radiobutton kontrola
Kada se za Input kontrolu specificira atribut type="radio", radi se o radio dugmetu. U jednom trenutku samo jedno radio dugme može biti selektovano.
<<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Radio1" runat="server" type="radio" />Opcija1<br />
<br />
<input id="Radio2" runat="server" type="radio" />Opcija 2<br />
<br />
<input id="Radio3" runat="server" type="radio" />Opcija 3<br />
<br />
<br />
<input id="Submit1" runat="server" type="submit" value="Klikni“
onserverclick="Submit1_ServerClick" /><br />
<br />
<br />
<span id="Span1" style="color:red" runat=server></span>
</div>
</form>
</body>
</html>
Unutar klik događaja za dugme se određuje koje je od radio dugmadi na formi selektovano i na osnovu toga se ispisuje poruka na veb strani posredstvom Span kontrole.
protected void Submit1_ServerClick(object sender, EventArgs e)
{
if(Radio1.Checked)
Span1.InnerHtml = "Radio dugme 1 je selektovano";
if (Radio2.Checked)
Span1.InnerHtml = "Radio dugme 2 je selektovano";
if (Radio3.Checked)
Span1.InnerHtml = "Radio dugme 3 je selektovano";
}
Select HTML kontrola
Predstavlja Drop down (padajuću) listu. Prevlačenjem ove kontrole na fomu kreira se <select> Tag. Stavke liste specificiraju se korišćenjem Tag-a <option>.
<select id="SelectColor" style="width: 153px" runat="server">
<option>SkyBlue</option>
<option selected>LightGreen</option>
<option>Gainsboro</option>
<option>LemonChiffon</option>
</select>
Podrazumevano selektovana stavka specificira se korišćenjem ključne reči Selected. Ukoliko se ne specificira podrazumevno selektovana stavka, tada će to biti prva stavka u listi.
protected void Submit1_ServerClick(object sender, EventArgs e)
{
Span1.Style["background-color"] = SelectColor.Value;
}
protected void Button1_ServerClick(object sender, EventArgs e)
{
SelectColor.Items.Add(TextBoja.Value);
}
Postoji još jedan način kreiranja Drop down liste.
<select id="Select1" style="width: 146px" runat="server">
Najpre se kreira ArrayList kolekcija, zatim se dodaju stavke u kolekciju i na kraju se ArrayList objekat proglasi za izvor podataka naše Drop down liste. Da bi se podaci prikazali, poziva se metoda DataBind().
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
ArrayList lista = new ArrayList();
lista.Add("Programiranje");
lista.Add("Menadzment");
lista.Add("Kompjuterske nauke");
Select1.DataSource = lista;
Select1.DataBind();
}
}
Input(File) kontrola
Koristi se u procesu otpremanje fajla na veb server. Kada se ovakva kontrola “prevuče” na formu, kreira se Input Tag sa atributom type=“file”.
U primeru, tekst polje Text1 služi da se fajl koji se otprema sačuva pod drugim imenom. Otpremanje fajla vrši se u temp folderu na veb serveru na primer C:Documents and Settingskorisnik1Local SettingsTemp. Fajlu koji se otprema pristupa se preko svojstva PostedFile. Korišćenjem metode SaveAs vrši se smeštanje fajla na veb server.
protected void Button1_Click(object sender, EventArgs e)
{
if (File1.PostedFile != null)
{
if (Text1.Value == "")
{
Text1.Value = File1.PostedFile.FileName;
}
Span1.InnerHtml = File1.PostedFile.FileName + "<br/>";
string filepath = Path.Combine(Path.GetTempPath(), Path.GetFileName(Text1.Value));
// upload fajla
try
{
File1.PostedFile.SaveAs(filepath);
Span1.InnerHtml += "Upload fajla izvrsen uspesno <b>" + filepath + "</b>
na web serveru";
}
catch (Exception exc) {
Span1.InnerHtml += "Greska pri uploadu fajla <b>" + filepath + "</b><br>"+exc.ToString();
}
}
}
HTML Table kontrola
Koristi se za kreiranje HTML tabele. HTML tabela može da sadrži slike, kontrole ili druge tabele u svojim ćelijama. Glavna upotreba HTML tabele je za definisanje izgleda (Layout) strane. Može se kreirati u bilo kom alatu (npr. Front Page) i ubaciti u aspx stranu.
Na slici su dati osnovni pojmovi vezani za HTML tabelu. HTML tabela se može kreirati i izborom opcije Table > InsertTable.
HTML Image i InputImage
Prevlačenjem Image kontrole na fomu kreira se Img Tag za koga treba definisati Src atribut koji predstavlja putanju gde se slika nalazi. Ovakva kontrola koristi se za prikaz slike na veb strani. Takođe je moguće definisati Input Tag, a da se definiše atribut type=image čime se dobija slika na koju se može kliknuti.
<form id="form1" runat="server">
<div>
<input type=image id="InputImage1" src="images/mango.jpg"
OnServerClick="Button1_Click" runat="server"><br />
<input type=image id="InputImage2" src="images/mango.jpg"
onmouseover="this.src='images/banana.jpg';"
onmouseout="this.src='images/mango.jpg';"
OnServerClick="Button2_Click"
runat="server“ >
<br />
<br />
<img id="IMG1" runat="server" src="Images/slika.gif" style="width: 97px; height: 78px" /><br />
<span id=Span1 runat=server />
</div>
</form>
