Jag är glad att säga att vi idag lägger ut vår allra första artikel på ASP.NET. I den här skärmbilden visar jag dig hur du implementerar en enkel sökfunktionalitet på din personliga webbplats. Vi ska gå över många av de nya funktionerna i ASP.NET 3.5, som LINQ och många av AJAX kontrollerar det skeppet med Visual Studio / Web Developer.
* Klicka på ikonen för hela skärmen maximera videon.
Uppdragsbeskrivning
Vi bygger en enkel sökfunktion för vår webbplats. Vi skapar en enda benplats som innehåller en enda textruta och knapp. När knappen är klickad skriver vi lite LINQ-kod som hämtar relevant information från vår databas och visar den på sidan. Dessutom tillåter vi dela efterföljande sidor med hjälp av kontrollpanelen Uppdateringspanel och Uppdatering.
Vad du behöver veta
I den här skärmbilden antar jag att du har en del kunskaper om ramverket. Så, även om jag kommer att förklara allt efter min förmåga, förväntar jag mig att du känner till några saker. Om du är en komplett nybörjare, lämna en kommentar och vi kommer att arbeta med att få en "From Scratch" artikel som publiceras någon gång inom en snar framtid.
Steg 1: Skapa databasen
Jag ska skapa en "Blog" -databas. För enkelhetens skull lägger jag bara till några kolumner: "BlogId", "BlogTitle", "BlogContents". I en verklig världssituation bör du lägga till saker som "BlogAuthor", "BlogFeaturedImage", "CommentsId", etc. Efter att ha fyllt i dessa kolumner med lite gibberish-innehåll, är vi redo att bygga vår webbform.
Steg 2: Listview Control
Den underbara tingen med listview-kontrollen är att den låter dig behålla 100% kontroll över din markering. Istället för att jag måste hantera tabeller kan jag ange vad jag vill ha.
LayoutTemplate: Denna mall fungerar som omslag för varje objekt. Till exempel, om varje objekt var inuti en "li" -tagg kunde du lägga till en "ul" -tagg i din layoutmall som en "wrap".
ItemTemplate: Detta kommer att beskriva layouten för varje objekt i databasen. Om vi till exempel har 10 blogginlägg i databasen kommer det att bli 10 saker.
Inom objektmallen har jag angett att listview-kontrollen bara ska visa en hyperlänk. Denna hyperlänk kommer att ha dess textattribut lika med vad värdet är i databasen för den tillhörande raden. Jag ska också ställa in egenskapen NavigateUrl (href) till en ny sida. Denna entry.aspx-sida kommer att fungera som mall för varje post. Vi anger vilken post som ska visas via frågesträngen. (Mer om detta i skärmen.)
Steg 3: LINQ
LINQ är en programmeringsmodell som låter dig komma åt många olika former av data med samma syntax. Med LINQ till SQL möjliggör det ett starkt skrivet sätt att kommunicera med din relationsdatabas. Tänk dig att kunna använda samma fråga för att få åtkomst till XML, Objekt, Relations Databaser, API, etc. Det är en otrolig modell och är lätt min favorit nya funktion i ASP.NET 3.5.
Snarare än att bädda in SQL-kod direkt till din kod bakom filer, kan du nu behandla varje kolumn i dina databastabeller som alla andra objekt. Detta uppnås genom att skapa en LINQ till SQL-klass. Den här klassen skapar automatiskt databasobjekten för dig.
Skyddad sub btnSubmit_Click (ByVal-sändare som Object, ByVal e As System.EventArgs) Hanterar btnSubmit.Click Dim db Som ny bloggDBDataContext () Dim q = Från b I db.Blogs _ Där b.BlogContents.Contains (txtSearch.Text.Trim )) Eller _ b.BlogTitle.Contains (txtSearch.Text.Trim ()) _ Välj b lv.DataSource = q lv.DataBind () End Sub
När användaren klickar på "Sök" -knappen kommer denna kod bara hämta poster från databasen som innehåller värdet som skrivits in i söktextrutan. Dessa värden kommer att returneras och lagras i variabeln "q". Vi ställer sedan datakällan i vår listviewkontroll till "q" - och databind den.
Steg 4: AJAXifying vår sida
I den här enkla demonstrationen kommer det inte att göra någon skillnad om hela sidan postar tillbaka eller inte. Men i en mitten till storstorlek kan det vara en smärta att utföra ett helt inlägg. Vi ska lägga in innehållet i vår listview-kontroll inom en uppdateringspanel för att bara uppdatera den här specifika informationen.
Notera taggen "Triggers". Om vår knapp nestades inuti uppdateringspanelen uppdateras uppdateringspanelen automatiskt när knappen klickades. I det här fallet ligger dock vår knapp utanför uppdateringspanelen. I sådana fall måste vi lägga till en "ASyncPostBackTrigger" som pekar på knappen som kommer att utlösa uppdateringspanelens inlägg tillbaka.
Steg 5: Användaråterkoppling
Vid genomförande av partiell uppdateringar kan användaren ibland bli förvirrad. Det kan tyckas för honom att sidan helt enkelt inte svarar. För att kompensera lägger vi till den allestädes närvarande "laddningsikonen" på sidan. Detta ger användaren en viss feedback för att låta honom veta att sidan faktiskt är bearbetning. Vi kan använda kontrollen "Uppdatera framsteg" för att uppnå denna uppgift.
I framstegsmallen har jag lagt till en bildtagg som innehåller min laddningsikon. Så, när uppdateringspanelen är uppfriskande, visas denna laddningsikon. När posten tillbaka har slutförts, försvinner ikonen.
Du är klar
Även om den här artikeln flyttade lite snabbt beskriver screencast varje metod steg för steg. Om du har ytterligare frågor, vänligen lämna en kommentar och vi gör vårt bästa för att hjälpa dig. Vad jag har levererat idag är ett enkelt sätt att söka på din webbplats. Men i en verklig världssituation kommer du troligtvis att implementera en mer avancerad sökmetod. Jag skulle gärna höra dina tankar om de bästa sätten att uppnå detta.
Om du vill ha fler ASP.NET-tuttar hörs! Lämna en kommentar och röst din åsikt. Denna ram är för kraftfull att ignorera. Digg det, SÅ det, DZone det! Tack allihop! Hejdå!
Prenumerera på Weekly Screencasts
Du kan lägga till vårt RSS-flöde till dina ITUNES-podcaster genom att göra följande:
När ITUNES har laddat, klickade du på "Avancerad flik"
Välj "Prenumerera på Podcast"
Ange "http://feeds.feedburner.com/NETTUTSVideos"
Det borde göra det! Screencasten kommer också att sökas på ITUNES under de närmaste tjugo fyra timmarna.
Share
Accentsconagua
