Slik søker du et nettsted ved hjelp av ASP.NET 3.5 - screencast

Jeg er glad for å si at i dag legger vi inn vår aller første artikkel på ASP.NET. I denne skjermbildet viser jeg deg hvordan du implementerer en enkel søkefunksjonalitet i ditt personlige nettsted. Vi går over mange av de nye funksjonene i ASP.NET 3.5, for eksempel LINQ og mange av AJAX-kontrollene som leveres med Visual Studio / Web Developer.


* Klikk på ikonet for fullskjerm maksimere videoen.

Mission Statement

Vi vil bygge en enkel søkefunksjonalitet for nettstedet vårt. Vi lager et nettsted med bare bein som inneholder en enkelt tekstboks og knapp. Når knappen er klikket, skriver vi noen LINQ kode som henter den aktuelle informasjonen fra vår database og viser den på siden. I tillegg tillater vi delvis tilbakebetaling av sider ved hjelp av oppdateringspanelet og oppdateringsfremdriftskontrollene.

Hva du trenger å vite

I denne skjermbildet vil jeg anta at du har litt kunnskap om rammen. Så, selv om jeg vil forklare alt etter beste evne, vil jeg forvente at du skal få vite noen ting. Hvis du er en komplett nybegynner, la en kommentar og vi vil jobbe med å få en "From Scratch" artikkel publisert en gang i nær fremtid.

Trinn 1: Opprette databasen

Jeg lager en "Blog" -database. For enkelhets skyld vil jeg bare legge til noen få kolonner: "BlogId", "BlogTitle", "BlogContents". I en ekte verdenssituasjon bør du legge til ting som "BlogAuthor", "BlogFeaturedImage", "CommentsId", etc. Etter å ha fylt disse kolonnene med noe gibberish-innhold, er vi klare til å bygge vår webform.

Trinn 2: Listevisningskontrollen

Den fantastiske tingen med listevisningskontrollen er at den gir deg mulighet til å opprettholde 100% kontroll over markeringen din. I stedet for å måtte håndtere bord, kan jeg spesifisere alt jeg liker.

      "NavigateUrl ="<%#Eval("BlogId", "entry.aspx?BlogId=0") %>"/> 
  • LayoutTemplate: Denne malen tjener som vikle for hvert element. For eksempel, hvis hvert element var inne i en "li" -kode, kan du legge til en ul-kode i layoutmalen din som en "pakke".
  • ItemTemplate: Dette vil beskrive layoutet for hvert element i databasen. Hvis vi for eksempel har 10 blogginnlegg i databasen, vil det etter hvert være 10 elementer.

Innenfor varemalen har jeg angitt at listevisningskontrollen bare skal vise en hyperkobling. Denne hyperkoblingen vil ha sin tekstattributt tilsvarer hva verdien er i databasen for den tilknyttede raden. Jeg skal også sette egenskapen NavigateUrl (href) til en ny side. Denne entry.aspx-siden vil tjene som mal for hver oppføring. Vi spesifiserer hvilken oppføring som skal vises via spørringen. (Mer om dette i skjermbildet.)

Trinn 3: LINQ

LINQ er en programmeringsmodell som lar deg få tilgang til mange forskjellige former for data ved hjelp av samme syntaks. Med LINQ til SQL, tillater det en sterkt skrevet måte å kommunisere med din relasjonsdatabase. Tenk deg å kunne bruke det samme spørsmålet for å få tilgang til XML, Objekter, Relasjonsdatabaser, APIer, etc. Det er en utrolig modell og er lett min favoritt nye funksjon i ASP.NET 3.5.

I stedet for å legge inn SQL-kode direkte i koden din bak filer, kan du nå behandle hver kolonne i databasetabellene dine som andre objekter. Dette oppnås ved å lage en LINQ til SQL Class. Denne klassen oppretter automatisk databaseobjektene for deg.

 Beskyttet Sub btnSubmit_Click (ByVal sender som Object.EventArgs) Håndterer btnSubmit.Click Dim db Som Ny BlogDBDataContext () Dim q = Fra b I db.Blogs _ Hvor b.BlogContents.Contains (txtSearch.Text.Trim (txtSearch.Text.Trim )) Eller _ b.BlogTitle.Contains (txtSearch.Text.Trim ()) _ Velg b lv.DataSource = q lv.DataBind () End Sub

Når brukeren klikker på "Søk" -knappen, vil denne koden bare hente oppføringene fra databasen som inneholder verdien som ble oppgitt i søke tekstboksen. Disse verdiene vil bli returnert og lagret i variabelen "q". Vi stiller deretter datakilden til vår listevisnings kontroll til "q" - og databind den.

Trinn 4: AJAXifying vår side

I denne enkle demonstrasjonen, vil det ikke virkelig gjøre forskjell om hele siden poster tilbake eller ikke. Men i midten til stor størrelse kan det være en smerte å utføre en hel post tilbake. Vi skal pakke inn innholdet i vår listevisningskontroll i et oppdateringspanel for kun å oppdatere denne spesifikke informasjonen.

           "NavigateUrl ="<%#Eval("BlogId", "entry.aspx?BlogId=0") %>"/> 

Merk "Triggers" -taggen. Hvis knappen vår ble nestet inne i oppdateringspanelet, oppdateres oppdateringspanelet automatisk når knappen ble klikket. Men i dette tilfellet er knappen vår utenfor oppdateringspanelet. I slike tilfeller må vi legge til en "ASyncPostBackTrigger" som peker på knappen som vil utløse oppdateringspanelets innlegg tilbake.

Trinn 5: Tilbakemelding fra brukerne


Når du implementerer delvis oppdatering av siden, kan brukeren noen ganger bli forvirret. Det kan virke for ham at siden ganske enkelt ikke svarer. For å kompensere, legger vi til allestedsnærværende "lastingsikon" på siden. Dette vil gi brukeren noen tilbakemeldinger for å fortelle ham at siden faktisk er i behandling. Vi kan bruke "Oppdater Progress" -kontrollen for å oppnå denne oppgaven.

   Vennligst vent  

I fremdriftsmalen har jeg lagt til en bildemerke som inneholder lastingsikonet mitt. Så, mens oppdateringspanelet er forfriskende, vises dette lastingsikonet. Når postbacken er fullført, forsvinner ikonet.

Du er ferdig

Selv om denne artikkelen flyttet litt fort, beskriver screencast hver metode trinnvis. Hvis du har flere spørsmål, vennligst legg igjen en kommentar, og vi vil gjøre vårt beste for å hjelpe deg. Det jeg har levert i dag, er en enkel måte å søke på nettstedet ditt. Men i en ekte verdenssituasjon vil du mest sannsynlig gjennomføre en mer avansert søkemetode. Jeg vil gjerne høre tankene dine på de beste måtene å oppnå dette.

Hvis du vil ha mer ASP.NET-nøtter, bli hørt! Legg igjen en kommentar og stemme din mening. Denne rammen er for sterk til å ignorere. Digg det, SÅ det, DZone det! Takk alle sammen! Ha det!

Abonner på Weekly Screencasts

Du kan legge til vår RSS-feed til dine ITUNES-podcaster ved å gjøre følgende:

  1. Når ITUNES har lastet, klikket du på "Avansert fan"
  2. Velg "Abonner på podcast"
  3. Skriv inn "http://feeds.feedburner.com/NETTUTSVideos"

Det burde gjøre det! Screencast vil også bli søkbar på ITUNES i de neste tjuefire timer.