 |
|
 |  |
|
|
| |
 | Biologie | Chimie | Didactica | Fizica | Geografie | Informatica |
| Istorie | Literatura | Matematica | Psihologie |
Ghidul de fata va prezenta pasii necesari pentru a crea o interfata grafica de tip Formular Web cu scopul de a furniza posibilitatea de a efectua operatii CRUD asupra unei tabele, in mod vizual.
Formularul va fi destinat vizualizarii si actualizarii datelor din tabela Facturi (vezi baza de date DBAccess4VB.mdb pe PortalFEAA)
Analizand figura de mai sus, observam elemente si organizare specifice formularelor grafice de editare a datelor stocate in baza de date:
Utilizatorul trebuie sa poata efectua operatii de cautare a inregistrarilor introduse pana in acel moment
In cazul in care doreste modificarea unei inregistrari existente, va trebui sa aiba la dispozitie:
o o zona unde datele pot fi modificate
o o modalitate de a selecta inregistrarea pe care doreste sa o modifice (link-ul Select)
o posibilitatea anularii modificarilor efectuate, daca acestea au fost efectuate in mod eronat (butonul Cancel)
In cazul in care doreste adaugarea unei inregistrari, trebuie sa aiba la dispozitie un buton (Adauga) care va initializa zona de editare cu datele implicite ale unei noi inregistrari
Astfel, pentru cele patru operatii fundamentale, CRUD, formularul delimiteaza doua zone distincte:
a. Zona de navigare asigura operatii de tip READ. Este formata dintr-un tabel ce-i permite utilizatorului sa efectueze urmatoarele operatii:
i. Cautarea unei inregistrari (factura) introduse anterior: poate sorta dupa oricare din campuri si poate folosi elementele de paginare (numerele afisate in partea de jos a tabelului) pentru a vizualiza urmatorul set de inregistrari. A se observa faptul ca inregistrarile sunt afisate cate 10, pentru a asigura o mai buna organizare a paginii.
ii. In cazul in care utilizatorul doreste modificarea sau stergerea unei inregistrari, o va selecta cu ajutorul linkului "Select" de pe prima coloana
b. Zona de editare -ofera posibilitatea efectuarii operatiilor tranzactionale de tip Create,Update,Delete. Este formata din:
i. Un set de obiecte grafice prin intermediul carora utilizatorul va modifica datele pentru fiecare din campurile tabelei - in acest prim exemplu avem doar obiecte simple de tip TextBox. Acestea vor prelua datele inregistrarii selectate de utilizator, din zona de navigare, sau vor fi initializate cu date implicite atunci cand utilizatorul va executa butonul Adauga;
ii. Un set de butoane ce asigura operatiile fundamentale : creare, stergere, salvarea modificarilor si anularea modificarilor;
Deschideti un nou proiect de tip WebApplication si adaugati un nou modul de tip WebForm
Existenta unui obiect de tip Form este obligatori - ca urmare, prima actiune ce trebuie executata : selectati butonul corespunzator<Form/Form>
Urmati pasii sugerati de componenta interactiva pana definiti o sursa de date pe tabela Facturi (la pasul final, executati TestQuery pentru a fi siguri ca datele pot fi extrase din baza de date.
Configurati obiectul Grid-View astfel incat sa prezinte datele dorite. Obligatoriu trebuie specificata cel putin sursa de date (obiectul SQLDataSource creat anterior). Vom bifa si cele trei proprietati:
a) Enable Selection este absolut necesara, avand in vedere ca scenariul nostru presupune ca utilizatorul va trebui sa selecteze cumva o line pentru a modifica apoi datele in zona speciala dedicata editarii datelor.
b) Enable paging va ajuta la afisarea doar a unui subset de inregistrari, pastrand astfel o mai buna ergonomie a paginii
c) Enable Sorting - va activa posibilitatea sortarii datelor dupa diverse coloane, o operatie foarte utila atunci cand un utilizator cauta anumite tranzactii
Dupa configurare, fereastra va arata precum in imaginea de mai jos
Prima coloana va contine obiecte de tip Label (destinate etichetelor campurilor), cealalta va contine componente grafice de editare a valorii atributelor. Pentru editarea datelor unei inregistrari din tabela Facturi vor fi necesare 4 linii (vezi figura de mai jos). In cazul acestui prim test, folosim doar componente de tip text. ID-urile acestor componente vor fi definite astfel: txtNrFact, txtDataFact, txtClient, txtObservatii. Observam ca id-ul este astfel construit incat sa fie usor recunoscut campul din tabela Facturi cu valorile caruia va fi sincronizata componenta grafica respectiva. De altfel, dupa cum vom vedea imediat, aceste id-uri le vom utiliza in diverse secvente de cod prin care controlam comportamentul formularului. Iata de ce este important sa utilizati exact aceste ID-uri.
In figura observam o linie suplimentara in afara celor destinate fiecarui atribut (este vorba de prima linie). Pe aceasta linie gasim cele doua componente care ofera un plus de informatie utilizatorului. Dupa cum spuneam mai devreme, editarea datelor poate fi rezultatul a doua scenarii:
In cazul in care utilizatorul a selectat o factura si modifica datele, atunci pe aceasta prima linie va fi afisata o componenta de tip Label cu indexul inregistrarii (numarul de ordine) in tabelul de navigare din partea de sus a paginii. Astfel, utilizatorul va beneficia de un plus de informatie pentru orientarea mai usoara in pagina.
In cazul in care utilizatorul editeaza datele unei facturi noi (dupa executia butonului Adauga), atunci pe prima linie va fi afisata o componenta de tip Checkbox cu aspect selectat si cu textul "inregistrare noua". ID-ul acestei componente: chkIsNew (va fi utilizat in codul ce implementeaza comportamentul formei)
Cele doua componente de pe prima linie nu vor fi vizibile in acelasi timp, fiind controlate prin secvente specifice de cod sursa pe care-l vom adauga imediat.
In acest moment, formularul nostru este gata, din punct de vedere al proiectarii grafice. O ultima verificare va consta in analiza codului sursa ASPX (selectati tab-ul Source din josul paginii) . Acesta a fost sincronizat automat la fiecare actiune pe care am executat-o in interfata grafica. Cel mai important aspect ce trebuie urmarit in analiza codului sursa este incadrarea tuturor componentelor formularului in containerul formularului: <form></form> (vezi imaginea de mai jos)
Forma poate fi acum lansata in executie - cu fereastra formularului activa, executati Debug/run sau butonul corespunzator din toolbar. Se va deschide browserul de Internet considerat implicit de sistemul de operare, si ar trebui sa regasim pagina web tocmai definita, cu datele incarcate in tabel, precum in figura urmatoare:
Veti
observa, in bara de stare Windows, ca a aparut iconita
specifica serverului web Microsoft-IIS, server care ar trebui sa se
fi instalat o data cu VisualStudio 2008.
Precizare! Secventele de cod prezentate in continuare utilizeaza concepte ADO.NET pentru realizarea de operatii specifice asupra bazei de date. Ca urmare, se recomanda parcurgerea capitolelor corespunzatoare, inainte de a continua!
Vom adauga codul sursa pentru sincronizarea liniei selectate din tabel cu zona de editare. Cand utilizatorul va executa link-ul Select, pe o anumita linie din tabelul de navigare, componentele din zona de editare vor prelua valorile atributelor corespunzatoare pentru linia selectata. In acest fel, (a)valorile vor putea fi modificate si trimise in baza de date cu butonul Save, sau (b) inregistrarea poate fi stearsa.
Ca urmare, trebuie sa definim o procedura de interceptare evenimentului care se declanseaza la selectia link-ului. Obiectul GridView va declansa un eveniment specific - SelectedIndexChanged ori de cate ori utilizatorul va selecta o linie prin intermediul link-ului Select. In sectiunile anterioare, am vazut ca, in Visual Studio 2008, semnatura acestei metode poate fi generata daca procedam la selectia obiectului si a evenimentului ce ne intereseaza, precum in figura urmatoare.
Iata si codul-sursa al acestei metode
Private Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged
'sterge eventualele mesaje de eroare din actiunile anterioare
Me.errorLabel.Text = ''
'gestioneaza modul de afisare al celulei nrCrt
Me.lblIndexSelectat.Text = Me.GridView1.SelectedIndex
Me.chkIsNew.Visible = False
Me.chkIsNew.Checked = False
'obtine valoarea coloanei corespunzatoare cheii primare a liniei slectate din tabel(e prima coloana)
Dim nrFactCurenta As Double
nrFactCurenta = Me.GridView1.SelectedValue
Dim conn As New OleDb.OleDbConnection(Me.SqlDataSource1.ConnectionString)
Try
'extrage din bd inregistrarea corespunzatoare
conn.Open()
Dim cmd As New OleDb.OleDbCommand('select * from facturi where nrfact=@nrfact', conn)
cmd.Parameters.AddWithValue('@nrfact', nrFactCurenta)
Dim reader As OleDb.OleDbDataReader
reader = cmd.ExecuteReader()
'nu folosim structura clasica while : ar trebui sa fie una si numai una inregistrari selectate
'ca urmare,daca useri au sters in mod concurent inregistrarea curenta,
'va apare o eroare si va fi afisata userului
reader.Read()
Me.txtNrFact.Text = reader.Item('nrfact')
Me.txtDatafact.Text = reader.Item('datafact')
Me.TxtClient.Text = reader.Item('codcl')
Me.TxtObs.Text = reader.Item('obs')
reader.Close()
cmd.Dispose()
conn.Close()
Catch ex As Exception
conn.Close()
'mesajul de eroare trebuie sa fie vizibil userului
Me.errorLabel.Text = ex.Message
End Try
End Sub
Asadar, rolul acestei metode este acela de a sincroniza datele afisate de componentele din zona de editare cu linia selectata din tabelul de navigare. Si in acest caz exista o procedura standard de lucru;
a) Ca o preconditie, sursa de date a obiectului GridView (un obiect SQLDataSource, definit in faza de proiectare) trebuie sa includa atributul (sau atributele) ce constituie cheia primara in tabela-sursa din baza de date. Acest aspect este esential pentru a reusi identificarea corecta, in tabela sursa, a inregistrarii pe care utilizatorul a selectat-o, in mod vizual, pentru editare.
b) Intr-o variabila, va fi preluata valoarea aferenta cheii primare pentru inregistrarea selectata. Exista doua modalitati de lucru: utilizarea obiectului SQLDataSource sau direct a componentei grafice, GridView. In exemplul de fata s-a recurs la a doua varianta. Astfel, obiectul GridView ofera o proprietate, SelectedValue, destinata stocarii valorii primei coloane pentru linia pe care s-a executat link-ul Select. Important! Pentru a utiliza aceasta varianta, fraza SQL pentru incarcarea sursei de date SQLDataSource trebuie scrisa in asa fel incat prima coloana sa corespunda cheii primare. Iata secventa care identifica valoarea selectata corespunzatoare cheii primare, avand in vedere cele spuse mai sus:
Dim nrFactCurenta As Double
nrFactCurenta = Me.GridView1.SelectedValue
c) Pe baza acestei valori se executa o operatie ADO specifica pentru extragerea inregistrarii respective din baza de date:
Dim conn As New OleDb.OleDbConnection(Me.SqlDataSource1.ConnectionString)
Try
'extrage din bd inregistrarea corespunzatoare
conn.Open()
Dim cmd As New OleDb.OleDbCommand('select * from facturi where nrfact=@nrfact', conn)
cmd.Parameters.AddWithValue('@nrfact', nrFactCurenta)
Dim reader As OleDb.OleDbDataReader
reader = cmd.ExecuteReader()
d) Apoi, se vor sincroniza datele componentelor grafice de editare. Cum executia acestei fraze SQL cu parametrul corespunzator ar trebuie sa returneze exact o singura inregistrarea (avem filtru pe cheia primara), vom executa secventa specifica de citire a inregistrarii. La nivelul componentelor grafice, vom modifica proprietatea .text, aceasta fiind proprietatea ce pastreaza valoarea afisata de componenta grafica. In mod evident, vom avea grija sa executam o sincronizare corecta a fiecarei componente grafice cu valoarea atributului din tabela la care se refera respectiva componenta vizuala. Iata de ce, in faza de proiectare(vezi paragrafele anterioare), pentru ID-urile acestor componente este bine sa folosim un sablon de genul: <tipcomponenta><denumireCamp>, unde <tipComponenta> este format din trei caractere conform asa numitei "notatii unguresti" (txt - textBox; cmd-commandButton; chk-checkbox etc)
reader.Read()
Me.txtNrFact.Text = reader.Item('nrfact')
Me.txtDatafact.Text = reader.Item('datafact')
Me.TxtClient.Text = reader.Item('codcl')
Me.TxtObs.Text = reader.Item('obs')
e) In final, se inchide conexiunea si se implementeaza codul specific pentru managementul erorilor. In exemplul nostru, obiectul grafic de tip Label, cu ID-ul errorLabel, este utilizat pentru a afisa eventualele erori de executie sau de conversie a datelor. Veti observa functionalitatea specifica a acestuia daca veti selecta o inregistrare cu atributul Obs necompletat. Valoarea null nefiind tratata corespunzator (vezi primele exemple in sectiunea dedicata ADO), va genera o eroare de conversie catre tipul String atunci cand se va incerca sincronizarea cu proprietatea .text a componentei TextBox corespunzatoare.
reader.Close()
cmd.Dispose()
conn.Close()
Catch ex As Exception
conn.Close()
'mesajul de eroare trebuie sa fie vizibil userului
Me.errorLabel.Text = ex.Message
End Try
IMPORTANT! Avand in vedere mecanismul specific de afisare a erorilor, fiecare din metodele ce implementeaza comportamentul formularului trebuie sa asigure, in primul rand, stergerea eventualelor erori aparute la executiile anterioare. Iata de ce metoda incepe cu secventa:
Me.errorLabel.Text = ''
In final, sa remarcam ca, in afara operatiilor standard descrise mai sus, metoda noastra asigura si sincronizarea celor doua componente de pe prima linie din zona de editare destinate indentificarii numarului de ordine al liniei curente aflate in editare sau informarii utilziatorului asupra faptrului ca tocmai adauga o noua inregistrare. In acest scenariu, codul trebuie implementat astfel incat prima varianta sa fie vizibila iar a doua, invizibila.
'gestioneaza modul de afisare al celulei nrCrt
Me.lblIndexSelectat.Text = Me.GridView1.SelectedIndex
Me.chkIsNew.Visible = False
Desi avem un singur buton pentru salvarea modificarilor, exista doua scenarii diferite de implementare:
a) cazul in care utilizatorul modifica o inregistrare existenta (dupa ce a selectat-o pentru editare) - va trebui sa se execute o comanda SQL-UPDATE . In aceasta situatie este important sa controlam corect valoarea cheii primare. In multe aplicatii reale, valoarea cheii primare este automat generata de sistem si utilizatorul poate, cel mult, sa o vizualizeze, nicidecum sa o modifice.
b) Cazul in care utilizatorul a executat o comanda de adaugare a unei inregistrari noi - va trebuie sa executam o comanda SQL-Insert
Amabele scenarii au si aspecte comune, dupa cum se observa in listingul de mai jos:
Protected Sub cmdSave_Click(ByVal sender As Object, ByVal e As EventArgs) Handles cmdSave.Click
Dim stringSQL, obs As String, dataFact As Date
Dim nrfact, codcl As Integer
Try
nrfact = Me.txtNrFact.Text
dataFact = Me.txtDatafact.Text
codcl = Me.TxtClient.Text
obs = Me.TxtObs.Text
Catch ex As Exception
'probleme de conversie - date invalide-->eroare afisata userului
Me.errorLabel.Text = 'Datele de intrare au format invalid! Corectati si incercati din nou'
'Important! executia nu trebuie sa continue
Return
End Try
If Me.chkIsNew.Checked Then
'inregistrare noua - trebuie o cda SQL Insert
stringSQL = 'Insert into Facturi values (@nrfact,@datafact,@codcl,@obs)'
Else
'modificare inregistrare existenta - trebuie o comanda SQL Update
stringSQL = 'Update Facturi set nrfact=@nrfact, datafact=@datafact, codcl=@codcl,obs=@obs where nrfact=@oldnrfact'
End If
Dim conn As New OleDb.OleDbConnection(Me.SqlDataSource1.ConnectionString)
Dim tranzactie As OleDb.OleDbTransaction
Dim x As Boolean
x = IsNothing(tranzactie)
Try
'seteaza parametrii si executa Update intr-o tranzactie
conn.Open()
tranzactie = conn.BeginTransaction()
Dim cmd As New OleDb.OleDbCommand(stringSQL, conn)
cmd.Transaction = tranzactie
cmd.Parameters.AddWithValue('@nrfact', nrfact)
cmd.Parameters.AddWithValue('@datafact', dataFact)
cmd.Parameters.AddWithValue('@codcl', codcl)
cmd.Parameters.AddWithValue('@obs', obs)
If Me.chkIsNew.Checked = False Then
'este update - avem un parametru suplimentar fata de insert
cmd.Parameters.AddWithValue('@oldnrfact', nrfact)
End If
Dim result As Integer
result = cmd.ExecuteNonQuery()
If result = 0 Then
Throw New Exception('Factura cu numarul ' & nrfact & ' nu mai exista! Un alt utilizator a sters intre timp inregistrarea curenta')
End If
tranzactie.Commit()
cmd.Dispose()
conn.Close()
Me.GridView1.DataBind()
Catch ex As Exception
If Not IsNothing(tranzactie) Then
tranzactie.Rollback()
End If
conn.Close()
'afisam mesajul de eroare pt a instiinta utilizatorul
Me.errorLabel.Text = ex.Message
End Try
End Sub
Analizam codul de ma sus prin specificarea secventei de pasi pentru implementarea celor doua scenarii :
a) Validarea datelor introduse. Se declara variabile cu tipuri de date corespunzatoare atributelor tabelei-sursa. Aceste variabile vor prelua, prin conversie, secventele text introduse de utilizatori pe fiecare din componentele grafice de editare. Avand in vedere ca aceste componente "lucreaza" doar cu siruri de caractere, acest prim pas ne va asigura ca datele introduse corespund, in primul rand, tipurilor de date asteptate. In cazul in care apare vreo eroare de conversie, nu mai are sens sa continuam executia metodei si vom introduce secventa de iesire fortata din procedura: return.
Dim stringSQL, obs As String, dataFact As Date
Dim nrfact, codcl As Integer
Try
nrfact = Me.txtNrFact.Text
dataFact = Me.txtDatafact.Text
codcl = Me.TxtClient.Text
obs = Me.TxtObs.Text
Catch ex As Exception
'probleme de conversie - date invalide-->eroare afisata userului
Me.errorLabel.Text = 'Datele de intrare au format invalid! Corectati si incercati din nou'
'Important! executia nu trebuie sa continue
Return
End Try
b) Stabilirea frazei SQL ce va fi executata. In functie de scenariu (modificare sau adaugare de intregistrare), vom avea o fraza SQL-Update sau Insert. IMPORTANT! De remarcat ca ambele fraze SQL vor avea aceiasi parametri (atat Update cat si Insert vor include toate campurile tabelei), doar ca, in cazul comenzii Update va exista un parametru suplimentar pentru clauza WHERE care va trebui sa asigure actualizarea unei singure inregistrari: cea care are aceeasi valoare pe cheia primara cu cea pe care utilizatorul o poate vedea pe forma grafica.
If Me.chkIsNew.Checked Then
'inregistrare noua - trebuie o cda SQL Insert
stringSQL = 'Insert into Facturi values (@nrfact,@datafact,@codcl,@obs)'
Else
'modificare inregistrare existenta - trebuie o comanda SQL Update
stringSQL = 'Update Facturi set nrfact=@nrfact, datafact=@datafact, codcl=@codcl,obs=@obs where nrfact=@oldnrfact'
End If
c) Executia frazei SQL - se va realiza, obligatoriu, intr-o tranzactie. In prealabil se vor seta, evident, parametrii. Tot in aceasta etapa vom implementa si managementul erorilor de executie.
Try
'seteaza parametrii si executa Update intr-o tranzactie
conn.Open()
tranzactie = conn.BeginTransaction()
Dim cmd As New OleDb.OleDbCommand(stringSQL, conn)
cmd.Transaction = tranzactie
cmd.Parameters.AddWithValue('@nrfact', nrfact)
cmd.Parameters.AddWithValue('@datafact', dataFact)
cmd.Parameters.AddWithValue('@codcl', codcl)
cmd.Parameters.AddWithValue('@obs', obs)
If Me.chkIsNew.Checked = False Then
'este update - avem un parametru suplimentar fata de insert
cmd.Parameters.AddWithValue('@oldnrfact', nrfact)
End If
Dim result As Integer
result = cmd.ExecuteNonQuery()
If result = 0 Then
Throw New Exception('Factura cu numarul ' & nrfact & ' nu mai exista! Un alt utilizator a sters intre timp inregistrarea curenta')
End If
tranzactie.Commit()
cmd.Dispose()
conn.Close()
Me.GridView1.DataBind()
Catch ex As Exception
If Not IsNothing(tranzactie) Then
tranzactie.Rollback()
End If
conn.Close()
'afisam mesajul de eroare pt a instiinta utilizatorul
Me.errorLabel.Text = ex.Message
End Try
Metoda ce va implementa comportamentul pentru evenimentul Click al butonului cmdNew are o implementare foarte simpla, avand in vedere ca executia efectiva a frazei Insert-SQL asupra tebelei din baza de date se va realiza intr-un alt scenariu: Save. In esenta, metoda va asigura initializarea obiectelor grafice de ediatre cu valori implicite sau cu valori "Empty String" acolo unde nu exista valori implicite.
Protected Sub cmdNew_Click(ByVal sender As Object, ByVal e As EventArgs) Handles cmdNew.Click
'gestioneaza modul de afisare al celulei nrCrt
Me.lblIndexSelectat.Text = ''
Me.chkIsNew.Visible = True
Me.chkIsNew.Checked = True
Me.chkIsNew.Enabled = False
Me.txtNrFact.Text = ''
Me.txtDatafact.Text = Now() 'data curenta
Me.TxtClient.Text = ''
Me.TxtObs.Text = ''
End Sub
Si aceasta metoda are o implementare simpla, desi avem din nou doua posibile sub-scenarii:
a) daca utilizatorul se afla intr-o sesiune de editare a unei inregistrari noi, metoda nu are altceva de facut decat sa reseteze valorile campurilor
b) daca utilizatorul se afla intr-o sesiune de modificare a unei inregistrari anterior selectate, metoda va trebui sa execute acelasi comportament ca si in cazul scenariului de selectie a unei inregistrari. In acest fel, modificarile locale vor fi inlocuite de valorile originale ale inregistrarii. Implementarea este simpla prin faptul ca vom executa, pur si simplu, metoda ce se executa in cazul scenariului de selectie al inregistrarii. Observati ca parametrii actuali sunt valori Nothing. Metoda se va executa cu succes pentru simplul fapt ca parametrii nu au fost utilizati la implementarea metodei GridView1_SelectedIndexChanged().
Protected Sub cmdCancel_Click(ByVal sender As Object, ByVal e As EventArgs) Handles cmdCancel.Click
If Me.chkIsNew.Checked Then
'reseteaza valorile din toate casutele de editare
Me.chkIsNew.Visible = False
Me.txtNrFact.Text = ''
Me.txtDatafact.Text = ''
Me.TxtClient.Text = ''
Me.TxtObs.Text = ''
Else
'restaureaza inregistrarea dinaintea modificarii (echivalent select linie in tabel)
Me.GridView1_SelectedIndexChanged(Nothing, Nothing)
End If
End Sub
Implementati acest scenariu ca exercitiu de laborator.
Copyright © 2024 - Toate drepturile rezervate
