Introducere in ASP.NET Controale Web Pagina in ... - Profs.info.uaic.ro

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 1/30
<strong>ASP</strong>.<strong>NET</strong>
<strong>Introducere</strong> <strong>in</strong> <strong>ASP</strong>.<strong>NET</strong>
<strong>Controale</strong> <strong>Web</strong>
Pag<strong>in</strong>a <strong>in</strong> <strong>ASP</strong>.<strong>NET</strong>
Timpul de viata al pag<strong>in</strong>ii
Procesarea pag<strong>in</strong>ii
<strong>Controale</strong> de tip lista
Structura unei aplicatii <strong>ASP</strong>.<strong>NET</strong>
Bibliografie
Pro <strong>ASP</strong>.<strong>NET</strong> 3.5 <strong>in</strong> C# 2008, Second Edition:
-2007 by Matthew MacDonald and Mario Szpuszta
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 2/30
<strong>ASP</strong>.<strong>NET</strong>
Caracteristici <strong>ASP</strong>.<strong>NET</strong>:
Integrat cu .<strong>NET</strong> Framework
Compilat, nu <strong>in</strong>terpretat
Pag<strong>in</strong>a este compilata cand este accesata prima data.
Multilimbaj
Gazduit de Common Language Runtime
Orientat-obiect
Ruleaza pe orice browser
Usor de configurat si distribuit
Caracteristicile pr<strong>in</strong>cipale ale unei aplicatii web
Aplicatiile web se executa pe server.
Cererile clientului sunt procesate pe server folos<strong>in</strong>d o tehnica numita postback, care
trimite pag<strong>in</strong>a pe server cand sunt <strong>in</strong>depl<strong>in</strong>ite anumite conditii. Dupa ce primeste pag<strong>in</strong>a,
<strong>ASP</strong>.<strong>NET</strong> genereaza evenimentele pe partea de server pentru a notifica codul (a apela
metodele atasate evenimentelor).
Aplicatiile <strong>Web</strong> sunt fara stare.
Dupa ce pag<strong>in</strong>a este retransmisa clientului aceasta este distrusa d<strong>in</strong> memoria
serverului. Exista mecanisme ce asigura o anumita persistenta a datelor, cel mai cunoscut
fi<strong>in</strong>d « view state », ce pastreaza <strong>in</strong>formatia <strong>in</strong> campuri « ascunse » (hidden).
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 3/30
Formulare HTML
In HTML forma cea mai simpla de a trimite date de la client la server o constituie utilizarea
formularelor (tag ). Un formular poate cont<strong>in</strong>e mai multe controale, <strong>in</strong> fapt este un
conta<strong>in</strong>er pentru controale.
Exemplu
Programmer Questionnaire
Enter your first name:&nbsp;
Enter your last name:&nbsp;
You program with:
&nbsp;&nbsp;&nbsp;
C#
&nbsp;&nbsp;&nbsp;
VB .<strong>NET</strong>
Observatie
Acest formular cont<strong>in</strong>e urmatoarele controale: doua TextBox-uri, doua CheckBox-uri si un
Button. Operatia folosita de formular este POST.
Propritatea name a controlului permite accesarea <strong>in</strong>formatiei d<strong>in</strong> control (cod C#).
Pe partea clientului se va afisa pag<strong>in</strong>a:
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 4/30
Cand utilizatorul face clic pe butonul “OK” (textul d<strong>in</strong> buton este Submit), browser-ul
colecteaza <strong>in</strong>formatia d<strong>in</strong> controale, o concateneaza <strong>in</strong>tr-un str<strong>in</strong>g si apoi o trimite serverului
folos<strong>in</strong>d operatia HTTP POST.
Informatia trimisa cont<strong>in</strong>e o serie de perechi nume/valoare separate pr<strong>in</strong> &.
Pentru controalele ce au valori booleene se va transmite numai valoarea « on » cand aceste
controale sunt activate.
Exemplu de <strong>in</strong>formatie transmisa catre server.
FirstName=Matthew&LastName=MacDonald&CS=on&VB=on
Daca schimbam pag<strong>in</strong>a <strong>in</strong> <strong>ASP</strong>.<strong>NET</strong>, putem determ<strong>in</strong>a valoarea d<strong>in</strong> control folos<strong>in</strong>d s<strong>in</strong>taxa
C#.
str<strong>in</strong>g firstName = FirstName.Text;
sau ceva de genul:
str<strong>in</strong>g firstName = Request.Form["FirstName"];
Observatie
In exemplul de mai sus FirstName (cu sau fara acolade) este numele controlului.
In <strong>ASP</strong>.<strong>NET</strong> toate controalele sunt plasate <strong>in</strong>tr-un s<strong>in</strong>gur tag , tag marcat cu atributul
runat="server". Controlul este un conta<strong>in</strong>er de controale.
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 5/30
Anatomia unei aplicatii <strong>ASP</strong>.<strong>NET</strong>
Toate pag<strong>in</strong>ile web d<strong>in</strong>tr-o aplicatie web partajeaza aceleasi resurse de memorie, date globale
la nivel de aplicatie, date la nivel de sesiune, date d<strong>in</strong> cache.
Toate pag<strong>in</strong>ile web d<strong>in</strong>tr-o aplicatie web partajeaza aceleasi setari de configurare. Pot fi
realizate setari diferite pentru subdirectoare <strong>in</strong>dividuale ale aceluiasi director virtual.
Toate aplicatiile web genereaza evenimente globale la nivel de aplicatie <strong>in</strong> diferite etape ale
executiei. Se foloseste fisierul Global.asax.
Directorul virtual este structura de baza pentru o aplicatie <strong>ASP</strong>.<strong>NET</strong>.
Aplicatiile <strong>ASP</strong>.<strong>NET</strong> pot cont<strong>in</strong>e urmatoarele :
Pag<strong>in</strong>i <strong>Web</strong> (fisiere .aspx) .
Servicii <strong>Web</strong> (fisiere .asmx) – comunicare cu aplicatii de pe alte platforme. Servicii
WCF.
Fisiere ce cont<strong>in</strong> cod (code-beh<strong>in</strong>d)
Fisier de configurare (web.config).
global.asax – cod pentru evenimente generate la nivel de aplicatie.
Alte componente.
Structura de directoare a aplicatiei
Fiecare aplicatie trebuie sa aiba o structura b<strong>in</strong>e planificata de directoare si subdirectoare.
In plus fata de acestea, <strong>ASP</strong>.<strong>NET</strong> def<strong>in</strong>este urmatoarele directoare :
Director
Descriere
B<strong>in</strong>
Cont<strong>in</strong>e assemblies .<strong>NET</strong> precompilat (<strong>in</strong> mod abisnuit DLL)
folosite de aplicatia <strong>ASP</strong>.<strong>NET</strong>.
App_Code
Cont<strong>in</strong>e fisiere cod sursa ce sunt compilate <strong>in</strong> mod d<strong>in</strong>amic pentru a
fi folosite <strong>in</strong> aplicatie. Codul compilat nu apare <strong>in</strong> directorul b<strong>in</strong>.
Daca se foloseste modelul de proiect si nu cel <strong>Web</strong> Site atunci acest
director nu este necesar.
App_GlobalResources Ment<strong>in</strong>e resursele globale accesibile fiecarei pag<strong>in</strong>i d<strong>in</strong> aplicatie.
App_LocalResources Resurse numai pentru o pag<strong>in</strong>a dedicata.
App_<strong>Web</strong>References Ment<strong>in</strong>e refer<strong>in</strong>te la serviciile <strong>Web</strong> folosite de aplicatie. Fisiere
WSDL si documente UDDI (Universal Description Discovery and
Integration).
App_Data
Rezervat pentru baze de date si fisiere XML.
App_Browsers Cont<strong>in</strong>e def<strong>in</strong>itiile browser-ului memorat <strong>in</strong> fisiere XML.
App_Themes
Cont<strong>in</strong>e « themes » folosite de aplicatie.
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 6/30
Fisierul aplicatie global.asax
Aici se scriu metodele si codul pentru tratarea evenimentelor globale la nivel de aplicatie.
Clientul nu acceseaza acest fisier.
Fisierul este optional.
Acest fisier nu cont<strong>in</strong>e tag-uri HTML sau <strong>ASP</strong>.<strong>NET</strong>, ci metode cu un nume predef<strong>in</strong>it.
Evenimentele aplicatiei
Evenimente ce apar la fiecare cerere.
Evenimente ce apar sub anumite conditii.
Evenimente ce apar la fiecare cerere
Application_Beg<strong>in</strong>Request() : apelata la startul fiecarei cereri.
Application_AuthenticateRequest() : apelata <strong>in</strong>a<strong>in</strong>te de autentificare.
Application_AuthorizeRequest() : apelata dupa ce utilizatorul a fost autentificat, e
momentul de a verifica drepturile urilizatorului. Se pot atribui privilegii speciale <strong>in</strong> aceasta
etapa.
Application_ResolveRequestCache() : folosita impreuna cu cache. Pag<strong>in</strong>a se ia d<strong>in</strong>
cache fara a executa alt cod.
Application_AquireRequestState() : apelata <strong>in</strong>a<strong>in</strong>tea determ<strong>in</strong>arii <strong>in</strong>formatiilor
despre sesiune si folosita pentru a popula colectia Session.
Application_PreRequestHandlerExecute() : apelata <strong>in</strong>a<strong>in</strong>te ca HTTP sa execute cererea.
Application_ReleaseRequestState() : apelata cand <strong>in</strong>formatia specifica despre sesiune
este pe cale de a fi serializata d<strong>in</strong> colectia Session astfel <strong>in</strong>cat aceasta este disponibila pentru noua
cerere.
Application_UpdateRequestCache() : apelata <strong>in</strong>a<strong>in</strong>te ca <strong>in</strong>formatia sa fie adaugata <strong>in</strong>
cache.
Application_EndRequest() : apelata la sfarsitul cererii dar <strong>in</strong>a<strong>in</strong>te ca obiectele sa fie
elim<strong>in</strong>ate. Loc bun pentru codul de curartare.
Evenimente ce nu se lanseaza la fiecare cerere
Application_Start(): start aplicatie. Se poate scrie cod pentru <strong>in</strong>itializare.
Session_Start(): start o noua sesiune. Initializare <strong>in</strong>formatii specifice utilizatorului.
Application_Error(): cand apare o eroare <strong>in</strong> aplicatie.
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 7/30
Session_End(): la term<strong>in</strong>area sesiunii unui client. Se apeleaza numai daca folosim o sesiune
<strong>in</strong>-proces (mod InProc). Cod pentru curatare.
Application_End(): apelata <strong>in</strong>a<strong>in</strong>te ca aplicatia sa se term<strong>in</strong>e.
Application_Disposed(): Se poate verifica daca resursele critice au fost eliberate. Ceea ce
t<strong>in</strong>e <strong>in</strong> general de cod unmanaged.
Configurare <strong>ASP</strong>.<strong>NET</strong>
Se realizeaza pr<strong>in</strong> <strong>in</strong>termediul fisierelor XML.
Acestea nu sunt niciodata blocate si sunt usor de accesat si replicat (cu existenta drepturilor
necesare).
Fisierul mach<strong>in</strong>e.config
Se gaseste <strong>in</strong> directorul C:\w<strong>in</strong>dows\Microsoft.Net\Framework\”versiune_net”\Config.
Este b<strong>in</strong>e comentat si poate fi folosit pentru crearea unui fisier de configurare propriu.
Fisierul web.config
Fiecare aplicatie web mosteneste setari d<strong>in</strong> mach<strong>in</strong>e.config si fisierul web.config d<strong>in</strong> radac<strong>in</strong>a
directorului virtual.
Scheletul de baza al fisierului web.config este:
In <strong>ASP</strong>.<strong>NET</strong> 3.5 s-au adaugat sectiuni noi la fisierul de configurare.
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 8/30
Modelul Event <strong>in</strong> <strong>ASP</strong>.<strong>NET</strong>
Acest model descrie modul de tratare al evenimentelor diverselor controale cont<strong>in</strong>ute <strong>in</strong>
. Adaugam controale la formularul web si apoi decidem ce evenimente sa tratam.
Observatie
Modelul este asemanator cu cel dat de W<strong>in</strong>dows Forms, dar lucreaza diferit. Numarul
evenimentelor implementate de controale este redus <strong>in</strong> comparatie cu W<strong>in</strong>dows Forms.
1. Pag<strong>in</strong>a ruleaza pentru prima data.
<strong>ASP</strong>.<strong>NET</strong> creaza pag<strong>in</strong>a si controalele d<strong>in</strong> pag<strong>in</strong>a, executa codul de <strong>in</strong>itializare si apoi
pag<strong>in</strong>a este returnata clientului. Obiectul Page si controalele ce le cont<strong>in</strong>e sunt elim<strong>in</strong>ate
d<strong>in</strong> memorie (sunt distruse).
2. Clientul executa actiuni asupra pag<strong>in</strong>ii (completare controale d<strong>in</strong> pag<strong>in</strong>a, etc.) ce au
ca efect un postback. Pag<strong>in</strong>a este trimisa cu toate datele d<strong>in</strong> form catre server.
3. <strong>ASP</strong>.<strong>NET</strong> <strong>in</strong>tercepteaza pag<strong>in</strong>a returnata si recreaza obiectele d<strong>in</strong> pag<strong>in</strong>a la starea pe
care au avut-o ultima data.
4. <strong>ASP</strong>.<strong>NET</strong> verifica c<strong>in</strong>e a generat postback si apeleaza metoda corespunzatoare acelui
eveniment (de ex. clic pe un buton). In acest moment se executa cod pe server (actualizare
baze de date, etc.) si apoi se modifica obiectele controalelor pentru a reflecta noua
<strong>in</strong>formatie.
5. Pag<strong>in</strong>a este transformata <strong>in</strong> HTML, trimisa clientului si apoi distrusa d<strong>in</strong> server.
Daca pe aceeasi pag<strong>in</strong>a apare un nou postback se reia ciclul de la psul 2.
Postback automat
In <strong>ASP</strong>.<strong>NET</strong> actiunile le genereaza clientul si serverul proceseaza codul
corespunzator. Anumite evenimente cum ar fi miscarea mouse-ului nu sunt tratate implicit.
Nu mai exista acea bucla de mesaje ce caracterizeaza o aplicatie W<strong>in</strong>dow.
Evenimentele sunt regenerate pe partea de server numai dupa ce s-a facut un postback al
pag<strong>in</strong>ii.
Exista controale ce au posibilitatea de a face postback automat, acest lucru <strong>in</strong>semnand ca la
generarea unui eveniment al controlului, cont<strong>in</strong>utul pag<strong>in</strong>ii este trims catre server.
<strong>Controale</strong>le trebuie sa aiba setata proprietatea
AutoPostBack = true
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 9/30
Care e mecanismul AutoPostback
Cand AutoPostBack = true, <strong>ASP</strong>.<strong>NET</strong> foloseste un cod <strong>in</strong> JavaScript pentru a realiza
legatura d<strong>in</strong>tre client si server.
Functia d<strong>in</strong> JavaScript se numeste __doPostBack() ce foloseste doua campuri ascunse pentru
a transmite parametrii:
Codul <strong>in</strong> JavaScript (generat de <strong>ASP</strong>.<strong>NET</strong>) este urmatorul:
<strong>Controale</strong>le ce au AutoPostBack = true vor apela metoda __doPostBack() folos<strong>in</strong>d
atributele “onclick” sau “onchange”.
Observatie
In descrierea d<strong>in</strong> HTML, onclick si onchange apar ca atribute.
Pe partea de control (<strong>in</strong> codul C# scris pentru pag<strong>in</strong>a) acestea sunt evenimente expuse de
control.
View State
De fiecare data cand o pag<strong>in</strong>a este trimisa catre server, acesta recreaza obiectele d<strong>in</strong> pag<strong>in</strong>a
porn<strong>in</strong>d de la def<strong>in</strong>itia acesteia, def<strong>in</strong>itie data <strong>in</strong> fisierul .aspx.
Eventualele modificari ale proprietatilor controalelor sunt luate d<strong>in</strong>tr-un camp “ascuns” ce
pastreaza ultima stare a pag<strong>in</strong>ii. Aceasta <strong>in</strong>formatie constituie ceea ce numeste “view state”
pentru pag<strong>in</strong>a. Informatiile sunt pastrate sub forma de perechi cheie/valoare.
Proprietatea <strong>in</strong> cauza este: EnableViewState = {true, false}.
Observatie
Chiar daca EnableViewState=false, sistemul cont<strong>in</strong>ua sa ment<strong>in</strong>a anumite <strong>in</strong>formatii
despre pag<strong>in</strong>a.
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 10/30
Conformitate cu XHTML
<strong>Controale</strong>le <strong>Web</strong> <strong>in</strong> <strong>ASP</strong>.<strong>NET</strong> sunt conforme cu standardul XHTML 1.1.
<strong>ASP</strong>.<strong>NET</strong> reda controalele folos<strong>in</strong>d marcaj conform cu XHTML, adica sunt respectate
urmatoarele reguli:
Tag si numele atributelor trebuie sa fie “lowercase”.
Toate elementele trebuiesc <strong>in</strong>chise ().
Toate valorile atributelor trebuie sa fie furnizate <strong>in</strong>tre ghilimele (runat="server").
Trebuie folosit id pentru attribute si nu name.
XHTML nu suporta frame si formatare fara CSS.
Urmatoarele controale <strong>ASP</strong>.<strong>NET</strong> pot folosi atributul target:
AdRotator
TreeNode
HyperL<strong>in</strong>k
HyperL<strong>in</strong>kColumn
BulletedList
Def<strong>in</strong>itia tipului de document
Fiecare tip de document XHTML <strong>in</strong>cepe cu un doctype ce def<strong>in</strong>este tipul de XHTML ce va fi
folosit.
In pag<strong>in</strong>a web <strong>ASP</strong>.<strong>NET</strong>, doctype trebuie plasat imediat dupa directiva Page, <strong>in</strong> portiunea de
marcare a pag<strong>in</strong>ii web.
Untitled Page
...
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 11/30
Etapele procesarii formelor web
Etapele <strong>in</strong> tratarea unei pag<strong>in</strong>i (cereri) sunt:
1. Cerere client.
2. Initializare pag<strong>in</strong>a <strong>in</strong> framework.
3. Executie cod <strong>in</strong>itializare.
4. Validare.
5. Tratare evenimente.
6. Raspuns catre client.
7. Stergere obiecte d<strong>in</strong> server (Cleanup).
Initializare pag<strong>in</strong>a <strong>in</strong> framework
Evenimentul Page.Init - metoda Page_Init.
Initializare cod utilizator
Eveniment Page.Load – metoda Page_Load.
Proprietatea IsPostBack furnizeaza <strong>in</strong>formatii despre faptul ca pag<strong>in</strong>a este prima data
accesata sau nu.
Proprietatea IsPostBack = false, la prima cerere a pag<strong>in</strong>ii.
if (!IsPostBack)
{
// Initializare controale la prima tratare a pag<strong>in</strong>ii
FirstName.Text = "Enter your name here";
}
Validare pag<strong>in</strong>a
Proprietatea Page.IsValid.
Tratare evenimente
In acest moment pag<strong>in</strong>a este complet <strong>in</strong>carcata si validata.
Evenimentele <strong>ASP</strong>.<strong>NET</strong> sunt :
Evenimente cu raspuns imediat : clic pe un buton, imag<strong>in</strong>e, l<strong>in</strong>k, etc.
Evenimente de tip Change : schimbare selectie <strong>in</strong>tr-un control sau text <strong>in</strong>tr-un
TextBox. Trebuie sa avem declarat AutoPostBack = true.
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 12/30
Asociere data
Cand folosim controale pentru surse de date, <strong>ASP</strong>.<strong>NET</strong> executa automat update si cereri
asupra sursei de date ca parte a ciclului de viata al pag<strong>in</strong>ii.
Modificarile (<strong>in</strong>sert, update, delete) sunt executate dupa executia tuturor evenimentelor dar
<strong>in</strong>a<strong>in</strong>te de evenimentul Page.PreRender.
Dupa emiterea evenimentului Page.PreRender controalele surse de date executa cererile si
<strong>in</strong>sereaza datele <strong>in</strong> controalele ce folosesc sursa de date.
Cleanup
Eveniment Page.Dispose.
Exemplificare ord<strong>in</strong>e de tratare a evenimentelor unei pag<strong>in</strong>i
Page Flow
In etapa urmatoare adaugam metode pentru evenimentele urmatoare:
Page.Init, Page.Load, Page.PreRender, Page.Unload, si Button.Click.
private void Page_Load(object sender, System.EventArgs e)
{
lblInfo.Text += "Page.Load event handled.";
if (Page.IsPostBack)
{
lblInfo.Text +=
"This is not the first time you've seen this page.";
}
}
private void Page_Init(object sender, System.EventArgs e)
{
lblInfo.Text += "Page.Init event handled.";
}
private void Page_PreRender(object sender, System.EventArgs e)
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 13/30
{
}
lblInfo.Text += "Page.PreRender event handled.";
private void Page_Unload(object sender, System.EventArgs e)
{
// This text never appears because the HTML is already
// rendered for the page at this po<strong>in</strong>t.
lblInfo.Text += "Page.Unload event handled.";
}
Codul pentru evenimentul click al butonului:
protected void Button1_Click(object sender, System.EventArgs e)
{
lblInfo.Text += "Button1.Click event handled.";
}
Pag<strong>in</strong>a este un conta<strong>in</strong>er pentru controalele pe care le cont<strong>in</strong>e. Putem vizualiza controalele
d<strong>in</strong>tr-o pag<strong>in</strong>a folos<strong>in</strong>d urmatorul cod (<strong>in</strong> Page_Load):
foreach (Control control <strong>in</strong> Page.Controls)
{
Response.Write(control.GetType().ToStr<strong>in</strong>g() + " - " +
control.ID + "");
}
Response.Write("");
Clasa Page
Observatie
Toate formularele web sunt <strong>in</strong>stante ale clasei Page.
Cateva proprietati importante ale acestei clase:
Session
Application
Cache
Request ; Request.QueryStr<strong>in</strong>g["id"] ;
Response ; Response.Write() ; Response.Redirect("page.aspx") ;
Response.Redirect(http://...)
Server ; Server.Transfer() ; HtmlEncode ; HtmlDecode ;
UrlEncode ; UrlDecode ; MapPath ;
User
Trace
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 14/30
<strong>Controale</strong> server
<strong>Controale</strong>le server sunt clase <strong>in</strong> .<strong>NET</strong> Framework ce reprez<strong>in</strong>ta elemente vizuale pe un
formular web.
Tipuri de controale server
<strong>Controale</strong> server HTML: clase ce implementeaza elementele standard HTML. Pentru a
schimba un element ord<strong>in</strong>ar HTML <strong>in</strong>tr-un control server trebuie adaugat atributul
runat="server".
<strong>Controale</strong> <strong>Web</strong>: sunt ca si HTML dar mai usor de folosit.
<strong>Controale</strong> avansate: au posibilitatea de a genera mult mai mult markup HTML.
Exemple: controalele Calendar, AdRotator si TreeView.
<strong>Controale</strong> de validare: folosite <strong>in</strong> validarea datelor d<strong>in</strong> alte controale d<strong>in</strong> cadrul pag<strong>in</strong>ii.
<strong>Controale</strong> pentru date: afiseaza o cantitate mare de date (grid, list). Suporta template,
editare, sortare si pag<strong>in</strong>are.
<strong>Controale</strong> de navigare: navigare de la o pag<strong>in</strong>a la alta.
<strong>Controale</strong> Log<strong>in</strong>: pentru autentificare la o baza de date.
Ierarhia controalelor d<strong>in</strong> server
Toate controalele server sunt derivate d<strong>in</strong> clasa Control aflata <strong>in</strong> System.<strong>Web</strong>.UI.
Proprietati importante ale clasei Control
ClientID
- returneaza identificatorul clientului, identificator creat de <strong>ASP</strong>.<strong>NET</strong>.
Controls – returneaza colectia de controale descendente. Colectia Page.Controls
cont<strong>in</strong>e controalele d<strong>in</strong> pag<strong>in</strong>a.
EnableViewState - controlul isi memoreaza starea
ID – ID control
Page – returneaza o refer<strong>in</strong>ta la obiectul pag<strong>in</strong>a ce cont<strong>in</strong>e controlul.
Parent – returneaza o refer<strong>in</strong>ta la par<strong>in</strong>tele controlului.
Visible : bool (true, false).
DataB<strong>in</strong>d() Asociaza controlul si toate controalele descendente la sursa de date specificata.
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 15/30
F<strong>in</strong>dControl() – cauta control dupa nume.
<strong>Controale</strong> <strong>Web</strong>
Clasa de baza <strong>Web</strong>Control derivate d<strong>in</strong> Control.
Proprietati importante
AccessKey
BackColor -
BorderColor -
BorderStyle - Dashed, Dotted, Double, Groove, Ridge, Inset, Outset, Solid, None.
BorderWidth
CssClass
Enabled
Clasele de baza ale controlelor web
<strong>ASP</strong>.<strong>NET</strong>
HTML si proprietati
or
Text, CausesValidation, PostBackUrl,
ValidationGroup.
Event Click.
AutoPostBack, Checked, Text,
TextAlign.
Event CheckedChanged.
FileBytes, FileContent, FileName,
HasFile, PostedFile, SaveAs()
Value
...
ImageUrl, NavigateUrl, Target, Text
AlternateText, ImageAlign, ImageUrl
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 16/30
CausesValidation, ValidationGroup.
Event Click.
HotSpotMode, HotSpots (collection),
AlternateText, ImageAlign, ImageUrl
...
Text, AssociatedControlID
Text, CausesValidation, Validation-
Group, Click event
...
BackImageUrl, DefaultButton,
Group<strong>in</strong>gText, HorizontalAlign,
Scrollbars, Wrap
AutoPostBack, Checked, GroupName,
Text, TextAlign, CheckedChanged event
...
BackImageUrl, CellPadd<strong>in</strong>g,
CellSpac<strong>in</strong>g, GridL<strong>in</strong>es,
HorizontalAlign, Rows (collection)
...
ColumnSpan, HorizontalAlign,
RowSpan, Text, VerticalAlign, Wrap
...
Cells (collection), HorizontalAlign,
VerticalAlign
sau
...
AutoPostBack, Columns, MaxLength,
ReadOnly, Rows, Text, TextMode, Wrap.
Event TextChanged.
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 17/30
Exemplu
Unitati de masura
px – pixeli
% - procent d<strong>in</strong> pag<strong>in</strong>a afisata
Exemplu declarare <strong>in</strong> pag<strong>in</strong>a:
iar d<strong>in</strong> cod:
// Convert the number 300 to a Unit object
// represent<strong>in</strong>g pixels, and assign it.
pnl.Height = Unit.Pixel(300);
// Convert the number 50 to a Unit object
// represent<strong>in</strong>g percent, and assign it.
pnl.Width = Unit.Percentage(50);
Enumerari
In cod se foloseste s<strong>in</strong>taxa C# (BorderStyle.Dashed) iar <strong>in</strong> aspx nu se <strong>in</strong>clude numele
enumerarii:
Culori
In cod enumerarea Color.
In aspx numele culorii.
//C#
ctrl.ForeColor = Color.Red;
//<strong>ASP</strong>.<strong>NET</strong>
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 18/30
Focus
DefaultFocus
Focusul se realizeaza cu ajutorul unei metode JavaScript, <strong>Web</strong>Form.AutoFocus().
Metoda este furnizata <strong>in</strong> mod automat de <strong>ASP</strong>.<strong>NET</strong>.
Codul d<strong>in</strong> aceasta metoda urmareste ideea de mai jos:
function <strong>Web</strong>Form_AutoFocus(focusId) {
// F<strong>in</strong>d the element based on the ID (code differs based on browser).
var targetControl;
if (__nonMSDOMBrowser) {
targetControl = document.getElementById(focusId);
}
else {
targetControl = document.all[focusId];
}
// Check if the control can accept focus or
// conta<strong>in</strong>s a child that can.
var focused = targetControl;
if (targetControl != null && (!<strong>Web</strong>Form_CanFocus(targetControl)) ) {
focused = <strong>Web</strong>Form_F<strong>in</strong>dFirstFocusableChild(targetControl);
}
}
// If there is a valid control, try to apply focus and scroll
// it <strong>in</strong>to view.
if (focused != null) {
try {
focused.focus();
focused.scrollIntoView();
if (w<strong>in</strong>dow.__smartNav != null) {
w<strong>in</strong>dow.__smartNav.ae = focused.id;
}
}
catch (e) {
}
}
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 19/30
Butonul implicit
Butonul implicit executa metoda atasata evenimentului “click” cand s-a apasat tasta Enter.
Este la nivel de pag<strong>in</strong>a web, iar <strong>in</strong> cadrul pag<strong>in</strong>ii poate fi la nivel de Panel.
In se foloseste proprietatea DefaultButton <strong>in</strong> care se specifica ID controlului.
Butonul implicit trebuie sa fie un control ce implementeaza <strong>in</strong>terfata IButtonControl.
<strong>Controale</strong>le web Button, L<strong>in</strong>kButton si ImageButton implementeaza aceasta
<strong>in</strong>terfata.
<strong>Controale</strong>le server HTML nu implementeaza IButtonControl.
Panel cu bare de navigare (scroll)
Controlul Panel are posibilitatea de scroll.
Se foloseste proprietatea ScrollBars = {Vertical, Horizontal, Both, Auto}.
This scrolls.
...
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 20/30
Evenimentul click si butonul ImageButton
Evenimentul click pe acest buton trimite <strong>in</strong> al doilea parametru un obiect
ImageClickEventArgs ce are proprietatile X si Y (coordonatele unde s-a facut clic pe
imag<strong>in</strong>e). Se pot identifica astfel puncte de pe o harta si sa se execute un cod specific zonei.
protected void ImageButton1_Click(object sender,
System.<strong>Web</strong>.UI.ImageClickEventArgs e)
{
lblResult.Text = "You clicked at (" + e.X.ToStr<strong>in</strong>g() +
", " + e.Y.ToStr<strong>in</strong>g() + "). ";
// Check if the clicked po<strong>in</strong>t falls <strong>in</strong> the rectangle described
// by the po<strong>in</strong>ts (20,20) and (275,100), which is the button surface.
}
if ((e.Y < 100) && (e.Y > 20) && (e.X > 20) && (e.X < 275))
{
lblResult.Text += "You clicked on the button surface.";
}
else
{
lblResult.Text += "You clicked the button border.";
}
<strong>Controale</strong>le List
<strong>Controale</strong> ce au ca articole o colectie de obiecte (ListBox, DropDownList, GridView,
etc.).
cont<strong>in</strong>e o colectie de obiecte .
In HTML, tag cu atributul size="1".
cont<strong>in</strong>e o colectie de obiecte .
In HTML, tag cu atributul size="x" unde x este numarul de articole
vizibile.
- al<strong>in</strong>iate <strong>in</strong>tr-o tabela.
o lista statica ordonata sau nu.
In HTML, tag sau .
Se poate folosi si pentru a crea o lista de hyperl<strong>in</strong>k-uri.
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 21/30
Membri
AutoPostBack = true => actioneaza la schimbarea selectiei curente.
Items – returneaza o colectie de articole ListItem.
SelectedIndex – returneaza sau seteaza <strong>in</strong>dexul articolului selectat. Pentru liste ce suporta
selectia multipla trebuie scanata <strong>in</strong>treaga colectie pentru a determ<strong>in</strong>a articolele selectate
(verificare proprietate Selected).
SelectedItem – returneaza o refer<strong>in</strong>ta la prmul articol ListItem selectat.
DataSource - se seteaza la un obiect ce cont<strong>in</strong>e <strong>in</strong>formatii pe care dorim sa le afisam
(DataSet, DataTable sau colectii).
Cand se apeleaza DataB<strong>in</strong>d() lista va fi completata cu obiecte d<strong>in</strong> acea colectie.
DataMember – se foloseste impreuna cu asocierea de date, cand sursa de date cont<strong>in</strong>e mai
mult de o tabela. DataMember <strong>in</strong>dica ce tabela se va folosi.
DataTextField – <strong>in</strong>dica ce proprietate sau camp d<strong>in</strong> sursa de date va fi folosit ca text
pentru articol.
DataValueField – <strong>in</strong>dica ce proprietate sau camp va fi folosit ca valoare pentru articol (nu e afisat
dar poate fi citit <strong>in</strong> cod).
DataTextFormatStr<strong>in</strong>g – seteaza formatarea str<strong>in</strong>gului folosit pentru redarea articolului.
Eveniment: SelectedIndexChanged – la schimbarea selectiei.
<strong>Controale</strong>le de tip List selectabile sunt:
DropDownList
ListBox
CheckBoxList
RadioButtonList.
Exemplu
Option 1
Option 2
Option 1
Option 2
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 22/30
Alte proprietati importante pentru CheckBoxList si RadioButtonList
RepeatLayout - controalele vor fi aranjate <strong>in</strong>tr-o tablela (implicit) sau <strong>in</strong>l<strong>in</strong>e.
Valori posibile: Table sau Flow.
RepeatDirection = {Horizontal, Vertical}
RepeatColumns - numarul de coloane cand RepeatLayout=Table.
CellPadd<strong>in</strong>g, CellSpac<strong>in</strong>g, TextAlign folosite cand RepeatLayout=Table.
Exemplu
Option 1
Option 2
Option 1
Option 2
Option 1
Option 2
Option 1
Option 2
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 23/30
Controlul BulletedList
Este echivalent cu sau .
Articolele se ataseaza la control folos<strong>in</strong>d proprietatea Items.
Proprietati
BulletStyle – determ<strong>in</strong>a stilul de marcare al listei.
Valori posibile:
Numbered, LowerAlpha, UpperAlpha, LowerRoman, UpperRoman, Disc, Circle,
Square, CustomImage (caz <strong>in</strong> care trebuie setata proprietatea BulletImageUrl).
BulletImageUrl -
FirstBulletNumber – seteaza prima valoare d<strong>in</strong> lista (cu care se <strong>in</strong>cepe marcarea
elementelor).
DisplayMode : {Text, L<strong>in</strong>kButton – eveniment clic, HyperL<strong>in</strong>k – textul este un URL}.
Exemplu. Codul pentru tratarea evenimentului clic e scris <strong>in</strong> pag<strong>in</strong>a.
protected void BulletedList1_Click(object sender,
BulletedListEventArgs e)
{
if (e.Index ==0)
{
Image1.ImageUrl = "~/images/audi.png";
}
if (e.Index ==1)
{
Image1.ImageUrl = "~/images/bmw.png";
}
}
Click the name to see the user&#39;s photo
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 24/30
<strong>Controale</strong> pentru validarea <strong>in</strong>trarilor
Validarea se realizeaza atat pe partea de client cat si pe partea de server.
<strong>Controale</strong>le de validare se declara <strong>in</strong> si sunt atasate controalelor de <strong>in</strong>trare. In acest
mod nu mai e necesar sa scriem cod pentru validare atat pe partea de client cat si pe cea de
server.
Daca procesul de validare nu este trecut cu succes, pag<strong>in</strong>a nu este trimisa serverului sau nu
este retransmisa clientului.
- controlul nu trebuie sa fie vid cand pag<strong>in</strong>a este trimisa
serverului.
- controleaza daca valorile asociate controlului sunt <strong>in</strong> <strong>in</strong>tervalul
specificat.
- controleaza daca valoarea asociata controlului se potriveste cu
comparatia specificata – mai mare, mai mic, etc - valoare d<strong>in</strong> alt control sau o constanta.
- controleaza daca valoarea specificata se potriveste cu
expresia regulata specificata.
- validator personalizat. Cod JavaScript pe partea de client, cod C#
pe partea de server.
- arata o s<strong>in</strong>teza a erorilor pentru fiecare camp.
Observatie: Se pot folosi mai multi validatori pentru acelasi camp.
Proprietatea RequiredFieldvalidator. RangeValidator, CompareValidator si
RegularExpressionValidator nu verifica daca controlul este vid si vor returna succes <strong>in</strong> acest
caz. RequiredFieldValidator rezolva problema.
Pentru controalele de tip lista, proprietatea ce se valideaza este Value, care nu e afisata <strong>in</strong>
browser. Va trebui sa folosim atributul Value pentru validare.
Cand proiectam un control web derivat d<strong>in</strong> <strong>Web</strong>Control putem specifica proprietatea ce va fi
validata.
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 25/30
[ValidationProperty("Text")]
public class FancyTextBox : <strong>Web</strong>Control
{...}
Procesul de validare
Proprietatea CausesValidation = {true, false}.
Se poate folosi validarea controalelor pentru a verifica o pag<strong>in</strong>a <strong>in</strong> mod automat cand aceasta
este trimisa la server sau manual <strong>in</strong> cod.
Validarea automata presupune folosirea proprietatii CausesValidation pentru controale.
Daca CausesValidation = false atunci <strong>ASP</strong>.<strong>NET</strong> va ignora validarea controalelor,
pag<strong>in</strong>a va fi returnata si codul de tratare al evenimentelor va rula normal.
Daca CausesValidation = true (valoare implicita), <strong>ASP</strong>.<strong>NET</strong> va valida <strong>in</strong> mod automat
pag<strong>in</strong>a, se valideaza fiecare control d<strong>in</strong> pag<strong>in</strong>a si daca o validare nu se executa cu succes
<strong>ASP</strong>.<strong>NET</strong> va returna pag<strong>in</strong>a cu <strong>in</strong>formatii despre erori (eroare).
Clasa BaseValidator
Membri
ControlToValidate – <strong>in</strong>dica controlul ce va fi validatt.
Display = {Static, Dynamic} – <strong>in</strong>dica modul cum va fi afisata eroarea.
EnableClientScript = {true, false} – daca este validare pe partea de client sau nu. True
implicit.
Enabled = {true, false} – enable / disable validare.
ErrorMessage – mesajul de eroare afisat de ValidationSummary.
Text – textul erorii afisat controlul de validare.
IsValid – determ<strong>in</strong>a daca valoarea asociata controlului de <strong>in</strong>trare este valida sau nu. Poate fi
realizata pe partea de client si pe partea de server.
Observatie
Putem verifica proprietatea Page.IsValid pentru a sti daca toate controalele de <strong>in</strong>trare d<strong>in</strong>
pag<strong>in</strong>a sunt valide.
SetFocusOnError - focus mutat pe campul ce cont<strong>in</strong>e eroarea. Regula: primul control setat,
primul luat <strong>in</strong> considerare.
ValidationGroup – validare pentru anumite controale grupate.
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 26/30
Validate() – metoda revalideaza controalele si actualizeaza proprietatea IsValid.
Controlul RequiredFieldValidator
*
Se va afisa * daca TextBox-ul este vid.
Controlul RangeValidator
*
Controlul CompareValidator
*
sau
Controlul RegularExpressionValidator
*
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 27/30
Memento
Character Escapes Description
Ord<strong>in</strong>ary characters Characters other than .$^{[(|)*+\ match themselves.
\b Matches a backspace.
\t Matches a tab.
\r Matches a carriage return.
\v Matches a vertical tab.
\f Matches a form feed.
\n Matches a newl<strong>in</strong>e.
\ If followed by a special character (one of .$^{[(|)*+\), this character
escape matches that character literal. For example, \+ matches the +
character.
Character Class Description
. Matches any character except \n.
[aeiou] Matches any s<strong>in</strong>gle character specified <strong>in</strong> the set.
[^aeiou] Matches any character not specified <strong>in</strong> the set.
[3-7a-dA-D] Matches any character specified <strong>in</strong> the specified ranges (<strong>in</strong> the
example the ranges are 3–7, a–d, A–D).
\w Matches any word character; that is, any alphanumeric character or the
underscore (_).
\W Matches any nonword character.
\s Matches any whitespace character (space, tab, form feed, newl<strong>in</strong>e,
carriagereturn, or vertical feed).
\S Matches any nonwhitespace character.
\d Matches any decimal character.
\D Matches any nondecimal character.
Us<strong>in</strong>g more advanced syntax, you can specify that a certa<strong>in</strong> character or
class of characters must be present at least once, or between two and six
times, and so on. The quantifiers are placed just after a character or a
range of characters and allow you to specify how many times the preced<strong>in</strong>g
character must be matched (see Table 4-19).
Character Class Description
. Matches any character except \n.
[aeiou] Matches any s<strong>in</strong>gle character specified <strong>in</strong> the set.
[^aeiou] Matches any character not specified <strong>in</strong> the set.
[3-7a-dA-D] Matches any character specified <strong>in</strong> the specified ranges (<strong>in</strong> the
example the ranges are 3–7, a–d, A–D).
\w Matches any word character; that is, any alphanumeric character or the
underscore (_).
\W Matches any nonword character.
\s Matches any whitespace character (space, tab, form feed, newl<strong>in</strong>e,
carriage return, or vertical feed).
\S Matches any nonwhitespace character.
\d Matches any decimal character.
\D Matches any nondecimal character.
Quantifier Description
* Zero or more matches
+ One or more matches
Zero or one matches
{N} N matches
{N,} N or more matches
{N,M} Between N and M matches (<strong>in</strong>clusive)
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 28/30
Controlul CustomValidator
Pe partea de client
function EmpIDClientValidate(ctl, args)
{
// the value is a multiple of 5 if the modulus by 5 is 0
args.IsValid=(args.Value%5 == 0);
}
Pe partea de server, eveniment CustomValidator.ServerValidate:
protected void EmpIDServerValidate(object sender,
ServerValidateEventArgs args)
{
try
{
args.IsValid = (<strong>in</strong>t.Parse(args.Value)%5 == 0);
}
catch
{
// An error is most likely caused by non-numeric data.
args.IsValid = false;
}
}
Pag<strong>in</strong>a .aspx
*
Controlul ValidationSummary
Nu executa actiuni de validare ci prez<strong>in</strong>ta un rezumat al erorilor aparute <strong>in</strong> procesul de
validare.
Daca proprietatea ShowMessageBox = true rezumatul erorilor este afisat pe partea de client
<strong>in</strong>tr-o caseta de dialog JavaScript sau pe pag<strong>in</strong>a daca ShowSummary = true, atentie mai
trebuie setata proprietatea DisplayMode <strong>in</strong> acest d<strong>in</strong> urma caz.
DisplyMode = {S<strong>in</strong>gleParagraph, List, BulletList}.
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 29/30
Folosirea validarilor <strong>in</strong> cod
Pentru a accesa validatorii <strong>in</strong> cod, trebuie iterata colectia Validators a pag<strong>in</strong>ii curente.
protected void Options_Changed(object sender, System.EventArgs e)
{
// Exam<strong>in</strong>e all the validators on the back.
foreach (BaseValidator validator <strong>in</strong> Page.Validators)
{
// Turn the validators on or off, depend<strong>in</strong>g on the value
// of the "Validators enabled" check box (chkEnableValidators).
validator.Enabled = chkEnableValidators.Checked;
// Turn client-side validation on or off, depend<strong>in</strong>g on the
// value of the "Client-side validation enabled" check box
// (chkEnableClientSide).
validator.EnableClientScript = chkEnableClientSide.Checked;
}
// Configure the validation summary based on the f<strong>in</strong>al
// two check boxes.
}
Summary.ShowMessageBox = chkShowMsgBox.Checked;
Summary.ShowSummary = chkShowSummary.Checked;
Exemplu cu folosirea metodei Validate().
Ideea este de a adauga un buton cu CausesValidation=false.
Cand se face clic pe buton se valideaza pag<strong>in</strong>a manual sau se apeleaza metoda Validate() si
se verifica prprietatea IsValid.
protected void cmdOK_Click(Object sender, EventArgs e)
{
// Validate the page.
this.Validate();
if (!this.IsValid)
{
str<strong>in</strong>g errorMessage = "Mistakes found:";
// Create a variable to represent the <strong>in</strong>put control.
TextBox ctrlInput;
// Search through the validation controls.
}
foreach (BaseValidator ctrl <strong>in</strong> this.Validators)
{
if (!ctrl.IsValid)
{
errorMessage += ctrl.ErrorMessage + "";
ctrlInput = (TextBox)this.F<strong>in</strong>dControl(ctrl.ControlToValidate);
errorMessage += " * Problem is with this <strong>in</strong>put: ";
errorMessage += ctrlInput.Text + "";
}
}
lblMessage.Text = errorMessage;
}
Ioan Asim<strong>in</strong>oaei

<strong>ASP</strong>.<strong>NET</strong> 03.03.2014 30/30
<strong>Controale</strong> avansate
Elemente complexe de <strong>in</strong>terfata; sunt controale complet diferite de cele d<strong>in</strong> HTML.
<strong>ASP</strong>.<strong>NET</strong> <strong>in</strong>clude numeroase controale avansate cum ar fi : controale de tip lista, de navigare,
de securitate si controale pentru portaluri web.
Urmatoarele controale nu <strong>in</strong>tra <strong>in</strong> nici una d<strong>in</strong> categoriile de mai sus.
AdRotator: afiseaza bannere def<strong>in</strong>ite <strong>in</strong>tr-un fisier XML.
Calendar: selectie data calendaristica.
MultiView, View, si Wizard: lucreaza asemanator ca Panel si permit comutarea <strong>in</strong>tre
grupurile de controale d<strong>in</strong> pag<strong>in</strong>a.
Substitution: este un placeholder ce permite personalizarea output-ului d<strong>in</strong> <strong>ASP</strong>.<strong>NET</strong>.
Xml: are ca <strong>in</strong>trare un fisier XML si un fisier de stiluri XSLT si afiseaza rezultatul <strong>in</strong> browser.
Ioan Asim<strong>in</strong>oaei