Ui und Navigation

Artikel
07/16/2024

Wingtip Toys Sample Project (C#) herunterladen oder E-Book herunterladen (PDF)

In dieser Lernprogrammreihe lernen Sie die Grundlagen der Erstellung einer ASP.NET Web Forms-Anwendung mithilfe von ASP.NET 4.5 und Microsoft Visual Studio Express 2013 für Web kennen. Für diese Lernprogrammreihe steht ein Visual Studio 2013-Projekt mit C#-Quellcode zur Verfügung.

In diesem Lernprogramm ändern Sie die Benutzeroberfläche der Standardwebanwendung, um Features der Frontanwendung wingtip Toys zu unterstützen. Außerdem fügen Sie einfache und datengebundene Navigation hinzu. Dieses Lernprogramm baut auf dem vorherigen Lernprogramm "Erstellen der Datenzugriffsschicht" auf und ist Teil der Wingtip Toys-Lernreihe.

Sie lernen Folgendes:

So ändern Sie die Benutzeroberfläche, um Features der Wingtip Toys Store-Frontanwendung zu unterstützen.
So konfigurieren Sie ein HTML5-Element, um die Seitennavigation einzuschließen.
So erstellen Sie ein datengesteuertes Steuerelement, um zu bestimmten Produktdaten zu navigieren.
So zeigen Sie Daten aus einer Datenbank an, die mit Entity Framework Code First erstellt wurde.

mit ASP.NET Webformularen können Sie dynamische Inhalte für Ihre Webanwendung erstellen. Jede ASP.NET Webseite wird auf ähnliche Weise wie eine statische HTML-Webseite erstellt (eine Seite, die keine serverbasierte Verarbeitung enthält), aber ASP.NET Webseite enthält zusätzliche Elemente, die ASP.NET erkennt und verarbeitet, um HTML zu generieren, wenn die Seite ausgeführt wird.

Mit einer statischen HTML-Seite (.htm oder .html Datei) erfüllt der Server eine Web Anforderung, indem die Datei gelesen und wie im Browser gesendet wird. Im Gegensatz dazu wird die Seite als Programm auf dem Webserver ausgeführt, wenn jemand eine ASP.NET Webseite (.aspx Datei) anfordert. Während die Seite ausgeführt wird, kann sie jede Aufgabe ausführen, die Ihre Website benötigt, einschließlich der Berechnung von Werten, Lesen oder Schreiben von Datenbankinformationen oder Aufrufen anderer Programme. Als Ausgabe erzeugt die Seite dynamisch Markup (z. B. Elemente in HTML) und sendet diese dynamische Ausgabe an den Browser.

Ändern der Benutzeroberfläche

Sie setzen diese Lernprogrammreihe fort, indem Sie die Default.aspx Seite ändern. Sie ändern die Benutzeroberfläche, die bereits von der Standardvorlage erstellt wurde, die zum Erstellen der Anwendung verwendet wird. Die Art der Änderungen, die Sie beim Erstellen einer Beliebigen Webanwendung ausführen, sind typisch. Dazu ändern Sie den Titel, ersetzen einige Inhalte und entfernen nicht benötigte Standardinhalte.

Öffnen oder wechseln Sie zur Default.aspx Seite.
Wenn die Seite in der Entwurfsansicht angezeigt wird, wechseln Sie zur Quellansicht .

Ändern Sie oben auf der Seite in der @Page Direktive das Title Attribut in "Willkommen", wie unten in Gelb hervorgehoben.

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

Ersetzen Sie auch auf der seite Default.aspx den gesamten im <asp:Content> Tag enthaltenen Standardinhalt so, dass das Markup wie unten angezeigt wird.

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <h1><%: Title %>.</h1>
        <h2>Wingtip Toys can help you find the perfect gift.</h2>
        <p class="lead">We're all about transportation toys. You can order 
                any of our toys today. Each toy listing has detailed 
                information to help you choose the right toy.</p>
</asp:Content>

Speichern Sie die Default.aspx Seite, indem Sie im Menü "Datei" die Option "Default.aspx speichern" auswählen.

Die resultierende Default.aspx Seite wird wie folgt angezeigt:

<%@ Page Title="Welcome" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WingtipToys._Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
        <h1><%: Title %>.</h1>
        <h2>Wingtip Toys can help you find the perfect gift.</h2>
        <p class="lead">We're all about transportation toys. You can order 
                any of our toys today. Each toy listing has detailed 
                information to help you choose the right toy.</p>
</asp:Content>

Im Beispiel haben Sie das Title Attribut der @Page Direktive festgelegt. Wenn der HTML-Code in einem Browser angezeigt wird, wird der Servercode <%: Page.Title %> in den Inhalt aufgelöst, der Title im Attribut enthalten ist.

Die Beispielseite enthält die grundlegenden Elemente, die eine ASP.NET Webseite darstellen. Die Seite enthält statischen Text wie in einer HTML-Seite, zusammen mit Elementen, die für ASP.NET spezifisch sind. Der in der Default.aspx Seite enthaltene Inhalt wird in den Gestaltungsvorlageninhalt integriert, der weiter unten in diesem Lernprogramm erläutert wird.

@Page Richtlinie

ASP.NET WebFormulare enthalten in der Regel Direktiven, mit denen Sie Seiteneigenschaften und Konfigurationsinformationen für die Seite angeben können. Die Direktiven werden von ASP.NET als Anweisungen zum Verarbeiten der Seite verwendet, werden jedoch nicht als Teil des Markups gerendert, das an den Browser gesendet wird.

Die am häufigsten verwendete Direktive ist die Direktive, mit der @Page Sie viele Konfigurationsoptionen für die Seite angeben können, einschließlich der folgenden:

Die Programmiersprache des Servers für Code auf der Seite, z. B. C#.
Ob es sich bei der Seite um eine Seite mit Servercode direkt auf der Seite handelt, die als einzeldateiige Seite bezeichnet wird, oder ob es sich um eine Seite mit Code in einer separaten Klassendatei handelt, die als CodeBehind-Seite bezeichnet wird.
Gibt an, ob die Seite über eine zugeordnete Gestaltungsvorlage verfügt und daher als Inhaltsseite behandelt werden soll.
Debugging- und Ablaufverfolgungsoptionen.

Wenn Sie keine Direktive auf der Seite einschließen @Page oder wenn die Direktive keine bestimmte Einstellung enthält, wird eine Einstellung von der Konfigurationsdatei "Web.config " oder von der Konfigurationsdatei "Machine.config " geerbt. Die Datei Machine.config stellt zusätzliche Konfigurationseinstellungen für alle Anwendungen bereit, die auf einem Computer ausgeführt werden.

Hinweis

Die Machine.config enthält auch Details zu allen möglichen Konfigurationseinstellungen.

Webserversteuerelemente

In den meisten ASP.NET Webanwendungen fügen Sie Steuerelemente hinzu, mit denen der Benutzer mit der Seite interagieren kann, z. B. Schaltflächen, Textfelder, Listen usw. Diese Webserversteuerelemente ähneln HTML-Schaltflächen und Eingabeelementen. Sie werden jedoch auf dem Server verarbeitet, sodass Sie servercode verwenden können, um ihre Eigenschaften festzulegen. Diese Steuerelemente lösen auch Ereignisse aus, die Sie im Servercode behandeln können.

Serversteuerelemente verwenden eine spezielle Syntax, die ASP.NET erkennt, wenn die Seite ausgeführt wird. Der Tagname für ASP.NET Serversteuerelemente beginnt mit einem asp: Präfix. Auf diese Weise können ASP.NET diese Serversteuerelemente erkennen und verarbeiten. Das Präfix kann unterschiedlich sein, wenn das Steuerelement nicht Teil von .NET Framework ist. Zusätzlich zum asp: Präfix enthalten ASP.NET Serversteuerelemente auch das runat="server" Attribut und ein ID Attribut, das Sie verwenden können, um auf das Steuerelement im Servercode zu verweisen.

Wenn die Seite ausgeführt wird, identifiziert ASP.NET die Serversteuerelemente und führt den Code aus, der diesen Steuerelementen zugeordnet ist. Viele Steuerelemente rendern einige HTML- oder anderes Markup auf der Seite, wenn sie in einem Browser angezeigt wird.

Servercode

Die meisten ASP.NET Webanwendungen enthalten Code, der auf dem Server ausgeführt wird, wenn die Seite verarbeitet wird. Wie bereits erwähnt, kann Servercode verwendet werden, um eine Vielzahl von Dingen zu erledigen, z. B. das Hinzufügen von Daten zu einem ListView-Steuerelement. ASP.NET unterstützt viele Sprachen, die auf dem Server ausgeführt werden sollen, einschließlich C#, Visual Basic, J# und anderen.

ASP.NET unterstützt zwei Modelle zum Schreiben von Servercode für eine Webseite. Im Einzeldateimodell befindet sich der Code für die Seite in einem Skriptelement, in dem das Öffnende Tag das runat="server" Attribut enthält. Alternativ können Sie den Code für die Seite in einer separaten Klassendatei erstellen, die als CodeBehind-Modell bezeichnet wird. In diesem Fall enthält die ASP.NET Web Forms-Seite im Allgemeinen keinen Servercode. Stattdessen enthält die @Page Direktive Informationen, die die .aspx Seite mit der zugehörigen CodeBehind-Datei verknüpft.

Das CodeBehind in der @Page Direktive enthaltene Attribut gibt den Namen der separaten Klassendatei an, und das Inherits Attribut gibt den Namen der Klasse innerhalb der CodeBehind-Datei an, die der Seite entspricht.

Aktualisieren der Gestaltungsvorlage

In ASP.NET Web Forms können Sie mit Masterseiten ein einheitliches Layout für die Seiten in Ihrer Anwendung erstellen. Eine einzige Masterdseite definiert das Aussehen und das Standardverhalten, das Sie für alle Seiten (oder eine Gruppe von Seiten) in Ihrer Anwendung wünschen. Anschließend können Sie einzelne Inhaltsseiten erstellen, die den anzuzeigenden Inhalt enthalten, wie oben erläutert. Wenn Benutzer Inhaltsseiten anfordern, werden diese in ASP.NET mit der Masterseite zusammengeführt, um eine Ausgabe zu erstellen, in der das Layout der Masterseite mit dem Inhalt der Inhaltsseite kombiniert wird.

Die neue Website benötigt ein einzelnes Logo, um auf jeder Seite anzuzeigen. Um dieses Logo hinzuzufügen, können Sie den HTML-Code auf der Gestaltungsvorlage ändern.

Öffnen Sie im Projektmappen-Explorerdie Seite Site.Master .
Wenn sich die Seite in der Entwurfsansicht befindet, wechseln Sie zur Quellansicht .

Aktualisieren Sie die Gestaltungsvorlage, indem Sie das hervorgehobene Markup in Gelb ändern oder hinzufügen :

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WingtipToys.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - Wingtip Toys</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/">Wingtip Toys</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Register">Register</a></li>
                                <li><a runat="server" href="~/Account/Login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/Account/Manage" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>
        <div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image  ID="Image1" runat="server" ImageUrl="~/Images/logo.jpg" BorderStyle="None" />
            </a>  
            <br />  
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>&copy; <%: DateTime.Now.Year %> - Wingtip Toys</p>
            </footer>
        </div>
    </form>
</body>
</html>

Dieser HTML-Code zeigt das Bild mit dem Namen logo.jpg aus dem Ordner "Bilder" der Webanwendung an, das Sie später hinzufügen werden. Wenn eine Seite, die die Gestaltungsvorlage verwendet, in einem Browser angezeigt wird, wird das Logo angezeigt. Wenn ein Benutzer auf das Logo klickt, navigiert der Benutzer zurück zur Default.aspx Seite. Das HTML-Ankertag <a> umschließt das Bildserversteuerelement und ermöglicht die Aufnahme des Bilds als Teil des Links. Das href Attribut für das Ankertag gibt den Stamm "~/" der Website als Linkspeicherort an. Standardmäßig wird die Default.aspx Seite angezeigt, wenn der Benutzer zum Stamm der Website navigiert. Das Image-Server-Steuerelement <asp:Image> enthält zusätzliche Eigenschaften, z BorderStyle. B. das Rendern als HTML, wenn es in einem Browser angezeigt wird.

Masterseiten

Eine Gestaltungsvorlage ist eine ASP.NET Datei mit der Erweiterung ".master" (z . B. "Site.Master") mit einem vordefinierten Layout, das statischen Text, HTML-Elemente und Serversteuerelemente enthalten kann. Die Gestaltungsvorlage wird durch eine spezielle @Master Direktive identifiziert, die die Richtlinie ersetzt, die @Page für gewöhnliche .aspx Seiten verwendet wird.

Zusätzlich zur @Master Direktive enthält die Gestaltungsvorlage auch alle HTML-Elemente der obersten Ebene für eine Seite, z html. B. , headund form. Beispielsweise verwenden Sie auf der oben hinzugefügten Gestaltungsvorlage einen HTML-Code table für das Layout, ein img Element für das Firmenlogo, statischen Text und Serversteuerelemente, um allgemeine Mitgliedschaften für Ihre Website zu verarbeiten. Sie können beliebige HTML- und alle ASP.NET-Elemente als Teil Ihrer Gestaltungsvorlage verwenden.

Zusätzlich zu statischem Text und Steuerelementen, die auf allen Seiten angezeigt werden, enthält die Gestaltungsvorlage auch ein oder mehrere ContentPlaceHolder-Steuerelemente . Diese Platzhaltersteuerelemente definieren Bereiche, in denen ersetzbare Inhalte angezeigt werden. Der austauschbare Inhalt wird wiederum in Inhaltsseiten definiert, z . B. Default.aspx, mithilfe des Inhaltsserversteuerelements .

Hinzufügen von Bilddateien

Das oben referenzierte Logobild muss zusammen mit allen Produktbildern der Webanwendung hinzugefügt werden, damit sie angezeigt werden können, wenn das Projekt in einem Browser angezeigt wird.

Herunterladen von DER MSDN-Beispielwebsite:

Erste Schritte mit ASP.NET 4.5 Web Forms und Visual Studio 2013 – Wingtip Toys (C#)

Der Download enthält Ressourcen im Ordner WingtipToys-Assets , die zum Erstellen der Beispielanwendung verwendet werden.

Falls noch nicht geschehen, laden Sie die komprimierten Beispieldateien über den obigen Link von der MSDN Samples-Website herunter.
Öffnen Sie nach dem Herunterladen die .zip Datei, und kopieren Sie den Inhalt in einen lokalen Ordner auf Ihrem Computer.
Suchen und öffnen Sie den Ordner WingtipToys-Assets .
Kopieren Sie durch Ziehen und Ablegen den Katalogordner aus Ihrem lokalen Ordner in das Stammverzeichnis des Webanwendungsprojekts in der Projektmappen-Explorer von Visual Studio.
Erstellen Sie als Nächstes einen neuen Ordner namens "Images", indem Sie mit der rechten Maustaste auf das WingtipToys-Projekt in Projektmappen-Explorer klicken und "Hinzufügen ->Neuer Ordner" auswählen.
Kopieren Sie die logo.jpg Datei aus dem Ordner WingtipToys-Assets in Explorer in den Ordner "Bilder" des Webanwendungsprojekts in Projektmappen-Explorer von Visual Studio.
Klicken Sie oben in Projektmappen-Explorer auf die Option "Alle Dateien anzeigen", um die Liste der Dateien zu aktualisieren, wenn die neuen Dateien nicht angezeigt werden.

Projektmappen-Explorer zeigt jetzt die aktualisierten Projektdateien an.

Hinzufügen von Seiten

Bevor Sie der Webanwendung Navigation hinzufügen, fügen Sie zuerst zwei neue Seiten hinzu, zu denen Sie navigieren. Später in dieser Lernprogrammreihe zeigen Sie Produkte und Produktdetails auf diesen neuen Seiten an.

Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf WingtipToys, klicken Sie auf "Hinzufügen", und klicken Sie dann auf "Neues Element".
Das Dialogfeld Neues Element hinzufügen wird angezeigt.
Wählen Sie auf der linken Seite die Gruppe "Visual C# ->Webvorlagen " aus. Wählen Sie dann Webformular mit Gestaltungsvorlage aus der mittleren Liste aus, und nennen Sie es ProductList.aspx.
Wählen Sie "Site.Master" aus, um die Gestaltungsvorlage an die neu erstellte .aspx Seite anzufügen.
Fügen Sie eine zusätzliche Seite namens ProductDetails.aspx hinzu, indem Sie die gleichen Schritte ausführen.

Aktualisieren von Bootstrap

Die Visual Studio 2013-Projektvorlagen verwenden Bootstrap, ein Layout und Designframework, das von Twitter erstellt wurde. Bootstrap verwendet CSS3, um dynamisches Design bereitzustellen, was bedeutet, dass Layouts dynamisch an verschiedene Browserfenstergrößen angepasst werden können. Sie können auch das Designfeature von Bootstrap verwenden, um eine Änderung des Erscheinungsbilds der Anwendung auf einfache Weise zu erzielen. Standardmäßig enthält die ASP.NET-Webanwendungsvorlage in Visual Studio 2013 Bootstrap als NuGet-Paket.

In diesem Lernprogramm ändern Sie das Aussehen und Verhalten der Wingtip Toys-Anwendung, indem Sie die Bootstrap-CSS-Dateien ersetzen.

Öffnen Sie in Projektmappen-Explorer den Ordner "Inhalt".
Klicken Sie mit der rechten Maustaste auf die bootstrap.css Datei, und benennen Sie sie in bootstrap-original.css um.
Benennen Sie die bootstrap.min.css in bootstrap-original.min.css um.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Inhaltsordner, und wählen Sie "Ordner öffnen" in Explorer aus.
Die Explorer wird angezeigt. Sie speichern eine heruntergeladene Bootstrap-CSS-Dateien an diesem Speicherort.
Wechseln Sie in Ihrem Browser zu https://bootswatch.com/3/.
Scrollen Sie im Browserfenster, bis das Cerulean-Design angezeigt wird.
Laden Sie sowohl die bootstrap.css-Datei als auch die bootstrap.min.css-Datei in den Ordner "Inhalt" herunter. Verwenden Sie den Pfad zum Inhaltsordner, der im Explorer Fenster angezeigt wird, das Sie zuvor geöffnet haben.
Wählen Sie in Visual Studio oben in Projektmappen-Explorer die Option "Alle Dateien anzeigen" aus, um die neuen Dateien im Inhaltsordner anzuzeigen.

Im Inhaltsordner werden die beiden neuen CSS-Dateien angezeigt, beachten Sie jedoch, dass das Symbol neben jedem Dateinamen abgeblendt ist. Dies bedeutet, dass die Datei noch nicht zum Projekt hinzugefügt wurde.
Klicken Sie mit der rechten Maustaste auf die bootstrap.css und die bootstrap.min.css Dateien, und wählen Sie "In Projekt einschließen" aus.
Wenn Sie die Wingtip Toys-Anwendung später in diesem Lernprogramm ausführen, wird die neue Benutzeroberfläche angezeigt.

Hinweis

Die ASP.NET Webanwendungsvorlage verwendet die Datei "Bundle.config " im Stammverzeichnis des Projekts, um den Pfad der Bootstrap-CSS-Dateien zu speichern.

Die Standardnavigation für jede Seite in der Anwendung kann geändert werden, indem das nicht sortierte Navigationslistenelement geändert wird, das sich auf der Seite "Site.Master " befindet.

Suchen Und öffnen Sie in Projektmappen-Explorer die Seite "Site.Master".

Fügen Sie den gelb hervorgehobenen zusätzlichen Navigationslink zur unten gezeigten nicht angeordneten Liste hinzu:

<ul class="nav navbar-nav">
    <li><a runat="server" href="~/">Home</a></li>
    <li><a runat="server" href="~/About">About</a></li>
    <li><a runat="server" href="~/Contact">Contact</a></li>
    <li><a runat="server" href="~/ProductList">Products</a></li>
</ul>

Wie Sie im obigen HTML-Code sehen können, haben Sie jedes Zeilenelement <li> mit einem Ankertag <a> mit einem Link-Attribut href geändert. Jede href zeigt auf eine Seite in der Webanwendung. Wenn ein Benutzer im Browser auf einen dieser Links klickt (z . B. Produkte), navigiert er zu der Seite, die in der href Seite enthalten ist (z . B. ProductList.aspx). Sie führen die Anwendung am Ende dieses Lernprogramms aus.

Hinweis

Das Tildezeichen (~) wird verwendet, um anzugeben, dass der href Pfad am Stammverzeichnis des Projekts beginnt.

Als Nächstes fügen Sie ein Steuerelement hinzu, um alle Kategorien aus der Datenbank anzuzeigen. Jede Kategorie fungiert als Link zur ProductList.aspx Seite. Wenn ein Benutzer im Browser auf einen Kategorielink klickt, navigiert er zur Produktseite und sieht nur die Produkte, die der ausgewählten Kategorie zugeordnet sind.

Sie verwenden ein ListView-Steuerelement , um alle kategorien anzuzeigen, die in der Datenbank enthalten sind. So fügen Sie der Gestaltungsvorlage ein ListView-Steuerelement hinzu:

Fügen Sie auf der Seite "Site.Master " das folgende hervorgehobene <div> Element nach dem <div> Element hinzu, das das id="TitleContent" zuvor hinzugefügte Element enthält:

<div id="TitleContent" style="text-align: center">
            <a runat="server" href="~/">
                <asp:Image  ID="Image1" runat="server" ImageUrl="~/img/logo.jpg" BorderStyle="None" />
            </a>  
            <br />  
        </div>
        <div id="CategoryMenu" style="text-align: center">       
            <asp:ListView ID="categoryList"  
                ItemType="WingtipToys.Models.Category" 
                runat="server"
                SelectMethod="GetCategories" >
                <ItemTemplate>
                    <b style="font-size: large; font-style: normal">
                        <a href="/ProductList.aspx?id=<%#: Item.CategoryID %>">
                        <%#: Item.CategoryName %>
                        </a>
                    </b>
                </ItemTemplate>
                <ItemSeparatorTemplate>  |  </ItemSeparatorTemplate>
            </asp:ListView>
        </div>

Dieser Code zeigt alle Kategorien aus der Datenbank an. Das ListView-Steuerelement zeigt jeden Kategorienamen als Linktext an und enthält einen Link zur ProductList.aspx Seite mit einem Abfragezeichenfolgenwert, der die ID Kategorie enthält. Durch Festlegen der ItemType Eigenschaft im ListView-Steuerelement ist der Datenbindungsausdruck Item innerhalb des ItemTemplate Knotens verfügbar, und das Steuerelement wird stark typiert. Sie können Details des Item Objekts mithilfe von IntelliSense auswählen, z. B. die Angabe der CategoryName. Dieser Code ist im Container <%#: %> enthalten, der einen Datenbindungsausdruck kennzeichnet. Durch Hinzufügen des (:) am Ende des <%# Präfixes wird das Ergebnis des Datenbindungsausdrucks HTML-codiert. Wenn das Ergebnis HTML-codiert ist, ist Ihre Anwendung besser vor websiteübergreifenden Skripteinfügungen (XSS) und HTML-Einfügungsangriffen geschützt.

Hinweis

Tipp

Wenn Sie Während der Entwicklung Code hinzufügen, können Sie sicher sein, dass ein gültiges Element eines Objekts gefunden wird, da stark typierte Datensteuerelemente die verfügbaren Elemente basierend auf IntelliSense anzeigen. IntelliSense bietet kontextgerechte Codeoptionen beim Eingeben von Code, z. B. Eigenschaften, Methoden und Objekte.

Im nächsten Schritt implementieren Sie die GetCategories Methode zum Abrufen von Daten.

Verknüpfen des Datensteuerelements mit der Datenbank

Bevor Sie Daten im Datensteuerelement anzeigen können, müssen Sie das Datensteuerelement mit der Datenbank verknüpfen. Um den Link zu erstellen, können Sie den CodeBehind der Site.Master.cs Datei ändern.

Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf die Seite "Site.Master", und klicken Sie dann auf "Code anzeigen". Die Site.Master.cs Datei wird im Editor geöffnet.

Fügen Sie am Anfang der datei Site.Master.cs zwei zusätzliche Namespaces hinzu, damit alle enthaltenen Namespaces wie folgt angezeigt werden:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Linq;
using WingtipToys.Models;

Fügen Sie die hervorgehobene GetCategories Methode nach dem Page_Load Ereignishandler wie folgt hinzu:

protected void Page_Load(object sender, EventArgs e)
{

}

public IQueryable<Category> GetCategories()
{
  var _db = new WingtipToys.Models.ProductContext();
  IQueryable<Category> query = _db.Categories;
  return query;
}

Der obige Code wird ausgeführt, wenn eine Beliebige Seite, die die Gestaltungsvorlage verwendet, im Browser geladen wird. Das ListView Steuerelement (mit dem Namen "categoryList"), das Sie weiter oben in diesem Lernprogramm hinzugefügt haben, verwendet die Modellbindung zum Auswählen von Daten. Im Markup des ListView Steuerelements legen Sie die Eigenschaft des Steuerelements SelectMethod auf die GetCategories oben gezeigte Methode fest. Das ListView Steuerelement ruft die GetCategories Methode zum entsprechenden Zeitpunkt im Seitenlebenszyklus auf und bindet die zurückgegebenen Daten automatisch. Weitere Informationen zum Binden von Daten finden Sie im nächsten Lernprogramm.

Ausführen der Anwendung und Erstellen der Datenbank

Weiter oben in dieser Lernprogrammreihe haben Sie eine Initialisierungsklasse (mit dem Namen "ProductDatabaseInitializer") erstellt und diese Klasse in der global.asax.cs Datei angegeben. Das Entity Framework generiert die Datenbank, wenn die Anwendung zum ersten Mal ausgeführt wird, da die Application_Start in der global.asax.cs Datei enthaltene Methode die Initialisierungsklasse aufruft. Die Initialisierungsklasse verwendet die Modellklassen (Category und Product), die Sie weiter oben in dieser Lernprogrammreihe hinzugefügt haben, um die Datenbank zu erstellen.

Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf die Default.aspx Seite, und wählen Sie "Als Startseite festlegen" aus.
Drücken Sie in Visual Studio F5.
Es dauert etwas Zeit, alles während dieser ersten Ausführung einzurichten.

Wenn Sie die Anwendung ausführen, wird die Anwendung kompiliert, und die Datenbank mit dem Namen wingtiptoys.mdf wird im Ordner App_Data erstellt. Im Browser wird ein Kategorienavigationsmenü angezeigt. Dieses Menü wurde durch Abrufen der Kategorien aus der Datenbank generiert. Im nächsten Lernprogramm implementieren Sie die Navigation.
Schließen Sie den Browser, um die ausgeführte Anwendung zu beenden.

Überprüfen der Datenbank

Öffnen Sie die Datei "Web.config", und sehen Sie sich den Abschnitt Verbindungszeichenfolge an. Sie können sehen, dass der AttachDbFilename Wert im Verbindungszeichenfolge auf das DataDirectory Webanwendungsprojekt verweist. Der Wert |DataDirectory| ist ein reservierter Wert, der den ordner App_Data im Projekt darstellt. In diesem Ordner befindet sich die Datenbank, die aus Ihren Entitätsklassen erstellt wurde.

<connectionStrings>
    <add name="DefaultConnection" 
         connectionString="Data Source=(LocalDb)\MSSQLLocalDB;Initial Catalog=aspnet-WingtipToys-20120302100502;Integrated Security=True"
         providerName="System.Data.SqlClient" />
    <add name="WingtipToys" 
         connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\wingtiptoys.mdf;Integrated Security=True"
         providerName="System.Data.SqlClient " />
  </connectionStrings>

Hinweis

Wenn der ordner App_Data nicht sichtbar ist oder der Ordner leer ist, wählen Sie das Symbol "Aktualisieren" und dann das Symbol "Alle Dateien anzeigen" oben im Projektmappen-Explorer Fenster aus. Wenn Sie die Breite der Projektmappen-Explorer Fenster erweitern, ist möglicherweise erforderlich, um alle verfügbaren Symbole anzuzeigen.

Jetzt können Sie die in der wingtiptoys.mdf Datenbankdatei enthaltenen Daten mithilfe des Server-Explorer-Fensters überprüfen.

Erweitern Sie den Ordner App_Data . Wenn der ordner "App_Data " nicht sichtbar ist, lesen Sie die obige Notiz.
Wenn die wingtiptoys.mdf-Datenbankdatei nicht sichtbar ist, wählen Sie das Symbol "Aktualisieren" und dann das Symbol "Alle Dateien anzeigen" oben im fenster Projektmappen-Explorer aus.
Klicken Sie mit der rechten Maustaste auf die wingtiptoys.mdf Datenbankdatei, und wählen Sie "Öffnen" aus.
Der Server-Explorer wird angezeigt.
Erweitern Sie den Ordner Tabellen .
Klicken Sie mit der rechten Maustaste auf die Tabelle "Produkte", und wählen Sie "Tabellendaten anzeigen" aus.
Die Tabelle "Produkte " wird angezeigt.
In dieser Ansicht können Sie die Daten in der Tabelle "Produkte " manuell anzeigen und ändern.
Schließen Sie das Tabellenfenster " Produkte ".
Klicken Sie im Server-Explorer erneut mit der rechten Maustaste auf die Tabelle "Produkte", und wählen Sie "Tabellendefinition öffnen" aus.
Das Datendesign für die Tabelle " Produkte " wird angezeigt.
Auf der Registerkarte T-SQL wird die SQL DDL-Anweisung angezeigt, die zum Erstellen der Tabelle verwendet wurde. Sie können die Benutzeroberfläche auch auf der Registerkarte "Entwurf " verwenden, um das Schema zu ändern.
Klicken Sie im Server-Explorer mit der rechten Maustaste auf wingtipToys-Datenbank, und wählen Sie "Verbindung schließen" aus.
Durch das Trennen der Datenbank von Visual Studio kann das Datenbankschema später in dieser Lernprogrammreihe geändert werden.
Kehren Sie zu Projektmappen-Explorer zurück, indem Sie unten im Server-Explorer-Fenster die Registerkarte Projektmappen-Explorer auswählen.

Zusammenfassung

In diesem Lernprogramm der Reihe haben Sie einige grundlegende UI, Grafiken, Seiten und Navigation hinzugefügt. Darüber hinaus haben Sie die Webanwendung ausgeführt, die die Datenbank aus den Datenklassen erstellt hat, die Sie im vorherigen Lernprogramm hinzugefügt haben. Sie haben auch den Inhalt des Products-Tabellen der Datenbank angezeigt, indem Sie die Datenbank direkt anzeigen. Im nächsten Lernprogramm zeigen Sie Datenelemente und Details aus der Datenbank an.

Weitere Ressourcen

Einführung in die Programmierung ASP.NET Webseiten
Übersicht über ASP.NET Webserversteuerelemente
CSS-Lernprogramm

Zurück Weiter

Freigeben über

Benutzeroberfläche und Navigation

Sie lernen Folgendes:

Ändern der Benutzeroberfläche

@Page Richtlinie

Webserversteuerelemente

Servercode

Aktualisieren der Gestaltungsvorlage

Masterseiten

Hinzufügen von Bilddateien

Herunterladen von DER MSDN-Beispielwebsite:

Hinzufügen von Seiten

Aktualisieren von Bootstrap

Ändern der Standardnavigation

Hinzufügen eines Datensteuerelements zum Anzeigen von Navigationsdaten

Verknüpfen des Datensteuerelements mit der Datenbank

Ausführen der Anwendung und Erstellen der Datenbank

Überprüfen der Datenbank

Zusammenfassung

Weitere Ressourcen

Feedback

Zusätzliche Ressourcen