Ik ben blij om te zeggen dat we vandaag ons allereerste artikel op ASP.NET plaatsen. In deze screencast laat ik u zien hoe u een eenvoudige zoekfunctionaliteit in uw persoonlijke website kunt implementeren. We zullen veel van de nieuwe functies in ASP.NET 3.5 bespreken, zoals LINQ en veel van de AJAX-besturingselementen die worden meegeleverd met Visual Studio / Web Developer.
* Klik op het pictogram op het volledige scherm om de video te maximaliseren.
Mission Statement
We zullen een eenvoudige zoekfunctionaliteit voor onze site bouwen. We zullen een 'bare bones'-site maken die een enkel tekstvak en één knop bevat. Wanneer op de knop wordt geklikt, schrijven we een LINQ-code die de toepasselijke informatie uit onze database ophaalt en op de pagina weergeeft. Daarnaast bieden we gedeeltelijke pagina-nevenbackups aan met behulp van het paneel Update en de voortgangsbesturing voor updates.
Wat je moet weten
In deze screencast ga ik ervan uit dat je wat kennis hebt van het framework. Dus, hoewel ik alles zo goed mogelijk zal uitleggen, verwacht ik dat je een paar dingen weet. Als u een complete beginner bent, laat een reactie achter en we zullen werken aan het verkrijgen van een "From Scratch" -artikel ergens in de nabije toekomst.
Stap 1: De database maken
Ik zal een "Blog" -database maken. Eenvoudigheidshalve zal ik alleen een paar kolommen toevoegen: "BlogId", "BlogTitle", "BlogContents". In een echte wereldsituatie moet je dingen toevoegen zoals "BlogAuthor", "BlogFeaturedImage", "CommentsId", enz.. Nadat we deze kolommen hebben gevuld met wat wuftelijke inhoud, zijn we klaar om ons webformulier te bouwen.
Stap 2: Het overzichtsbeheer
Het mooie van de lijstweergavecontrole is dat je 100% controle hebt over je mark-up. In plaats van te moeten omgaan met tabellen, kan ik alles specificeren wat ik leuk vind.
LayoutTemplate: Deze sjabloon dient als omloop voor elk item. Als elk item bijvoorbeeld in een 'li'-tag stond, zou u een' ul'-tag in uw lay-outsjabloon als een 'wrap' kunnen toevoegen.
ItemTemplate: Dit beschrijft de lay-out voor elk item in de database. Als we bijvoorbeeld 10 blog-items in de database hebben, zijn er 10 items.
Binnen de itemsjabloon heb ik aangegeven dat het besturingselement lijstweergave alleen een hyperlink moet weergeven. Aan deze hyperlink is het tekstkenmerk gelijk aan de waarde in de database voor de bijbehorende rij. Ik ga ook de eigenschap NavigateUrl (de href) instellen op een nieuwe pagina. Deze entry.aspx-pagina wordt gebruikt als sjabloon voor elk item. We zullen specificeren welk item getoond moet worden via de querystring. (Meer hierover in de screencast.)
Stap 3: LINQ
LINQ is een programmeermodel waarmee u toegang hebt tot veel verschillende gegevensvormen met dezelfde syntaxis. Met LINQ to SQL zorgt het voor een sterk getypeerde manier van communiceren met uw relationele database. Stel je voor dat je dezelfde query kunt gebruiken om toegang te krijgen tot XML, Objecten, Relationele Databases, API's, enz. Het is een ongelooflijk model en is gemakkelijk mijn favoriete nieuwe functie in ASP.NET 3.5.
In plaats van SQL-code direct in uw code achter bestanden in te sluiten, kunt u nu elke kolom in uw databasetabellen behandelen zoals elk ander object. Dit wordt bereikt door een LINQ to SQL Class te maken. Deze klasse maakt automatisch de database-objecten voor u.
Beschermde Sub btnSubmit_Click (ByVal-verzender als object, ByVal e As System.EventArgs) Handles btnSubmit.Click Dim db als nieuwe BlogDBDataContext () Dim q = Van b In db.Blogs _ Where b.BlogContents.Contains (txtSearch.Text.Trim ( )) Of _b.BlogTitle.Contains (txtSearch.Text.Trim ()) _ Selecteer b lv.DataSource = q lv.DataBind () End Sub
Wanneer de gebruiker op de knop "Zoeken" klikt, haalt deze code alleen de vermeldingen uit de database op die de waarde bevatten die is ingevoerd in het tekstvak Zoeken. Die waarden worden geretourneerd en opgeslagen in de variabele "q". Vervolgens stellen we de gegevensbron van ons lijstweergavestuur in op "q" - en databind het.
Stap 4: onze pagina AJAXifying
In deze eenvoudige demonstratie maakt het niet echt uit of de hele pagina berichten plaatst of niet. In een middelgrote tot grote site kan het lastig zijn om een hele post terug te voeren. We gaan de inhoud van ons lijstoverzicht binnen een updatepaneel wikkelen om deze specifieke informatie alleen te vernieuwen.
Let op de tag "Triggers". Als onze knop was genest in het updatepaneel, vernieuwde het updatepaneel automatisch wanneer op de knop werd geklikt. In dit geval bevindt onze knop zich echter buiten het updatepaneel. In dergelijke gevallen moeten we een "ASyncPostBackTrigger" toevoegen die verwijst naar de knop waarmee het bericht van het updatepaneel wordt gestart.
Stap 5: Gebruikersfeedback
Bij het uitvoeren van gedeeltelijke paginavernieuwingen kan de gebruiker soms perplex worden. Het lijkt hem dat de pagina simpelweg niet reageert. Ter compensatie voegen we het alomtegenwoordige "laadpictogram" toe aan de pagina. Dit zal de gebruiker wat feedback geven om hem te laten weten dat de pagina in feite verwerkt is. We kunnen de "Update voortgang" -besturing gebruiken om deze taak te volbrengen.
In de voortgangssjabloon heb ik een afbeeldingstag toegevoegd met mijn laadpictogram. Dus terwijl het updatepaneel vernieuwd is, wordt dit laadpictogram weergegeven. Wanneer de terugmelding is voltooid, verdwijnt het pictogram.
Je bent klaar
Hoewel dit artikel een beetje snel is verplaatst, beschrijft de screencast elke methode stap voor stap. Als u nog vragen heeft, laat dan een reactie achter en we zullen ons best doen om u te helpen. Wat ik vandaag heb geleverd, is een eenvoudige manier om uw site te doorzoeken. In een echte wereldsituatie zult u echter waarschijnlijk een geavanceerdere zoekmethode implementeren. Ik zou graag uw mening horen over de beste manieren om dit te bereiken.
Als je meer ASP.NET-tuts wilt, hoor dan! Laat een reactie achter en spreek uw mening uit. Dit raamwerk is te krachtig om te negeren. Digg it, SU it, DZone it! Bedankt iedereen! Tot ziens!
Abonneer u op de wekelijkse screencasts
U kunt onze RSS-feed toevoegen aan uw ITUNES-podcasts door het volgende te doen:
Nadat ITUNES is geladen, klik je op het tabblad 'Geavanceerd'
Kies "Abonneren op podcast"
Voer "http://feeds.feedburner.com/NETTUTSVideos" in
Dat zou het moeten doen! De screencast kan ook worden doorzocht op ITUNES in de komende vierentwintig uur.
Share
Accentsconagua
