Ich freue mich sagen zu können, dass wir heute unseren allerersten Artikel auf ASP.NET veröffentlichen. In diesem Screencast zeige ich Ihnen, wie Sie eine einfache Suchfunktion auf Ihrer persönlichen Website implementieren. Wir werden viele der neuen Funktionen in ASP.NET 3.5 durchgehen, beispielsweise LINQ und viele der AJAX-Steuerelemente, die mit Visual Studio / Web Developer ausgeliefert werden.
* Klicken Sie auf das Vollbild-Symbol, um das Video zu maximieren.
Leitbild
Wir werden eine einfache Suchfunktion für unsere Website erstellen. Wir erstellen eine Bare Bones-Site, die ein einzelnes Textfeld und eine Schaltfläche enthält. Wenn Sie auf die Schaltfläche klicken, schreiben wir LINQ-Code, der die entsprechenden Informationen aus unserer Datenbank abruft und auf der Seite anzeigt. Darüber hinaus ermöglichen wir teilweise Seitenrücksendungen mit den Steuerelementen Update Panel und Update Progress.
Was du wissen musst
In diesem Screencast gehe ich davon aus, dass Sie mit dem Framework vertraut sind. Obwohl ich alles nach bestem Wissen erklären werde, erwarte ich von Ihnen ein paar Dinge. Wenn Sie ein absoluter Neuling sind, hinterlassen Sie einen Kommentar, und wir werden daran arbeiten, einen Artikel "From Scratch" zu veröffentlichen, der in naher Zukunft veröffentlicht wird.
Schritt 1: Erstellen der Datenbank
Ich werde eine "Blog" -Datenbank erstellen. Der Einfachheit halber füge ich nur einige Spalten hinzu: "BlogId", "BlogTitle", "BlogContents". In einer realen Situation sollten Sie Dinge wie "BlogAuthor", "BlogFeaturedImage", "CommentsId" usw. hinzufügen. Nachdem Sie diese Spalten mit Kauderwelsch gefüllt haben, können Sie unser Webformular erstellen.
Schritt 2: Die Listview-Steuerung
Das Wunderbare an der Listview-Steuerung ist, dass Sie 100% Kontrolle über Ihre Markierungen haben. Anstatt sich mit Tabellen zu beschäftigen, kann ich alles angeben, was mir gefällt.
Layoutvorlage: Diese Vorlage dient als Umbruch für jedes Element. Wenn sich beispielsweise jedes Element innerhalb eines "li" -Tags befindet, können Sie ein "ul" -Tag in Ihrer Layoutvorlage als "Wrap" hinzufügen..
ItemTemplate: Hier wird das Layout für jedes Element in der Datenbank beschrieben. Wenn sich zum Beispiel 10 Blogeinträge in der Datenbank befinden, gibt es anschließend 10 Einträge.
In der Elementvorlage wurde angegeben, dass das Listview-Steuerelement nur einen Hyperlink anzeigen soll. Dieser Hyperlink hat ein Textattribut, das dem Wert der Datenbank in der zugehörigen Zeile entspricht. Ich werde auch die NavigateUrl-Eigenschaft (die Href) auf eine neue Seite setzen. Diese entry.aspx-Seite dient als Vorlage für jeden Eintrag. Wir legen fest, welcher Eintrag über den Querstring angezeigt werden soll. (Mehr dazu im Screencast.)
Schritt 3: LINQ
LINQ ist ein Programmiermodell, mit dem Sie mit derselben Syntax auf viele verschiedene Datenformen zugreifen können. Mit LINQ to SQL ermöglicht es eine stark typisierte Art der Kommunikation mit Ihrer relationalen Datenbank. Stellen Sie sich vor, Sie könnten dieselbe Abfrage verwenden, um auf XML, Objekte, relationale Datenbanken, APIs usw. zuzugreifen. Dies ist ein unglaubliches Modell und leicht meine beliebteste neue Funktion in ASP.NET 3.5.
Statt SQL-Code direkt in den Code hinter Dateien einzubetten, können Sie jetzt jede Spalte in Ihren Datenbanktabellen wie jedes andere Objekt behandeln. Dies wird durch Erstellen einer LINQ to SQL-Klasse erreicht. Diese Klasse erstellt automatisch die Datenbankobjekte für Sie.
Protected Sub btnSubmit_Click (Absender von ByVal als Objekt, ByVal as System.EventArgs) Verarbeitet btnSubmit.Click Dim als neues BlogDBDataContext () Dim q = Von b In db.Blogs _ Where b.BlogContents.Contains (txtSearch.Text.Trim ( )) Oder _B.BlogTitle.Contains (txtSearch.Text.Trim ()) _ Wählen Sie b lv.DataSource = q lv.DataBind () End Sub aus
Wenn der Benutzer auf die Schaltfläche "Suchen" klickt, werden mit diesem Code nur die Einträge aus der Datenbank abgerufen, die den in das Suchtextfeld eingegebenen Wert enthalten. Diese Werte werden zurückgegeben und in der Variablen "q" gespeichert. Dann setzen wir die Datenquelle unseres Listenansicht-Steuerelements auf "q" - und databinden sie.
Schritt 4: AJAXifizieren unserer Seite
In dieser einfachen Demonstration wird es keinen Unterschied machen, ob die gesamte Seite zurückgegeben wird oder nicht. Bei einer mittelgroßen bis großen Website kann es jedoch sehr schwierig sein, einen gesamten Post-Back auszuführen. Wir werden den Inhalt unseres Listenansicht-Steuerelements in ein Aktualisierungsfenster packen, um nur diese spezifischen Informationen zu aktualisieren.
Beachten Sie das Tag "Trigger". Wenn unsere Schaltfläche im Aktualisierungsbereich verschachtelt war, wurde der Aktualisierungsbereich automatisch aktualisiert, wenn auf die Schaltfläche geklickt wurde. In diesem Fall befindet sich unsere Schaltfläche jedoch außerhalb des Update-Bereichs. In solchen Fällen müssen wir einen "ASyncPostBackTrigger" hinzufügen, der auf die Schaltfläche verweist, die den Beitrag des Update-Panels zurücksetzt.
Schritt 5: Benutzer Feedback
Bei der Implementierung von teilweisen Seitenaktualisierungen kann der Benutzer manchmal verwirrt werden. Es scheint ihm, dass die Seite einfach nicht reagiert. Um dies zu kompensieren, fügen wir der Seite das allgegenwärtige Symbol "Laden" hinzu. Auf diese Weise erhält der Benutzer ein Feedback, um ihn darüber zu informieren, dass die Seite tatsächlich verarbeitet wird. Wir können das Steuerelement "Update Progress" verwenden, um diese Aufgabe auszuführen.
In der Fortschrittsvorlage habe ich ein Bild-Tag hinzugefügt, das mein Ladesymbol enthält. Während das Aktualisierungsfenster aktualisiert wird, wird dieses Ladesymbol angezeigt. Wenn die Nachbearbeitung abgeschlossen ist, wird das Symbol ausgeblendet.
Du bist fertig
Obwohl sich dieser Artikel etwas schnell bewegt hat, beschreibt der Screencast jede Methode Schritt für Schritt. Wenn Sie weitere Fragen haben, hinterlassen Sie bitte einen Kommentar und wir werden unser Bestes tun, um Ihnen zu helfen. Was ich heute geliefert habe, ist eine einfache Möglichkeit, Ihre Website zu durchsuchen. In einer realen Situation implementieren Sie jedoch höchstwahrscheinlich eine erweiterte Suchmethode. Ich würde gerne Ihre Gedanken über die besten Möglichkeiten hören, um dies zu erreichen.
Wenn Sie mehr ASP.NET-Tuts wünschen, hören Sie zu! Hinterlassen Sie einen Kommentar und äußern Sie Ihre Meinung. Dieses Framework ist zu mächtig, um es zu ignorieren. Digg es, SU es, DZone es! Danke an alle! Tschüss!
Abonnieren Sie die wöchentlichen Screencasts
Sie können unseren RSS-Feed Ihren ITUNES-Podcasts hinzufügen, indem Sie folgende Schritte ausführen:
Klicken Sie nach dem Laden von ITUNES auf die Registerkarte "Erweitert".
Wählen Sie "Podcast abonnieren"
Geben Sie "http://feeds.feedburner.com/NETTUTSVideos" ein.
Das sollte es tun! Der Screencast wird in den nächsten 24 Stunden auch auf ITUNES abrufbar sein.
Share
Accentsconagua
