Walkthrough

Crearea unui site web bazat pe sistemul de fișiere

Deschideți Visual Web Developer.

În meniul Fișier, indicați spre Nou, apoi faceți clic pe Site Web. Dacă utilizați Visual Web Developer Express, din meniul Fișier, faceți clic pe New Web Site.

Va apărea caseta de dialog New Web Site.

Sub șabloanele instalate Visual Studio, faceți clic pe site-ul Web ASP.NET.

În caseta Locație, faceți clic pe Sistem fișiere, apoi tastați numele folderului unde vor fi stocate paginile site-ului Web.

De exemplu, tastați numele folderului C: \ WebSites \ HierarchicalData.

În lista Limbă, selectați limba de programare preferată.

Faceți clic pe OK.

Visual Web Developer creează un dosar și o pagină nouă numită Default.aspx.

Creați un nou fișier XML efectuând următoarele:

Crearea unui fișier XML

În Solution Explorer, faceți clic cu butonul din dreapta pe site-ul Web, apoi faceți clic pe Adăugare element nou.

În caseta de dialog Adăugați un element nou, în Șabloane standard, selectați fișierul XML.

În caseta Nume, tastați Bookstore.xml, apoi faceți clic pe Adăugare.

Copiați următoarele date XML și inserați-le în fișierul Bookstore.xml în partea de sus a conținutului de acolo.

Această secțiune arată cum se utilizează controlul TreeView pentru a afișa date XML. Pentru început, puteți să trimiteți date XML fără o configurație specială.

Afișarea datelor XML

Deschideți pagina Default.aspx și comutați la modul Design.

Din panoul elementelor. grup de navigare. Trageți controlul TreeView pe pagină.

În meniul TreeView Tasks, din lista derulantă Selectare sursă de date, faceți clic pe Noua sursă de date. Se pornește Expertul de configurare a sursei de date.

În fereastra Sursa de date pentru aplicație, selectați fișierul XML. Lăsați ID-ul sursă de date implicit. Faceți clic pe OK.

În caseta de dialog Configurare sursă de date, în câmpul Fișier de date, tastați

/Bookstore.xml și faceți clic pe OK.

Acum puteți verifica pagina.

Testarea paginii

Apăsați CTRL + F5 pentru a porni pagina.

Reduceți și extindeți comenzile.

În mod implicit, nodurile afișează numai numele elementelor din fișierul Bookstore.xml.

Puteți personaliza datele afișate în controlul TreeView. prin crearea de legări personalizate care vă permit să specificați datele fișierului XML afișate în fiecare nod.

Crearea legărilor personalizate

În meniul TreeView Tasks, faceți clic pe Change Data Tree Snap.

Eliminați caseta de validare Automatically create binding. Deoarece legăturile sunt definite în continuare.

Faceți clic pe butonul Adăugați. Pentru a crea o legare nouă, apoi în zona Proprietăți de legare date. setați proprietatea DataMember la valoarea librăriei. și setați proprietatea Text la informații despre carte.

Setarea afișării valorii statice este utilizată deoarece nodul Bookstore este nodul superior al fișierului XML și este afișat numai în controlul TreeView.

Faceți clic pe Adăugare pentru a crea oa doua legătură, apoi în panoul Proprietăți de legare date, setați proprietatea DataMember la gen. și setați proprietatea TextField să numească.

Aceasta va determina nodul să citească elementul Fișier XML și atribuie valoarea atributului name proprietății TextField.

Faceți clic pe Adăugare pentru a crea oa doua legătură, apoi în zona Proprietăți de legare date, setați proprietatea DataMember pentru a rezerva. setați proprietatea TextField la ISBN.

Faceți clic pe OK.

Acum puteți testa pagina.

Testarea paginii

Apăsați CTRL + F5 pentru a porni pagina.

De data aceasta, comanda TreeView afișează trei nivele care corespund legărilor date. Trei nivele includ nodul rădăcină de informații despre carte. gen de grup și informații ISBN.

Puteți crea legături de date pentru toate elementele dintr-un fișier XML, dar puteți lega numai atributele elementului, textul intern, numele elementului și valoarea elementului. Nu puteți lega elemente imbricate. Pentru a afișa elemente în elemente imbricate, sunt create legături separate pentru aceste elemente. De asemenea, puteți converti un fișier XML utilizând XSLT pentru a converti toate elementele în atribute. Pentru mai multe informații și un exemplu, consultați descrierea proprietății XmlDataSource. TransformFile.

Controlul TreeView poate afișa orice tip de date ierarhice, chiar dacă logica de date se află în baza de date, mai degrabă decât fizic, la fel ca în fișier XML. În acest exemplu, controlul TreeView este utilizat pentru a afișa date din tabelele conectate în baza de date Northwind.

Mai întâi, creați o conexiune la computerul care rulează serverul SQL care conține baza de date Northwind.

Pentru a crea o conexiune la SQL Server

În Server Explorer, faceți clic dreapta pe conexiunile de date. apoi faceți clic pe Adăugare conexiune. Când utilizați Visual Web Developer Express Edition, utilizați browserul bazei de date.

Se afișează caseta de dialog Adăugare conexiune.

Dacă elementul Microsoft SQL Server (SqlClient) nu este listat în lista de surse de date. faceți clic pe Editați și în caseta de dialog Selectare sursă de date, faceți clic pe Microsoft SQL Server.

Când pagina Selectare sursă de date apare în lista Sursa de date, selectați tipul de sursă de date de utilizat. În acest ghid, Microsoft SQL Server este utilizat ca tip de sursă de date. În lista furnizor de date, faceți clic pe Furnizorul de date .NET Framework pentru SQL Server, apoi faceți clic pe Continuare.

Dacă fila Server Explorer nu este vizibilă în Visual Web Developer, din meniul View, faceți clic pe Server Explorer. Dacă fila Browser bază de date nu este vizibilă, din meniul Vizualizare, faceți clic pe Browser-ul bazei de date.

În câmpul Adăugare conexiune, introduceți numele serverului în câmpul Nume server.

Bifați caseta de validare Salvare parolă.

În aplicațiile de producție, nu utilizați parola Salvare. deoarece numele de utilizator și parola sunt apoi încorporate în fișierele de aplicație.

Sub Selectați sau tastați numele bazei de date, tastați Northwind.

Faceți clic pe butonul Conectare test și asigurați-vă că este prezent, faceți clic pe OK.

O conexiune nouă va fi creată în Data Connections în Server Explorer (sau Database Explorer).

Personalizați controlul TreeView pentru a afișa conținutul bazelor de date

Mai întâi, creați o pagină nouă și un control TreeView.

Creați o pagină și un control TreeView

Adăugați o pagină Web ASP.NET (pagină Web Forms) numită TreeViewDynamic.aspx pe site-ul Web.

Deschideți pagina TreeViewDynamic.aspx, mergeți la vizualizarea Design, trageți spre pagină din caseta de instrumente. grup Standard. Controlați eticheta și denumiți-o labelStatus.

Controlul labelStatus este utilizat numai pentru mesajele de eroare.

Din panoul elementelor. grup de navigare. Trageți controlul TreeView pe pagină.

Faceți clic dreapta pe controlul TreeView. selectați Proprietăți. apoi setați proprietatea MaxDataBindDepth la 2.

Faceți clic pe OK.

Aceasta creează cel mai înalt vârf de copac care conține numai text static.

Configurarea fișierului Web.config

Din grupul de date din caseta de instrumente, glisați comanda SqlDataSource pe pagină.

În meniul SqlDataSource, faceți clic pe Configurare sursă de date.

Expertul de configurare a sursei de date - SqlDataSource1 afișează o pagină în care puteți selecta conexiunea.

În ce legătură trebuie să utilizeze aplicația dvs. pentru a lucra cu baza de date? tastați conexiunea creată în pasul "Creați o conexiune la SQLServer" și faceți clic pe Următorul.

Expertul afișează o pagină pe care puteți salva șirul de conexiuni în fișierul de configurare. Stocarea unui șir de conexiuni într-un fișier de configurare are două avantaje.

Acest lucru este mai sigur decât salvarea pe pagină.

Puteți utiliza un șir de conexiuni pe mai multe pagini.

Bifați caseta de validare Da, salvați conexiunea și faceți clic pe Următorul.

Expertul va afișa o pagină în care puteți specifica datele pe care doriți să le preluați din baza de date.

În grupul Coloane, selectați câmpurile CategoryID și CategoryName.

Faceți clic pe Următorul.

Faceți clic pe Finalizare.

Șirul de conexiuni creat în fișierul Web.config este folosit mai târziu în metoda RunQuery. definite mai jos în acest manual. Controlul SqlDataSource nu este utilizat.

Acum, adăugați codul care implementează popularea nodurilor copilului de control dacă utilizatorul face clic pe nod. Pentru a adăuga dinamic noduri, este creat un handler de evenimente TreeNodePopulate.

Crearea unui manipulator de evenimente

Faceți clic dreapta pe controlul TreeView, iar în grupul Properties, faceți clic pe pictograma Evenimente.

Faceți dublu clic pe câmpul eveniment TreeNodePopulate.

Visual Web Developer trece în modul de vizualizare sursă.

În procedura de tratare a evenimentului, adăugați următorul cod evidențiat.

Obiectul TreeNodeEventArgs oferă acces programatic la nodul curent. Pentru a umple nodul, adăugați elemente la acesta. În exemplul de cod, nodul este transmis unei metode care adaugă noduri copil.

Citirea datelor nodurilor din baza de date

Datele afișate în fiecare nod provin din baza de date. Este necesar să scrieți un cod care execută o interogare de bază de date care citește înregistrările și creează un nod pentru fiecare dintre ele. Acest ghid presupune că baza de date eșantion este utilizat SQL Server «Borey“, deci ar trebui să utilizați obiecte ADO.NET din spațiul de nume System.Data.SqlClient.

Accesați vizualizarea Sursă.

Când lucrați cu o pagină într-un singur fișier, adăugați următoarele directive în partea de sus a paginii de cod.

Codul creează un obiect SqlCommand. incapsularea textului cererii. Acesta trece obiectul la metoda (care este creată de dezvoltator) care execută interogarea bazei de date și returnează setul de date. Apoi, codul din buclă trece prin înregistrările obiectului DataSet și creează un nod pentru fiecare înregistrare, scriind conținutul bazei de date pe text și pe valoarea nodului. Apoi, proprietatea PopulateOnDemand a fiecărui nod este setată la true. astfel încât nodul să apeleze evenimentul TreeNodePopulate. când utilizatorul face clic pe el. Proprietatea SelectAction este setată astfel încât nodurile să fie expandate în mod implicit.

Adăugarea de noduri de produse

Adăugați următoarea metodă la pagina de cod.

Ultimul pas este de a crea o metodă care execută interogarea și returnează setul de date.

Executarea interogării

Adăugați următoarea subrutină la pagină:

Codul creează un adaptor de procesare a datelor bazat pe obiectul SqlCommand. care îi este transmisă. Apoi, codul creează și popula populația folosind adaptorul.

Acum puteți verifica pagina.

Testarea paginii

Apăsați CTRL + F5 pentru a porni pagina.

Articole similare