Erste Schritte mit ASP.NET

von Tom FitzMacken

Für die Entwicklung neuer Web-Apps empfehlen wir Blazor.

Hinweis

WebMatrix wird nicht mehr als integrierte Entwicklungsumgebung für ASP.NET Webseiten empfohlen. Verwenden Sie Visual Studio oder Visual Studio Code.

Diese Anleitung und Anwendung bietet Ihnen eine Übersicht über ASP.NET Webseiten (Version 2 oder höher) und Razor-Syntax, ein einfaches Framework zum Erstellen dynamischer Websites. Außerdem wird WebMatrix eingeführt, ein Tool zum Erstellen von Seiten und Websites.

Ebene: Neu bei ASP.NET Webseiten.
Angenommene Fähigkeiten: HTML, grundlegende Cascading Stylesheets (CSS).

Was Sie im ersten Lernprogramm der Gruppe lernen:

• Was ASP.NET Web Pages Technologie ist und wofür es ist.
• Was WebMatrix ist.
• So installieren Sie alles.
• Erstellen einer Website mithilfe von WebMatrix

Behandelte Features/Technologien:

• Microsoft-Webplattform Installer.
• WebMatrix.
• CSHTML-Seiten

Mike Pope schrieb ursprünglich dieses Lernprogramm. Tom FitzMacken hat es für Microsoft WebMatrix 3 aktualisiert.

Im Lernprogramm verwendete Softwareversionen

• ASP.NET Webseiten (Razor) 2
• WebMatrix 3

Was sollten Sie wissen?

Wir gehen davon aus, dass Sie mit folgenden Kenntnissen vertraut sind:

• HTML. Es ist kein fundiertes Know-how erforderlich. Wir werden HTML nicht erläutern, aber wir verwenden auch nichts Komplexes. Wir stellen Links zu HTML-Lernprogrammen bereit, in denen wir der Meinung sind, dass sie nützlich sind.
• Cascading Stylesheets (CSS) Identisch mit HTML.
• Grundlegende Datenbankideen. Wenn Sie eine Kalkulationstabelle für Daten verwendet und die Daten sortiert und gefiltert haben, ist dies die Kompetenzstufe, die in der Regel für diesen Lernprogrammsatz vorausgesetzt wird.

Wir gehen auch davon aus, dass Sie an der grundlegenden Programmierung interessiert sind. ASP.NET Webseiten verwenden eine Programmiersprache namens "C#". Sie müssen keinen Hintergrund in der Programmierung haben, nur ein Interesse daran. Wenn Sie jemals JavaScript auf einer Webseite geschrieben haben, haben Sie viel Hintergrund.

Wenn Sie mit der Programmierung vertraut sind, stellen Sie möglicherweise fest, dass dieser Lernprogrammsatz anfangs langsam verschoben wird, während wir neue Programmierer auf den neuesten Stand bringen. Da wir jedoch über die ersten Lernprogramme hinauskommen, gibt es weniger grundlegende Programmierung, um zu erläutern, und die Dinge werden sich an einem schnelleren Clip bewegen.

Was benötigen Sie?

Sie benötigen Folgendes:

• Ein Computer mit Windows 8, Windows 7, Windows Server 2008 oder Windows Server 2012.
• Eine Internetverbindung.
• Administratorrechte (erforderlich für den Installationsprozess).

Was ist ASP.NET Webseiten?

ASP.NET Webseiten ist ein Framework, mit dem Sie dynamische Webseiten erstellen können. Eine einfache HTML-Webseite ist statisch; Der Inhalt wird durch das feste HTML-Markup bestimmt, das sich auf der Seite befindet. Mit dynamischen Seiten wie diesen, die Sie mit ASP.NET Webseiten erstellen, können Sie den Seiteninhalt dynamisch mithilfe von Code erstellen.

Mit dynamischen Seiten können Sie alle möglichen Aktionen ausführen. Sie können einen Benutzer um Eingabe bitten, indem Sie ein Formular verwenden und dann ändern, was die Seite anzeigt oder wie sie aussieht. Sie können Informationen von einem Benutzer abrufen, in einer Datenbank speichern und später auflisten. Sie können E-Mails von Ihrer Website senden. Sie können mit anderen Diensten im Web interagieren (z. B. einen Zuordnungsdienst) und Seiten erstellen, die Informationen aus diesen Quellen integrieren.

Was ist WebMatrix?

WebMatrix ist ein Tool, das einen Webseiten-Editor, ein Datenbankhilfsprogramm, einen Webserver zum Testen von Seiten und Features zum Veröffentlichen Ihrer Website im Internet integriert. WebMatrix ist kostenlos, und es ist einfach zu installieren und einfach zu bedienen. (Es funktioniert auch für nur einfache HTML-Seiten sowie für andere Technologien wie PHP.)

Sie müssen WebMatrix nicht verwenden, um mit ASP.NET Webseiten zu arbeiten. Sie können Seiten mithilfe eines Text-Editors erstellen, z. B. mithilfe eines Webservers, auf den Sie Zugriff haben. WebMatrix macht es jedoch sehr einfach, sodass diese Lernprogramme WebMatrix überall verwenden.

Informationen zu diesen Lernprogrammen

Dieser Lernprogrammsatz ist eine Einführung in die Verwendung ASP.NET Webseiten. In diesem Einführungslernprogramm sind insgesamt 9 Lernprogramme enthalten. Es ist Teil einer Reihe von Lernprogrammsätzen, die Sie von ASP.NET Webseiten-Anfängern zum Erstellen von echten, professionell aussehenden Websites führt.

Dieses erste Lernprogramm konzentriert sich auf die Grundlagen der Arbeit mit ASP.NET Webseiten. Wenn Sie fertig sind, können Sie mit zusätzlichen Lernprogrammsätzen arbeiten, die dort weiterarbeiten, wo diese endet und webseiten ausführlicher erkunden.

Wir gehen bewusst auf die ausführlichen Erklärungen ein. Und wenn wir etwas zeigen, wählen wir für dieses Lernprogramm immer die Art und Weise aus, wie wir denken, am einfachsten zu verstehen. Spätere Lernprogramme gehen tiefer und zeigen Ihnen effizientere oder flexiblere Ansätze (auch mehr Spaß). Diese Lernprogramme erfordern jedoch, dass Sie zuerst die Grundlagen verstehen.

Der Lernprogrammsatz, den Sie gerade begonnen haben, behandelt diese Features von ASP.NET Webseiten:

• Einführung und Abrufen aller installierten Elemente. (Das ist im Lernprogramm, das Sie lesen.)
• Die Grundlagen der Programmierung von ASP.NET Webseiten.
• Erstellen einer Datenbank.
• Erstellen und Verarbeiten eines Benutzereingabeformulars.
• Hinzufügen, Aktualisieren und Löschen von Daten in der Datenbank.

Was erstellen Sie?

Dieses Lernprogramm und nachfolgende drehen sich um eine Website, auf der Sie Filme auflisten können, die Ihnen gefallen. Sie können Filme eingeben, bearbeiten und auflisten. Hier sind einige der Seiten, die Sie in diesem Lernprogramm erstellen. Im ersten wird die Filmauflistungsseite angezeigt, die Sie erstellen:

Und hier ist die Seite, auf der Sie ihrer Website neue Filminformationen hinzufügen können:

Nachfolgende Lernprogrammsätze bauen auf dieser Gruppe auf und fügen weitere Funktionen hinzu, z. B. das Hochladen von Bildern, das Anmelden von Personen, das Senden von E-Mails und die Integration in soziale Medien.

Anzeigen dieser App, die unter Azure ausgeführt wird

Möchten Sie sehen, dass die fertige Website als Live-Web-App ausgeführt wird? Sie können eine vollständige Version der App in Ihrem Azure-Konto bereitstellen, indem Sie einfach auf die folgende Schaltfläche klicken.

Sie benötigen ein Azure-Konto, um diese Lösung in Azure bereitzustellen. Wenn Sie noch nicht über ein Konto verfügen, haben Sie die folgenden Optionen:

• Öffnen Sie ein Kostenloses Azure-Konto – Sie erhalten Guthaben, mit dem Sie kostenpflichtige Azure-Dienste ausprobieren können, und auch nachdem sie verwendet wurden, können Sie das Konto behalten und kostenlose Azure-Dienste verwenden.
• Aktivieren sie die Vorteile von MSDN-Abonnenten – Ihr MSDN-Abonnement bietet Ihnen monatlich Gutschriften, die Sie für kostenpflichtige Azure-Dienste verwenden können.

Alles installieren

Sie können alles mithilfe des Web platform Installer von Microsoft installieren. In Der Tat installieren Sie das Installationsprogramm, und verwenden Sie es dann, um alles andere zu installieren.

Um Webseiten zu verwenden, müssen Sie mindestens Windows XP mit SP3 oder Windows Server 2008 oder höher installiert haben.

Klicken Sie auf der Seite "Webseiten" der ASP.NET-Website auf " Installieren".

Sie werden aufgefordert, die Lizenzbedingungen und Datenschutzbestimmungen zu akzeptieren, bevor Sie WebMatrix installieren.

Klicken Sie auf "Ausführen" , um die Installation zu starten. (Wenn Sie das Installationsprogramm speichern möchten, klicken Sie auf Speichern Sie das Installationsprogramm, und führen Sie es dann aus dem Ordner aus, in dem Sie es gespeichert haben.)

Der Webplattform-Installer wird angezeigt, bereit für die Installation von WebMatrix. Klicken Sie auf Installieren.

Der Installationsprozess stellt fest, was auf Ihrem Computer installiert werden muss, und startet den Prozess. Je nachdem, was genau installiert werden muss, kann der Prozess von ein paar Minuten bis zu mehreren Minuten dauern. Wählen Sie "Ich stimme zu" aus, um die Lizenzbedingungen zu akzeptieren.

Hallo, WebMatrix

Wenn dies abgeschlossen ist, kann der Installationsprozess WebMatrix automatisch starten. Wenn dies nicht der Der Grund ist, starten Sie in Windows im Startmenü Microsoft WebMatrix.

Wenn Sie WebMatrix zum ersten Mal starten, erhalten Sie die Möglichkeit, sich mit Ihrem Microsoft-Konto bei Microsoft Azure anzumelden. Durch die Anmeldung erhalten Sie 10 kostenlose Web-Apps über Azure. Diese kostenlosen Web-Apps bieten eine bequeme Möglichkeit, Ihre Apps zu testen. Wenn Sie noch nicht über ein Azure-Konto verfügen, aber über ein MSDN-Abonnement verfügen, können Sie Ihre MSDN-Abonnementvorteile aktivieren. Andernfalls können Sie in nur wenigen Minuten ein kostenloses Testkonto erstellen. Ausführliche Informationen finden Sie unter Einen Monat kostenlos testen.

Sie müssen sich im Moment nicht anmelden, um mit diesem Lernprogramm fortzufahren. Wenn Sie sich jetzt nicht anmelden, haben Sie weiterhin die Möglichkeit, sich später anzumelden. Im letzten Thema dieser Lernprogrammreihe wird erläutert, wie Sie Ihre Website in Azure bereitstellen. Daher müssen Sie sich anmelden, um dieses Thema abzuschließen.

Melden Sie sich an diesem Punkt entweder mit Ihrem Microsoft-Konto an, oder wählen Sie "Nicht jetzt" in der unteren rechten Ecke aus.

Zunächst erstellen Sie eine leere Website und fügen eine Seite hinzu. In einem späteren Lernprogramm in diesem Satz spielen Sie mit einer der integrierten Websitevorlagen.

Klicken Sie im Startfenster auf "Neu".

Vorlagen sind vorgefertigte Dateien und Seiten für verschiedene Arten von Websites. Um alle vorlagen anzuzeigen, die standardmäßig verfügbar sind, wählen Sie die Option "Vorlagenkatalog" aus.

Wählen Sie im Schnellstartfenster in der Gruppe ASP.NET "Leere Website" aus, und nennen Sie die neue Website "WebPagesMovies".

Klicken Sie auf Weiter.

Wenn Sie sich bei Ihrem Microsoft-Konto angemeldet haben, erhalten Sie die Möglichkeit, die Website in Azure zu erstellen. Basierend auf dem Namen Ihrer Website wird der Standardname von WebPagesMovies.azurewebsites.net vorgeschlagen. Das Ausrufezeichen gibt jedoch an, dass dieser Name unter Windows Azure nicht verfügbar ist. Wählen Sie aus Gründen der Einfachheit die Option "Überspringen" aus, um die Erstellung der Website in Azure im Moment zu umgehen. Später in dieser Reihe veröffentlichen wir die Website in Azure.

WebMatrix erstellt und öffnet die Website:

Oben befindet sich eine Symbolleiste für den Schnellzugriff und ein Menüband. Unten links wird die Arbeitsbereichsauswahl angezeigt, in der Sie zwischen Aufgaben wechseln (Website, Dateien, Datenbanken, Berichte). Rechts befindet sich der Inhaltsbereich für den Editor und für Berichte. Unten sehen Sie gelegentlich eine Benachrichtigungsleiste für Nachrichten.

Sie erfahren mehr über WebMatrix und seine Features, während Sie diese Lernprogramme durchlaufen.

Erstellen einer Webseite

Um sich mit WebMatrix und ASP.NET Webseiten vertraut zu machen, erstellen Sie eine einfache Seite.

Wählen Sie in der Arbeitsbereichsauswahl den Arbeitsbereich "Dateien " aus. In diesem Arbeitsbereich können Sie mit Dateien und Ordnern arbeiten. Im linken Bereich wird die Dateistruktur Ihrer Website angezeigt. Das Menüband ändert sich, um dateibezogene Aufgaben anzuzeigen.

Klicken Sie im Menüband auf den Pfeil unter "Neu ", und klicken Sie dann auf "Neue Datei".

WebMatrix zeigt eine Liste von Dateitypen an. Wählen Sie CSHTML aus, und geben Sie im Feld "Name" "HelloWorld" ein. Eine CSHTML-Seite ist eine ASP.NET Webseite.

Klicken Sie auf OK.

WebMatrix erstellt die Seite und öffnet sie im Editor.

Wie Sie sehen können, enthält die Seite meist normales HTML-Markup, mit Ausnahme eines Blocks oben, der wie folgt aussieht:

@{ 

}

Dies ist das Hinzufügen von Code, wie Sie in Kürze sehen.

Beachten Sie, dass die verschiedenen Teile der Seite – die Elementnamen, Attribute und Text sowie der Block oben – alle in unterschiedlichen Farben enthalten sind. Dies wird als Syntaxmarkierung bezeichnet und erleichtert es, alles klar zu halten. Es ist eine der Features, die das Arbeiten mit Webseiten in WebMatrix vereinfachen.

Fügen Sie Inhalte für die <head> und <body> Elemente wie im folgenden Beispiel hinzu. (Wenn Sie möchten, können Sie einfach den folgenden Block kopieren und die gesamte vorhandene Seite durch diesen Code ersetzen.)

@{

}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
    </body>
</html>

Klicken Sie in der Symbolleiste für den Schnellzugriff oder im Menü "Datei " auf " Speichern".

Testen der Seite

Klicken Sie im Arbeitsbereich "Dateien" mit der rechten Maustaste auf die Seite "HelloWorld.cshtml", und klicken Sie dann im Browser auf "Starten".

WebMatrix startet einen integrierten Webserver (IIS Express), mit dem Sie Seiten auf Ihrem Computer testen können. (Ohne IIS Express in WebMatrix müssen Sie Ihre Seite an einem Webserver veröffentlichen, bevor Sie sie testen können.) Die Seite wird in Ihrem Standardbrowser angezeigt.

Beachten Sie, dass beim Testen einer Seite in WebMatrix die URL im Browser ungefähr wie http://localhost:33651/HelloWorld.cshtml. der Name localhost auf einen lokalen Server verweist, was bedeutet, dass die Seite von einem Webserver bedient wird, der sich auf Ihrem eigenen Computer befindet. Wie bereits erwähnt, enthält WebMatrix ein Webserverprogramm namens IIS Express, das beim Starten einer Seite ausgeführt wird.

Die Nummer nach localhost (z . B. localhost:33651) bezieht sich auf eine Portnummer auf Ihrem Computer. Dies ist die Nummer des "Kanals", den IIS Express für diese bestimmte Website verwendet. Die Portnummer wird zufällig aus dem Bereich 1024 bis 65536 ausgewählt, wenn Sie Ihre Website erstellen, und dies unterscheidet sich für jede Website, die Sie erstellen. (Wenn Sie Ihre eigene Website testen, ist die Portnummer fast sicher eine andere Nummer als 33561.) Wenn Sie für jede Website einen anderen Port verwenden, kann IIS Express direkt mit welchen Ihrer Websites sprechen.

Wenn Sie Ihre Website später auf einem öffentlichen Webserver veröffentlichen, wird "localhost" nicht mehr in der URL angezeigt. An diesem Punkt wird eine typischere URL wie http://myhostingsite/mywebsite/HelloWorld.cshtml oder was auch immer die Seite ist, angezeigt. Weitere Informationen zum Veröffentlichen einer Website finden Sie weiter unten in dieser Lernprogrammreihe.

Hinzufügen von serverseitigem Code

Schließen Sie den Browser, und wechseln Sie zurück zur Seite in WebMatrix.

Fügen Sie dem Codeblock eine Zeile hinzu, damit sie wie der folgende Code aussieht:

@{
   var currentDateTime = DateTime.Now;
}

Dies ist ein bisschen Razor Code. Es ist wahrscheinlich klar, dass er das aktuelle Datum und die aktuelle Uhrzeit abruft und diesen Wert in eine Variable mit dem Namen currentDateTimeeinfügt. Weitere Informationen zur Razor-Syntax finden Sie im nächsten Lernprogramm.

Fügen Sie im Textkörper der Seite nach dem <p>Hello World!</p> Element Folgendes hinzu:

<p>Right now it's @currentDateTime</p>

Dieser Code ruft den Wert ab, den Sie in die currentDateTime Variable oben einfügen und in das Markup der Seite einfügen. Das @ Zeichen markiert den ASP.NET Webseitencode auf der Seite.

Führen Sie die Seite erneut aus (WebMatrix speichert die Änderungen für Sie, bevor sie die Seite ausführt). Dieses Mal wird das Datum und die Uhrzeit auf der Seite angezeigt.

Warten Sie ein paar Augenblicke, und aktualisieren Sie dann die Seite im Browser. Die Datums- und Uhrzeitanzeige wird aktualisiert.

Sehen Sie sich im Browser die Seitenquelle an. Dieser sieht wie das folgende Markup aus:

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello World Page</title>
    </head>
    <body>
        <h1>Hello World Page</h1>
        <p>Hello World!</p>
        <p>Right now it's 1/18/2012 2:49:50 PM</p>
    </body>
</html>

Beachten Sie, dass der @{ } Block oben nicht vorhanden ist. Beachten Sie außerdem, dass die Anzeige von Datum und Uhrzeit eine tatsächliche Zeichenfolge mit Zeichen (1/18/2012 2:49:50 PM oder was auch immer) angezeigt wird, nicht @currentDateTime wie auf der CSHTML-Seite . Was hier passiert ist, ist, dass beim Ausführen der Seite ASP.NET den gesamten Code (in diesem Fall sehr wenig) verarbeitet hat, der mit @markiert wurde. Der Code erzeugt die Ausgabe, und diese Ausgabe wurde in die Seite eingefügt.

Dies sind ASP.NET Webseiten

Wenn Sie lesen, dass ASP.NET Webseiten dynamische Webinhalte erzeugen, ist die Idee, die Sie hier gesehen haben. Die soeben erstellte Seite enthält das gleiche HTML-Markup, das Sie zuvor gesehen haben. Sie kann auch Code enthalten, der alle Arten von Aufgaben ausführen kann. In diesem Beispiel wurde die triviale Aufgabe zum Abrufen des aktuellen Datums und der aktuellen Uhrzeit ausgeführt. Wie Sie gesehen haben, können Sie Code mit dem HTML-Code überlappen, um die Ausgabe auf der Seite zu erzeugen. Wenn jemand eine CSHTML-Seite im Browser anfordert, verarbeitet ASP.NET die Seite, während sie sich noch in den Händen des Webservers befindet. ASP.NET fügt die Ausgabe des Codes (falls vorhanden) als HTML in die Seite ein. Wenn die Codeverarbeitung abgeschlossen ist, sendet ASP.NET die resultierende Seite an den Browser. Der gesamte Browser erhält jemals HTML. Hier ist ein Diagramm:

Die Idee ist einfach, aber es gibt viele interessante Aufgaben, die der Code ausführen kann, und es gibt viele interessante Möglichkeiten, wie Sie HTML-Inhalte dynamisch zur Seite hinzufügen können. Und ASP.NET CSHTML-Seiten , wie jede HTML-Seite, kann auch Code enthalten, der im Browser selbst ausgeführt wird (JavaScript- und jQuery-Code). Sie werden all diese Dinge in diesem Lernprogramm und in nachfolgenden Lernprogrammen erkunden.

Nächster Schritt

Im nächsten Lernprogramm dieser Reihe erkunden Sie ASP.NET Web pages programming a little more.

Weitere Ressourcen

Erstellen Sie eine ASP.NET Website von Grund auf neu. Dies ist ein Lernprogramm, das speziell die Verwendung von WebMatrix (nicht ASP.NET Webseiten) behandelt. Es geht etwas ausführlicher über einige der zusätzlichen Features von WebMatrix, die in diesem Lernprogramm nicht behandelt werden.

Nächste