Sunt fericit să spun că astăzi, vom posta primul nostru articol pe ASP.NET. În acest ecran, vă vom arăta cum să implementați o funcție de căutare simplă pe site-ul dvs. personal. Vom trece peste multe dintre noile caracteristici din ASP.NET 3.5, cum ar fi LINQ și multe dintre controalele AJAX livrate cu Visual Studio / Web Developer.
* Faceți clic pe pictograma ecranului maximizând videoclipul.
Declarația de misiune
Vom construi o funcționalitate de căutare simplă pentru site-ul nostru. Vom crea un site de oase goale care conține un singur câmp de text și un buton. Când faceți clic pe buton, vom scrie un cod LINQ care va prelua informațiile aplicabile din baza noastră de date și va afișa pe pagină. În plus, vom permite post-back-uri parțiale ale paginilor utilizând panourile de actualizare și comenzile de actualizare a progresului.
Ce trebuie sa stii
În acest interviu, voi presupune că aveți o cunoaștere a cadrului. Deci, deși voi explica totul cât de bine pot, mă aștept să cunoașteți câteva lucruri. Dacă sunteți un novice complet, lăsați un comentariu și vom lucra la obținerea unui articol "De la zero" publicat cândva în viitorul apropiat.
Pasul 1: Crearea bazei de date
Voi crea o bază de date "Blog". Din motive de simplitate, voi adăuga doar câteva coloane: "BlogId", "BlogTitle", "BlogContents". Într-o situație reală în lume, trebuie să adăugați lucruri precum "BlogAuthor", "BlogFeaturedImage", "ComentariiId", etc. După ce ați umplut aceste coloane cu un conținut grosolan, suntem gata să construim formularul nostru web.
Pasul 2: Controlul Listview
Minunat lucru despre controlul listview este că vă permite să mențineți 100% control asupra marcajului. În loc să mă ocup de mese, pot specifica orice îmi place.
LayoutTemplate: Acest șablon servește ca întindere pentru fiecare element. De exemplu, dacă fiecare element a fost în interiorul unei etichete "li", ați putea adăuga o etichetă "ul" în șablonul de aspect ca o "înfășurare".
ItemTemplate: Aceasta va descrie aspectul pentru fiecare element din baza de date. Dacă, de exemplu, avem 10 intrări de blog în baza de date, vor fi ulterior 10 articole.
În cadrul șablonului pentru elemente, am specificat că controlul de afișare a listei ar trebui să afișeze doar un hyperlink. Acest hyperlink va avea atributul său text egal cu orice valoare este în baza de date pentru rândul asociat. De asemenea, voi seta proprietatea NavigateUrl (href) pe o nouă pagină. Această pagină entry.aspx va servi ca șablon pentru fiecare intrare. Vom specifica care intrări ar trebui să fie afișate prin intermediul querystring. (Mai multe despre aceasta în ecran.)
Pasul 3: LINQ
LINQ este un model de programare care vă permite să accesați mai multe forme de date folosind aceeași sintaxă. Cu LINQ to SQL, permite o modalitate de comunicare cu baza de date relațională. Imaginați-vă că puteți folosi aceeași interogare pentru a accesa XML, obiecte, baze de date relaționale, API-uri etc. Este un model incredibil și este cu ușurință noua mea funcție preferată în ASP.NET 3.5.
În loc să încorporați direct codul SQL în codul din spatele fișierelor, puteți trata fiecare coloană din tabelele bazei de date ca orice alt obiect. Acest lucru se realizează prin crearea unei linkuri LINQ la clasa SQL. Această clasă creează automat obiectele bazei de date pentru dvs..
Protejat Sub btnSubmit_Click (ByVal expeditor ca obiect, ByVal e ca System.EventArgs) Manere btnSubmit.Click Dim db Ca nou BlogDBDataContext () Dim q = De la b În db.Blogs _ În cazul în care b.BlogContents.Contains (txtSearch.Text.Trim ( )) Or _ b.BlogTitle.Contains (txtSearch.Text.Trim ()) _ Selectați b lv.DataSource = q Lv.DataBind () End Sub
Când utilizatorul face clic pe butonul "Căutați", acest cod va prelua numai intrările din baza de date care conțin valoarea introdusă în caseta de text a căutării. Aceste valori vor fi returnate și stocate în variabila "q". Apoi, setăm sursa de date a controlului nostru de listă la "q" - și stocăm-o.
Pasul 4: AJAXificarea paginii noastre
În această demonstrație simplă, nu va face cu adevărat o diferență dacă întreaga pagină se întoarce sau nu. Cu toate acestea, într-un site de dimensiuni medii și mari, efectuarea unui întreg post înapoi poate fi o durere. Vom împacheta conținutul controlului nostru de listă în cadrul unui panou de actualizare, pentru a reîmprospăta doar aceste informații specifice.
Rețineți eticheta "Declanșatoare". Dacă butonul nostru a fost imbricat în interiorul panoului de actualizare, panoul de actualizare se va actualiza automat când a fost făcut clic pe buton. Cu toate acestea, în acest caz, butonul nostru se află în afara panoului de actualizare. În astfel de situații, trebuie să adăugăm un "ASyncPostBackTrigger" care indică butonul care va declanșa postarea înapoi a panoului de actualizare.
Pasul 5: Feedbackul utilizatorului
Atunci când se realizează reîmprospătarea parțială a paginilor, utilizatorul poate deveni uneori perplex. Poate că i se pare că pagina pur și simplu nu răspunde. Pentru a compensa, vom adăuga "pictograma de încărcare" omniprezentă în pagină. Acest lucru va furniza utilizatorului ceva feedback pentru a-i spune că pagina este, de fapt, procesată. Putem folosi controlul "Update Progress" pentru a îndeplini această sarcină.
În cadrul șablonului de progres, am adăugat o etichetă de imagine care conține pictograma mea de încărcare. Deci, în timp ce panoul de actualizare se actualizează, această pictogramă de încărcare se va afișa. După terminarea postului, pictograma va dispărea.
Ai terminat
Deși acest articol sa mișcat puțin repede, ecranul descrie fiecare pas pas cu pas. Dacă aveți întrebări suplimentare, vă rugăm să lăsați un comentariu și vom face tot posibilul pentru a vă ajuta. Ceea ce am furnizat astăzi este o modalitate simplă de căutare a site-ului dvs. Cu toate acestea, într-o situație din lumea reală, probabil că veți implementa o metodă de căutare mai avansată. Mi-ar plăcea să vă aud gândurile despre cele mai bune modalități de a realiza acest lucru.
Dacă doriți mai multe tutoriale ASP.NET, fiți auziți! Lăsați un comentariu și să vă exprimați opinia. Acest cadru este prea puternic pentru a fi ignorat. Digg, SU, DZone! Multumesc tuturor! Pa! Pa!
Share
Accentsconagua
