Benutzeroberfläche und Navigation

Artikel
07/13/2023

Herunterladen des Wingtip Toys-Beispielprojekts (C#) oder E-Book herunterladen (PDF)

Diese Tutorialreihe vermittelt Ihnen die Grundlagen zum Erstellen einer ASP.NET Web Forms-Anwendung mit ASP.NET 4.5 und Microsoft Visual Studio Express 2013 für Web. Ein Visual Studio 2013-Projekt mit C#-Quellcode ist für diese Tutorialreihe verfügbar.

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

Sie lernen Folgendes:

So ändern Sie die Benutzeroberfläche, um Features der Wingtip Toys Store-Frontanwendung zu unterstützen.
Hier erfahren Sie, wie Sie ein HTML5-Element konfigurieren, um die Seitennavigation einzuschließen.
Erstellen eines datengesteuerten Steuerelements zum Navigieren zu bestimmten Produktdaten
Hier erfahren Sie, wie Sie Daten aus einer Datenbank anzeigen, die mit Entity Framework Code First erstellt wurde.

mit ASP.NET Web Forms können Sie dynamische Inhalte für Ihre Webanwendung erstellen. Jede ASP.NET Webseite wird ähnlich 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 er die Datei liest und sie unverändert an den Browser sendet. Wenn dagegen jemand eine ASP.NET Webseite (ASPX-Datei ) anfordert, wird die Seite als Programm auf dem Webserver ausgeführt. Während die Seite ausgeführt wird, kann sie jede Aufgabe ausführen, die Ihre Website erfordert, z. B. das Berechnen von Werten, das Lesen oder Schreiben von Datenbankinformationen oder das 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 Tutorialreihe fort, indem Sie die Seite Default.aspx ändern. Sie ändern die Benutzeroberfläche, die bereits von der Standardvorlage zum Erstellen der Anwendung eingerichtet wurde. Die Art der Änderungen, die Sie vornehmen, sind typisch, wenn Sie eine Web Forms-Anwendung erstellen. Dazu ändern Sie den Titel, ersetzen einige Inhalte und entfernen nicht benötigte Standardinhalte.

Öffnen Sie die Seite Default.aspx , oder wechseln Sie zu dieser 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 "Welcome", wie unten 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 Standardinhalt, der <asp:Content> im Tag enthalten ist, sodass das Markup wie folgt 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 Seite Default.aspx, 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 -Anweisung festgelegt. Wenn der HTML-Code in einem Browser angezeigt wird, wird der Servercode <%: Page.Title %> in den Im Title -Attribut enthaltenen Inhalt aufgelöst.

Die Beispielseite enthält die grundlegenden Elemente, die eine ASP.NET Webseite bilden. Die Seite enthält statischen Text wie auf einer HTML-Seite sowie Elemente, die für ASP.NET spezifisch sind. Der auf der Seite "Default.aspx" enthaltene Inhalt wird in den Inhalt der master Seite integriert, der später in diesem Tutorial erläutert wird.

@Page Richtlinie

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

Die am häufigsten verwendete Direktive ist die @Page -Direktive, mit der 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#.
Gibt an, ob es sich bei der Seite um eine Seite mit Servercode handelt, die direkt in der Seite als Einzeldateiseite 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 master Seite verfügt und daher als Inhaltsseite behandelt werden soll.
Debug- und Ablaufverfolgungsoptionen.

Wenn Sie auf der Seite keine Direktive einschließen @Page oder die -Direktive keine bestimmte Einstellung enthält, wird eine Einstellung von derWeb.config-Konfigurationsdatei oder von der Machine.config Konfigurationsdatei geerbt. Die Machine.config-Datei 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 Web Forms Anwendungen fügen Sie Steuerelemente hinzu, die es dem Benutzer ermöglichen, mit der Seite zu interagieren, z. B. Schaltflächen, Textfelder, Listen usw. Diese Webserversteuerelemente ähneln HTML-Schaltflächen und Eingabeelementen. Sie werden jedoch auf dem Server verarbeitet, sodass Sie ihre Eigenschaften mithilfe von Servercode festlegen können. 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. Dadurch können ASP.NET diese Serversteuerelemente erkennen und verarbeiten. Das Präfix kann anders sein, wenn das Steuerelement nicht Teil der .NET Framework ist. Zusätzlich zum asp: Präfix enthalten ASP.NET Serversteuerelemente auch das runat="server" -Attribut und ein ID -Element, 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 html- oder anderes Markup auf der Seite, wenn sie in einem Browser angezeigt wird.

Servercode

Die meisten ASP.NET Web Forms Anwendungen enthalten Code, der auf dem Server ausgeführt wird, wenn die Seite verarbeitet wird. Wie bereits erwähnt, kann Servercode für eine Vielzahl von Aufgaben verwendet werden, z. B. zum Hinzufügen von Daten zu einem ListView-Steuerelement. ASP.NET unterstützt viele Sprachen für die Ausführung auf dem Server, einschließlich C#, Visual Basic, J# und andere.

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 Seite ASP.NET Web Forms in der Regel keinen Servercode. Stattdessen enthält die @Page -Anweisung Informationen, die die ASPX-Seite mit der zugeordneten CodeBehind-Datei verknüpft.

Das CodeBehind in der @Page -Anweisung enthaltene Attribut gibt den Namen der separaten Klassendatei an, und das Inherits Attribut gibt den Namen der Klasse in 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 inhalt enthalten, den Sie anzeigen möchten, 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, das auf jeder Seite angezeigt werden soll. Um dieses Logo hinzuzufügen, können Sie den HTML-Code auf der Seite master ändern.

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

Aktualisieren Sie die seite master, indem Sie das in Gelb hervorgehobene Markup ä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>

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

Masterseiten

Eine master-Seite 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 master Seite wird durch eine spezielle @Master Direktive identifiziert, die die -Direktive ersetzt, die @Page für gewöhnliche ASPX-Seiten verwendet wird.

Zusätzlich zur @Master -Direktive enthält die Seite master auch alle HTML-Elemente der obersten Ebene für eine Seite, zhtml. B. , headund form. Auf der master Seite, die Sie oben hinzugefügt haben, verwenden Sie beispielsweise einen HTML-Code table für das Layout, ein img Element für das Unternehmenslogo, statischen Text und Serversteuerelemente, um die allgemeine Mitgliedschaft für Ihre Website zu verarbeiten. Sie können beliebige HTML- und ASP.NET-Elemente als Teil Ihrer master-Seite verwenden.

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

Hinzufügen von Bilddateien

Das Logobild, auf das oben verwiesen wird, sowie alle Produktbilder müssen der Webanwendung hinzugefügt werden, damit sie angezeigt werden können, wenn das Projekt in einem Browser angezeigt wird.

Laden Sie von der MSDN-Beispielwebsite herunter:

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 Ordner Katalog aus Ihrem lokalen Ordner in den Stamm des Webanwendungsprojekts im Projektmappen-Explorer von Visual Studio.
Erstellen Sie als Nächstes einen neuen Ordner namens Images, indem Sie in Projektmappen-Explorer mit der rechten Maustaste auf das Projekt WingtipToys klicken und Hinzufügen –>Neuer Ordner auswählen.
Kopieren Sie die logo.jpg-Datei aus dem Ordner WingtipToys-Assets in Explorer in den Ordner Images 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 zunächst zwei neue Seiten hinzu, zu denen Sie navigieren. Später in dieser Tutorialreihe 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 links 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 master Seite an die neu erstellte ASPX-Seite anzufügen.
Fügen Sie eine zusätzliche Seite mit dem Namen ProductDetails.aspx hinzu, indem Sie die gleichen Schritte ausführen.

Aktualisieren von Bootstrap

Die Visual Studio 2013 Projektvorlagen verwenden Bootstrap, ein von Twitter erstelltes Layout- und Designframework. Bootstrap verwendet CSS3, um ein reaktionsfähiges 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 auf einfache Weise eine Änderung des Erscheinungsbilds der Anwendung zu bewirken. Standardmäßig enthält die Vorlage ASP.NET Webanwendung in Visual Studio 2013 Bootstrap als NuGet-Paket.

In diesem Tutorial ändern Sie das Erscheinungsbild 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 Datei bootstrap.css , und benennen Sie sie in bootstrap-original.css um.
Benennen Sie bootstrap.min.css in bootstrap-original.min.css um.
Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Inhalt, und wählen Sie Ordner in Explorer öffnen aus.
Die Explorer wird angezeigt. Sie speichern eine heruntergeladene Bootstrap-CSS-Datei an diesem Speicherort.
Navigieren Sie im Browser zu https://bootswatch.com/3/.
Scrollen Sie im Browserfenster, bis das Cerulean-Design angezeigt wird.
Laden Sie sowohl die Datei bootstrap.css als auch die Datei bootstrap.min.css in den Ordner Content 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 Ordner Inhalt anzuzeigen.

Sie sehen die beiden neuen CSS-Dateien im Ordner Inhalt , aber beachten Sie, dass das Symbol neben jedem Dateinamen abgeblendet ist. Dies bedeutet, dass die Datei dem Projekt noch nicht hinzugefügt wurde.
Klicken Sie mit der rechten Maustaste auf die Dateien bootstrap.css und bootstrap.min.css , und wählen Sie In Projekt einschließen aus.
Wenn Sie die Wingtip Toys-Anwendung später in diesem Tutorial ausführen, wird die neue Benutzeroberfläche angezeigt.

Hinweis

Die Vorlage ASP.NET Webanwendung verwendet die dateiBundle.config im Stammverzeichnis des Projekts, um den Pfad der Bootstrap-CSS-Dateien zu speichern.

Die Standardnavigation für jede Seite in der Anwendung kann durch Ändern des ungeordneten Navigationslistenelements auf der Seite Site.Master geändert werden.

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

Fügen Sie der unten gezeigten ungeordneten Liste den gelb hervorgehobenen zusätzlichen Navigationslink 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> geändert, das ein Ankertag <a> mit einem Link-Attribut href enthält. Jedes 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 href in enthalten ist (z. B. ProductList.aspx). Sie führen die Anwendung am Ende dieses Tutorials aus.

Hinweis

Das Tildezeichen (~) wird verwendet, um anzugeben, dass der href Pfad am Stamm 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 Seite ProductList.aspx . 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 in der Datenbank enthaltenen Kategorien anzuzeigen. So fügen Sie der Seite master ein ListView-Steuerelement hinzu:

Fügen Sie auf der Seite Site.Master das folgende hervorgehobene <div> Element nach dem <div> Element hinzu, das den id="TitleContent" zuvor hinzugefügten 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>

In diesem Code werden alle Kategorien aus der Datenbank angezeigt. Das ListView-Steuerelement zeigt jeden Kategorienamen als Linktext an und enthält einen Link zur Seite ProductList.aspx mit einem Abfragezeichenfolgenwert, der den der ID Kategorie enthält. Wenn Sie die ItemType -Eigenschaft im ListView-Steuerelement festlegen, ist der Datenbindungsausdruck Item innerhalb des ItemTemplate Knotens verfügbar, und das Steuerelement wird stark typisiert. Sie können Details des Item Objekts mithilfe von IntelliSense auswählen, z. B. die Angabe von CategoryName. Dieser Code ist in dem Container <%#: %> enthalten, der einen Datenbindungsausdruck markiert. Durch Hinzufügen von (:) bis zum Ende des <%# Präfixes ist das Ergebnis des Datenbindungsausdrucks HTML-codiert. Wenn das Ergebnis HTML-codiert ist, ist Ihre Anwendung besser vor XSS-Angriffen (Cross-Site Script Injection) und HTML-Einschleusung geschützt.

Hinweis

Tipp

Wenn Sie Code hinzufügen, indem Sie während der Entwicklung eingeben, können Sie sicher sein, dass ein gültiges Element eines Objekts gefunden wird, da stark typisierte Datensteuerelemente die verfügbaren Member basierend auf IntelliSense anzeigen. IntelliSense bietet kontextgerechte Codeoptionen, wenn Sie Code eingeben, 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 Code Behind der Datei "Site.Master.cs " ändern.

Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf die Seite Site.Master, und klicken Sie dann auf Code anzeigen. Die Datei Site.Master.cs 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 Seite, die die master Seite verwendet, in den Browser geladen wird. Das ListView Steuerelement (mit dem Namen "categoryList"), das Sie weiter oben in diesem Tutorial hinzugefügt haben, verwendet die Modellbindung, um Daten auszuwählen. Im Markup des ListView Steuerelements legen Sie die -Eigenschaft des Steuerelements SelectMethod auf die Oben gezeigte GetCategories -Methode fest. Das ListView -Steuerelement ruft die GetCategories -Methode zum geeigneten Zeitpunkt im Seitenlebenszyklus auf und bindet die zurückgegebenen Daten automatisch. Weitere Informationen zum Binden von Daten finden Sie im nächsten Tutorial.

Ausführen der Anwendung und Erstellen der Datenbank

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

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

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

Überprüfen der Datenbank

Öffnen Sie die dateiWeb.config , und sehen Sie sich den Abschnitt verbindungszeichenfolge an. Sie können sehen, dass der AttachDbFilename Wert in der Verbindungszeichenfolge auf den DataDirectory für das Webanwendungsprojekt verweist. Der Wert |DataDirectory| ist ein reservierter Wert, der den App_Data Ordner 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 App_Data Ordner nicht sichtbar ist oder wenn der Ordner leer ist, wählen Sie das Symbol Aktualisieren und dann das Symbol Alle Dateien anzeigen am oberen Rand des Projektmappen-Explorer Fensters aus. Das Erweitern der Breite der Projektmappen-Explorer Fenstern ist möglicherweise erforderlich, um alle verfügbaren Symbole anzuzeigen.

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

Erweitern Sie den Ordner App_Data . Wenn der ordner App_Data nicht sichtbar ist, sehen Sie sich den Hinweis oben an.
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 Datenbankdatei wingtiptoys.mdf , und wählen Sie Öffnen aus.
Server Explorer wird angezeigt.
Erweitern Sie den Ordner Tabellen .
Klicken Sie mit der rechten Maustaste auf die Tabelle Products, und wählen Sie Tabellendaten anzeigen aus.
Die Tabelle Products wird angezeigt.
Mit dieser Ansicht können Sie die Daten in der Tabelle Products manuell anzeigen und ändern.
Schließen Sie das Tabellenfenster Products .
Klicken Sie im Explorer Server erneut mit der rechten Maustaste auf die Tabelle Products, und wählen Sie Tabellendefinition öffnen aus.
Der Datenentwurf für die Tabelle Products wird angezeigt.
Auf der Registerkarte T-SQL wird die SQL DDL-Anweisung angezeigt, die zum Erstellen der Tabelle verwendet wurde. Sie können auch die Benutzeroberfläche auf der Registerkarte Entwurf verwenden, um das Schema zu ändern.
Klicken Sie im Explorer Server mit der rechten Maustaste auf WingtipToys-Datenbank, und wählen Sie Verbindung schließen aus.
Durch Trennen der Datenbank von Visual Studio kann das Datenbankschema später in dieser Tutorialreihe geändert werden.
Kehren Sie zu Projektmappen-Explorer Indem Sie unten im Fenster Server Explorer die Registerkarte Projektmappen-Explorer auswählen.

Zusammenfassung

In diesem Tutorial der Reihe haben Sie einige grundlegende Benutzeroberfläche, 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 Tutorial hinzugefügt haben. Sie haben auch den Inhalt der Tabelle Products der Datenbank angezeigt, indem Sie die Datenbank direkt anzeigen. Im nächsten Tutorial zeigen Sie Datenelemente und Details aus der Datenbank an.

Zusätzliche Ressourcen

Einführung in die Programmierung ASP.NET Web Pages
Übersicht über ASP.NET Webserversteuerelemente
CSS-Tutorial

Zurück Weiter

Share via

Benutzeroberfläche und Navigation

Sie lernen Folgendes:

Ändern der Benutzeroberfläche

@Page Richtlinie

Webserversteuerelemente

Servercode

Aktualisieren der Gestaltungsvorlage

Masterseiten

Hinzufügen von Bilddateien

Laden Sie von der MSDN-Beispielwebsite herunter:

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

Zusätzliche Ressourcen

Feedback

Feedback

Zusätzliche Ressourcen