Ziua 04

Ziua 4
1
 Tipuri de controale server
 HTML și formatarea documentelor
 Structura unei aplicații ASP.NET
 Structura unei pagini ASP
 Controale ASP
 Cerințe: în tot ceea ce urmează secțiunile de cod “roșii”
trebuie personalizate de fiecare participant la curs

2
 Avantaje/dezavantaje C#
◦ Viteză, ușurință la partea vizuală
 C# - compilat sau interpretat?
 Controale vizuale
◦ Proprietăți, metode
3
Există două tipuri de controale server:
 Html – corespund controalelor standard
HTML; trebuie să aibă id
 Web
Exemplu: <p id = "output" runat="server"/>.
4
 Când scrieţi cod server-side pentru
controalele server HTML de tip input (text,
button, checkbox, radioButton) puteţi folosi
proprietatea value pentru a accesa valoarea
introdusă de utilizator
 Proprietatea InnerText reprezintă textul

cuprins între tag-urile de deschidere
respectiv închidere ale unui control Html, iar
proprietatea InnerHtml reprezintă marcajele
Html cuprinse între tag-urile de deschidere
respectiv închidere ale controlului Html.
5
 Controalele server Web oferă mai multe
funcţionalităţi programabile decât cele HTML
 Aceste controale pot corespunde mai multor
tag-uri HTML, şi pot include cod javascript.
Sunt cuprinse între tag-urile <asp> </asp>.
 De exemplu, un control Web pentru
introducerea datelor de către utilizator este
textbox: <asp:TextBox ID="TextBox1"
runat="server"></asp:TextBox>
6
 1. User-ul scrie adresa unei pagini web. Acest lucru înseamnă
o cerere a browser-ului web către server, prin intermediul
metodei HTTP GET. Pe server, pagina rulează pentru prima
dată, executându-se şi codul C# existent.
 2. Rezultatul este o pagină Html care este trimisă browser-
ului.
 3. User-ul poate introduce date sau apăsa un buton, şi pagina
este trimisă înapoi server-ului. Dacă utilizatorul accesează un
link, se încarcă o altă pagină, şi nici o prelucrare nu este
efectuată de pagina iniţială.
 4. Pagina este trimisă către browser prin intermediul metodei
HTTP POST. În ASP.NET această acţiune se numeşte PostBack.
 5. Pe server-ul web, pagina rulează din nou, şi sunt prelucrate
informaţiile introduse de către utilizator în browser.
 6. Rezultatul este trimis browser-ului, şi astfel se reia ciclul.
7
Page event life cycle refers to the series of events that occur when
an ASP.NET page is requested
1. Page initialization
2. Load
3. Validation
4. Postback event handling
5. Rendering
Page request Web server
6. Page unloading
8
 Init – se iniţializează fiecare control server
 Load – se execută la fiecare cerere a paginii
 Render – se generează codul html ce va fi
trimis browser-ului
 UnLoad – sunt eliberate resursele folosite.
9
 HTML reprezintă scheletul oricărei pagini Web
 Nu este un limbaj de programare
 Este un limbaj descriptiv
 Head - Body
 http://www.w3schools.com/html/
 Cerințe: modificați exemplele următoare
10
<html>
<head><title>Exemplu</title></head>
<body bgcolor=gray leftmargin="100"
topmargin="50">
<body >
<p>Linie orizontala de culoare albastra si grosime 2
<hr color=blue size=3>
<p><font face="Arial" color="red" size="4">
Textul este scris cu fontul "Arial", culoare rosie si
marime 7.
<p><i>Am inserat o imagine</i><img src="i7.gif"
border=5>
</body>
</body>
</html> 11
 Realizați o tabelă (3x2)
<table border="1">
<tr><td>row 1, cell 1</td>
<td>row 1, cell 2</td></tr>
<tr><td>row 2, cell 1</td>
<td>row 2, cell 2</td></tr>
</table>
<body>
<h3 align=left >tabel</h3>
<table border=2 bgcolor=gray>
<tr><td rowspan=3>HTML</td><td>TABELE</td></tr>
<tr><td>FORMULARE</td><td bgcolor=red>ASP</td></tr>
<tr><td>CADRE</td><td bgcolor=red>Visual Web DevExpress
2008</td></tr>
</table></body></html>
12
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-
align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-
color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-
align:center;">
Copyright © 2011 W3Schools.com</td>
</tr>
</table>
</body>
</html>
13
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-
color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>
<div id="content" style="background-
color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-
align:center;">
Copyright © 2011 W3Schools.com</div>
</div>
</body>
</html>
14
<form>
First name: <input type="text" name="firstname" /><br />
Last name: <input type="text" name="lastname" />
</form>
<form>
Password: <input type="password" name="pwd" />
</form>
<form>
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</form>
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have
a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have
a car
</form>
<form name="input" action="html_form_action.asp"

method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
15
 Stiluri (css - Cascading Style Sheets)
◦ Extern
◦ Intern
◦ Inline
 http://www.w3schools.com/css/
16
mystyle.css
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“1.gif");}
<head>
<link rel="stylesheet"
type="text/css"
href="mystyle.css" />
</head>
<body>
<p>Formatare cu ajutorul
stilurilor interne</p>
<hr>
</body>
17
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-
image:url("1.gif");}
</style>
</head>
<body>
<p>Formatare cu ajutorul
stilurilor interne</p>
<hr>
</body>
18
 <p style="color:sienna;margin-
left:20px">This is a paragraph.</p>
19
 ASP.NET este un set de tehnologii care ne permit
crearea de aplicaţii web (foarte complexe)
 Este evoluţia de la Microsoft Active Server Pages

(ASP)
 Se insistă pe un model de dezvoltare OOP
20
 Reduce considerabil timpul de dezvoltare al
aplicaţiilor web faţă de alte tehnologii
 Beneficiază de suportul platformei de dezvoltare

Microsoft .NET
 Este extrem de simplu să dezvoltăm aplicaţii

mici, de genul magazinelor online, al aplicaţiilor
care sunt pur şi simplu un ”front-end” pentru o
bază de date, sau al site-urilor personale
21
 Orice pagină ASP.NET presupune două
componente:
 partea de interfaţă (controalele care vor fi
vizualizate de către utilizator)
 codul .NET care va fi executat pe server atunci
când se face o cerere către pagina respectivă
(numit şi code behind). Codul poate fi scris
folosind limbajul C# sau Visual Basic .NET.
22
 Fisierele au extensia .aspx (pentru script) și
.aspx.cs pentru cele ce contin codul (code
behind)
 În cazul în care se găseşte direct în pagină,

codul este cuprins între tag-urile <script> si
</script>, cu atributul runat = ”server”.
23
24
25
26
27
 partea de interfaţă - controalele care vor fi
vizualizate de către utilizator
 codul .NET - care va fi executat pe server
atunci când se face o cerere către pagina
respectivă (numit şi code behind)
 Script-urile ASP.NET sunt fişiere text cu

extensia .aspx, care conţin controale HTML
sau ASP
28
29
30
31
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected int Fact(int n)
{
if (n == 1)
return 1;
else
return Fact(n - 1) * n;
}
protected void Page_Load(object sender, EventArgs e)

{
Label1.Text = "Fact(6)=" + Fact(6);
}
}
}
32
Denumire control Proprietate/Metoda La ce poate fi folosită
Label Text – p Afișare de rezultate
TextBox Text – p Citire de date
Afișare rezultate
Button Click – m La executarea unei
metode
Toate Visible – p Controlul poate fi sau
nu vizibil (true/false)
Toate Enabled - p Controlul poate fi sau
nu accesat de
utilizator (true/false)
33
34
35
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs"
Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="Nume" runat="server"></asp:TextBox>
</div>
<p>
<asp:TextBox ID="Prenume" runat="server"></asp:TextBox>
</p>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
<p>
<asp:Label ID="Label1" runat="server"></asp:Label>
</p>
</form>
</body>
</html>
36
37
 Cand apasăm pe “Stergere” se șterge numele
de pe ecran
38
protected void Button2_Click(object sender,
EventArgs e)
{
Label1.Text = "";
Nume.Text = "";
Prenume.Text = "";
}
39
40
 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs"
Inherits="WebApplication1.WebForm2" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title></title>
 </head>
 <body id="mainBody" runat="server">
 <form id="form1" runat="server">
 <div id="mainDiv" runat="server">
 <asp:HyperLink ID="link" href="http://www.microsoft.com" runat="server"
target="_blank">Microsoft</asp:HyperLink>
 </div>
 <p>
 <asp:Button ID="Button1" runat="server" Text="Center" Type="submit"
 Onclick="change"/>
 </p>
 </form>
 </body>
 </html>
41
42
 Un control web poate fi creat fie în modul
design (din fereastra Toolbox), fie în pagina
.aspx folosind tag-urile <asp> </asp>.
Exemplu:
<asp:Label ID="Label1" runat="server"

Text="Hello world!"></asp:Label>
43
Valorile proprietăţilor controalelor web pot fi
setate prin trei moduri:
1. în modul design din fereastra Properties
2. în sursă paginii (fişierul .aspx)
3. prin intermediul codului C# executat pe
server
44
 Permite afişarea unui şir de caractere în
pagina web. Textul este reţinut în
proprietateaText:
<asp:Label ID="Label1" runat="server" Font-

Bold="True" Font-Size="Large“
ForeColor="#0066FF" Text="Evenimente
butoane">
</asp:Label>
45
 Aceste controale creează butoane de submit
pentru pagina web.
 Proprietatea Text reţine şirul de caractere

afişat pe buton.
◦ LinkButton afişează un hyperlink în locul unui

text
◦ ImageButton este reprezentat sub forma unei
imagini. Proprietatea ImageUrl defineşte calea
către fişierul care conţine imaginea.
46
 Afişează o casetă de dialog în care
utilizatorul poate introduce date. Şirul de
caractere introdus, este reţinut de
proprietatea Text.
 Proprietatea TextMode defineşte modul în

care utilizatorul poate introduce datele:
◦ SingleLin;
◦ MultiLine;
◦ Password.
47
 Controlul CheckBox permite crearea unei
casete de marcare. Pentru a lucra cu mai
multe casete la nivel unitar, se foloseşte
controlul CheckBoxList.
 Controlul CheckBox are proprietatea
Checked, care are valoarea True dacă s-a
bifat caseta sau False în caz contrar. Şirul de
caractere afişat în dreptul casetei, este
reţinut de proprietatea Text.
48
 Controlul CheckBoxList are asociat o
proprietate numită Items. Items este un vector
care conţine valorile din controlul
CheckBoxList. La rândul său are proprietatea
Count ce returnează numărul de valori din listă.
Fiecare element poate fi accesat prin
intermediul unui indice.
 Pentru a verifica dacă a fost bifată o anumită

casetă, se foloseşte proprietatea Selected, care
poate avea valorile True sau False.
49
 Afişează un buton radio.
 Dintr-un grup de butoane radio, doar unul

poate fi selectat la un moment dat.
◦ Proprietatea Text a acestui control, defineşte şirul
de caractere ce apare în dreptul controlului.
◦ Pentru a grupa mai multe butoane radio, se
foloseşte proprietatea GroupName.
50
 Afişează un grup de butoane radio. Ca şi
CheckBoxList, acest control are proprietăţile
RepeatDirection, RepeatLayout şi Items.
 Pentru fiecare opţiune din listă se poate

asocia o valoare de tip şir de caractere, prin
intermediul atributului value.
51
 Afişează o listă numerotată.
 Proprietatea BulletStyle defineşte tipul de

marcator, şi poate avea valorile: NotSet,
Numbered, LowerAlpha, UpperAlpha,
LowerRoman,UpperRoman, Disc, Circle,
Square.
52
 Afişează o imagine în pagina web.
Proprietatea ImageUrl defineşte calea către
fişierul care conţine imaginea. Textul afişat
de browser atunci când user-ul
poziţionează mouse-ul peste imagine, este
reţinut de proprietatea AlternateText.
<asp:Image ID="Image1" runat="server"

ImageUrl="~/images/movie1.jpeg"
Height="406px" Width="265px"
AlternateText="Jaws" />
53
 Permite selectarea unei opţiuni dintr-o listă
derulantă.
 DropDownList are proprietăţile Item şi

SelectedValue.
 Proprietatea SelectedItem returnează obiectul

selectat din lista derulantă.
54
 Este un control folosit pentru afişarea unui hyperlink
în pagina web.
 Are proprietăţile Text pentru şirul de caractere ce va fi
afişat în pagină, respectiv NavigateUrl pentru adresa
http.
 Modul de deschidere a link-ului în browser, poate fi
specificat prin intermediul proprietăţii Target, care are
valorile: _blank, _parent, _search, _self, _top.
<asp:HyperLink ID="HyperLink1" runat="server"

NavigateUrl="http://www.microsoft.com"
Target="_blank">www.microsoft.com
</asp:HyperLink>
55
 Aceste controale permit construirea unui tabel
Html. Controlul Table are proprietatea Rows, care
defineşte liniile tabelului (controale TableRow).
 La rândul său, Rows are proprietatea Cells

(controale TableCell), care defineşte celulele liniei.
 Şirul de caractere care va fi afişat în celulă este

definit de proprietatea Text a controlului
TableCell.
56
 Controlul MultiView acţionează ca un
container pentru controale de tip View.
 Controalele View sunt la rândul lor părinţii

altor controale web.
 Proprietatea ActiveIndexView contine indexul

pentru View-ul ce va fi afisat.
 Indexul View incepe cu 0 (zero).
57
 ASP.Net pune la dispoziţie controale
predefinite pentru validarea datelor introduse
în pagina web.
 Controalele de validare au în comun
proprietăţile:
ErrorMessage – defineşte mesajul de eroare care

va fi afişat dacă datele nu sunt introduse corect.
ControlToValidate – defineşte controlul pentru
care se aplică validarea.
58
 Verifică dacă în caseta de text asociată s-au
introdus date de către utilizator.
 Se foloseşte pentru formularele de date în

care câmpurile sunt obligatorii.
59
 Verifică dacă datele introduse în caseta de
text asociată fac parte dintr-un anumit
interval.
 Proprietăţile MinimumValue şi MaximumValue

permit introducerea limitelor intervalului.
 Tipul valorilor din interval poate fi specificat

prin intermediul proprietăţii Type.
60
 Se foloseşte pentru validarea datelor
caretrebuie să respecte un anumit format,
cum ar fi numere de telefon, adrese de email,
etc. Proprietatea ValidationExpression
permite alegerea unei expresii predefinite.
61
 Compară valoarea introdusă în controlul asociat, cu o
valoare predefinită.
 Proprietatea ValueToCompare reţine această valoare.
 Tipul de comparare este definit de proprietatea

Operator, valorile sale posibile fiind: Equal, NotEqual,
GreaterThan, GreaterThanEqual, LessThan,
LessThanEqual, DataTypeCheck.
 Tipul valorilor comparate este specificat de

proprietatea Type.
62
 Programatorul poate defini reguli proprii de
validare, prin intermediul controlului
CustomValidator.
63
64
 Proprietățile:
◦ ControlToValidate (TextBox1,…)
◦ ErrorMessage (Numele este obligatoriu!)
◦ ForeColor (Red)
65
66
protected void Button1_Click1(object sender, EventArgs e)
{
Euro.Text = (float.Parse(Ron.Text) * float.Parse(valEuro.Text)).ToString();
}
protected void Button2_Click(object sender, EventArgs e)

{
Ron.Text = (float.Parse(Euro.Text) / float.Parse(valEuro.Text)).ToString();
}
67
1. Realizați în ASP .Net problemele realizate în
ziua a 3-a la .Net Programare vizuală
2. Incepeți lucrul la Tema de Duminică (partea

ASP .Net)
68
 Programarea Web cu ASP .Net – Microsoft
 http://msdn.microsoft.com/en-
us/aa336522.aspx
 http://msdn.microsoft.com/en-
us/library/aa286485.aspx
69

Ziua 04

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Ziua 04

Încărcat de

Drepturi de autor:

Formate disponibile

Ziua 4

 HTML și formatarea documentelor

 Structura unei aplicații ASP.NET

 Structura unei pagini ASP

 Cerințe: în tot ceea ce urmează secțiunile de cod “roșii”

trebuie personalizate de fiecare participant la curs

 C# - compilat sau interpretat?

Exemplu: <p id = "output" runat="server"/>.

 Proprietatea InnerText reprezintă textul

 Cerințe: modificați exemplele următoare

<form name="input" action="html_form_action.asp"

 Este evoluţia de la Microsoft Active Server Pages

 Se insistă pe un model de dezvoltare OOP

 Beneficiază de suportul platformei de dezvoltare

 Este extrem de simplu să dezvoltăm aplicaţii

 În cazul în care se găseşte direct în pagină,

 Script-urile ASP.NET sunt fişiere text cu

protected void Page_Load(object sender, EventArgs e)

Label1.Text = "Fact(6)=" + Fact(6);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

<asp:TextBox ID="Nume" runat="server"></asp:TextBox>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<asp:Label ID="Label1" runat="server"

<asp:Label ID="Label1" runat="server" Font-

 Proprietatea Text reţine şirul de caractere

◦ LinkButton afişează un hyperlink în locul unui

 Proprietatea TextMode defineşte modul în

 Pentru a verifica dacă a fost bifată o anumită

 Dintr-un grup de butoane radio, doar unul

 Pentru fiecare opţiune din listă se poate

 Proprietatea BulletStyle defineşte tipul de

<asp:Image ID="Image1" runat="server"

 DropDownList are proprietăţile Item şi

 Proprietatea SelectedItem returnează obiectul

<asp:HyperLink ID="HyperLink1" runat="server"

 La rândul său, Rows are proprietatea Cells

 Şirul de caractere care va fi afişat în celulă este

 Controalele View sunt la rândul lor părinţii

 Proprietatea ActiveIndexView contine indexul

 Indexul View incepe cu 0 (zero).

ErrorMessage – defineşte mesajul de eroare care

 Se foloseşte pentru formularele de date în

 Proprietăţile MinimumValue şi MaximumValue

 Tipul valorilor din interval poate fi specificat

 Proprietatea ValueToCompare reţine această valoare.

 Tipul de comparare este definit de proprietatea

 Tipul valorilor comparate este specificat de

protected void Button2_Click(object sender, EventArgs e)

2. Incepeți lucrul la Tema de Duminică (partea

S-ar putea să vă placă și