Erste Schritte mit ASP.NET

von Tom FitzMacken

Für die Entwicklung neuer Webanwendungen empfehlen wir Razor Pages. Weitere Informationen finden Sie unter Erste Schritte mit Razor Pages.

Hinweis

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

Diese Anleitung und Anwendung gibt Ihnen einen Überblick über ASP.NET Web Pages (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 ASP.NET Web Pages.
Vorausgesetzte Fähigkeiten: HTML, grundlegende Cascading Stylesheets (CSS).

Was Sie im ersten Tutorial der Gruppe lernen werden:

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

Beschriebene Features/Technologien:

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

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

Im Tutorial verwendete Softwareversionen

• ASP.NET Web Pages (Razor) 2
• WebMatrix 3

Was sollten Sie wissen?

Wir gehen davon aus, dass Sie mit Folgendes vertraut sind:

• HTML. Es ist kein fundiertes Fachwissen erforderlich. Wir werden HTML nicht erklären, aber wir verwenden auch nichts Komplexes. Wir stellen Links zu HTML-Tutorials bereit, in denen sie unserer Meinung nach 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 Erfahrungsebene, von der wir in der Regel für diesen Tutorialsatz ausgehen.

Wir gehen auch davon aus, dass Sie daran interessiert sind, die grundlegende Programmierung zu erlernen. ASP.NET Web Pages eine Programmiersprache namens C# verwenden. Sie müssen keinen Hintergrund in der Programmierung haben, nur ein Interesse daran. Wenn Sie schon einmal JavaScript in einer Webseite geschrieben haben, haben Sie viel Hintergrund.

Wenn Sie mit der Programmierung vertraut sind, stellen Sie möglicherweise fest, dass sich dieser Tutorialsatz zunächst langsam bewegt, während wir neue Programmierer auf den neuesten Stand bringen. Wenn wir jedoch über die ersten Tutorials hinauskommen, wird es weniger grundlegende Programmierung geben, die erklärt werden muss, und die Dinge werden in einem schnelleren Clip vorankommen.

Was benötigen Sie?

Sie benötigen Folgendes:

• Ein Computer, auf dem Windows 8, Windows 7, Windows Server 2008 oder Windows Server 2012 ausgeführt wird.
• Eine Live-Internetverbindung.
• Administratorrechte (erforderlich für den Installationsprozess).

Was ist ASP.NET Web Pages?

ASP.NET Web Pages ist ein Framework, mit dem Sie dynamische Webseiten erstellen können. Eine einfache HTML-Webseite ist statisch; sein Inhalt wird durch das feste HTML-Markup bestimmt, das sich auf der Seite befindet. Dynamische Seiten wie die, die Sie mit ASP.NET Web Pages ermöglichen es Ihnen, den Seiteninhalt im Fly-Format mithilfe von Code zu erstellen.

Mit dynamischen Seiten können Sie alle möglichen Dinge erledigen. Sie können einen Benutzer mithilfe eines Formulars um Eingabe bitten und dann ändern, wie die Seite angezeigt wird 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 einfach zu installieren und einfach zu bedienen. (Es funktioniert auch nur für einfache HTML-Seiten, sowie für andere Technologien wie PHP.)

Sie müssen WebMatrix nicht verwenden, um mit ASP.NET Web Pages zu arbeiten. Sie können Seiten z. B. mit einem Text-Editor erstellen und Seiten mithilfe eines Webservers testen, auf den Sie Zugriff haben. WebMatrix macht es jedoch sehr einfach, sodass diese Tutorials WebMatrix überall verwenden.

Informationen zu diesen Tutorials

In diesem Tutorialsatz erfahren Sie, wie Sie ASP.NET Web Pages verwenden. In diesem Einführungstutorialsatz sind insgesamt 9 Tutorials enthalten. Es ist Teil einer Reihe von Tutorialsätzen, die Sie von ASP.NET Web Pages Anfängern bis zur Erstellung echter, professionell aussehender Websites führen.

Dieser erste Tutorialsatz konzentriert sich darauf, Ihnen die Grundlagen der Arbeit mit ASP.NET Web Pages zu zeigen. Wenn Sie fertig sind, können Sie mit zusätzlichen Tutorialsätzen arbeiten, die den Ort aufgreifen, an dem diese endet, und die Webseiten ausführlicher erkunden.

Die ausführlichen Erläuterungen werden bewusst vereinfacht. Und wenn wir etwas zeigen, wählen wir für diesen Tutorialsatz immer die Art und Weise, die wir für am einfachsten zu verstehen halten. Spätere Tutorialsätze gehen in die Tiefe und zeigen Ihnen effizientere oder flexiblere Ansätze (auch mehr Spaß). Diese Tutorials erfordern jedoch, dass Sie zuerst die Grundlagen verstehen.

Der Tutorialsatz, den Sie gerade gestartet haben, behandelt die folgenden Features von ASP.NET Web Pages:

• Einführung und Installation von alles. (Dies ist in dem Tutorial enthalten, das Sie lesen.)
• Die Grundlagen der ASP.NET Web Pages Programmierung.
• Erstellen einer Datenbank.
• Erstellen und Verarbeiten eines Benutzereingabeformulars
• Hinzufügen, Aktualisieren und Löschen von Daten in der Datenbank.

Was erstellen Sie?

Dieses Tutorialset und die nachfolgenden 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 Tutorialsatz erstellen werden. Die erste zeigt die Filmlisteseite an, die Sie erstellen:

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

Nachfolgende Tutorialsätze bauen auf diesem Satz 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.

Siehe Diese App wird in Azure ausgeführt.

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 kein Konto haben, haben Sie die folgenden Optionen:

• Kostenloses Öffnen eines Azure-Kontos : Sie erhalten Guthaben, mit dem Sie kostenpflichtige Azure-Dienste ausprobieren können, und selbst wenn sie aufgebraucht sind, können Sie das Konto behalten und kostenlose Azure-Dienste nutzen.
• Aktivieren von MSDN-Abonnentenvorteilen : Ihr MSDN-Abonnement bietet Ihnen jeden Monat Gutschriften, die Sie für kostenpflichtige Azure-Dienste verwenden können.

Alles installieren

Sie können alles installieren, indem Sie den Webplattform-Installer von Microsoft verwenden. In der Tat installieren Sie das Installationsprogramm und verwenden es dann, um alles andere zu installieren.

Um Webseiten verwenden zu können, muss mindestens Windows XP mit SP3 oder Windows Server 2008 oder höher installiert sein.

Klicken Sie auf der Seite Webseiten der website ASP.NET auf Installieren.

Sie werden gebeten, 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 , und führen Sie dann das Installationsprogramm aus dem Ordner aus, in dem Sie es gespeichert haben.)

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

Der Installationsprozess ermittelt, was auf Ihrem Computer installiert werden muss, und startet den Prozess. Je nachdem, was genau installiert werden muss, kann der Prozess zwischen wenigen Augenblicken und mehreren Minuten dauern. Wählen Sie Ich stimme zu, um die Lizenzbedingungen zu akzeptieren.

Hallo, WebMatrix

Wenn dies abgeschlossen ist, kann der Installationsprozess WebMatrix automatisch starten. Wenn dies nicht der Fall ist, starten Sie in Windows über das StartmenüMicrosoft WebMatrix.

Wenn Sie WebMatrix zum ersten Mal starten, haben Sie die Möglichkeit, sich mit Ihrem Microsoft-Konto bei Microsoft Azure anzumelden. Wenn Sie sich anmelden, 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 wenigen Minuten ein kostenloses Testkonto erstellen. Ausführliche Informationen finden Sie unter Einen Monat kostenlos testen.

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

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

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

Klicken Sie im Startfenster auf Neu.

Vorlagen sind vordefinierte 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 die Option 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 WebPagesMovies.azurewebsites.net vorgeschlagen. Das Ausrufezeichen gibt jedoch an, dass dieser Name in Windows Azure nicht verfügbar ist. Der Einfachheit halber wählen Sie Überspringen aus, um die Erstellung der Website in Azure sofort zu umgehen. Später in dieser Reihe veröffentlichen wir die Website in Azure.

WebMatrix erstellt und öffnet die Website:

Oben befinden sich eine Symbolleiste für den Schnellzugriff und ein Menüband. Unten links sehen Sie die Arbeitsbereichsauswahl, in der Sie zwischen Aufgaben wechseln (Website, Dateien, Datenbanken, Berichte). Auf der rechten Seite 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 Funktionen, während Sie diese Tutorials durchlaufen.

Erstellen einer Webseite

Um sich mit WebMatrix und ASP.NET Web Pages 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 den Namen "HelloWorld" ein. Eine CSHTML-Seite ist eine ASP.NET Web Pages Seite.

Klicken Sie auf OK.

WebMatrix erstellt die Seite und öffnet sie im Editor.

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

@{ 

}

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

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

Fügen Sie Wie im folgenden Beispiel Inhalte für die <head> - und <body> -Elemente 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 auf 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 auf Im Browser starten.

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

Beachten Sie, dass beim Testen einer Seite in WebMatrix die URL im Browser etwa der http://localhost:33651/HelloWorld.cshtml. Name localhost auf einen lokalen Server verweist, was bedeutet, dass die Seite von einem Webserver bereitgestellt 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 Zahl 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 spezielle Website verwendet. Die Portnummer wird nach dem Zufallsprinzip aus dem Bereich 1024 bis 65536 ausgewählt, wenn Sie Ihre Website erstellen, und sie unterscheidet sich für jede website, die Sie erstellen. (Wenn Sie Ihre eigene Website testen, ist die Portnummer mit ziemlicher Sicherheit eine andere Nummer als 33561.) Durch die Verwendung eines anderen Ports für jede Website können IIS Express direkt bleiben, mit welcher Ihrer Websites sie kommunizieren.

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

Hinzufügen von Server-Side Code

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

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

@{
   var currentDateTime = DateTime.Now;
}

Dies ist ein wenig Razor-Code. Es ist wahrscheinlich klar, dass das aktuelle Datum und die aktuelle Uhrzeit abgerufen und dieser Wert in eine Variable namens eingefügt currentDateTimewird. Weitere Informationen zur Razor-Syntax finden Sie im nächsten Tutorial.

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 oben in die currentDateTime Variable einfügen, und fügt ihn in das Markup der Seite ein. Das @ Zeichen markiert den ASP.NET Web Pages Code auf der Seite.

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

Warten Sie einige 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 auch, dass die Datums- und Uhrzeitanzeige eine tatsächliche Zeichenfolge (1/18/2012 2:49:50 PM oder was auch immer) zeigt, 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 eine Ausgabe, und diese Ausgabe wurde in die Seite eingefügt.

Darum geht es in ASP.NET Web Pages

Wenn Sie lesen, dass ASP.NET Web Pages dynamische Webinhalte erzeugt, haben Sie hier die Idee gesehen. Die soeben erstellte Seite enthält das gleiche HTML-Markup, das Sie zuvor gesehen haben. Es kann auch Code enthalten, der alle Arten von Aufgaben ausführen kann. In diesem Beispiel hat es die triviale Aufgabe des Abrufens des aktuellen Datums und der aktuellen Uhrzeit ausgeführt. Wie Sie gesehen haben, können Sie Code mit dem HTML-Code durchtrennen, um eine 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. Alles, was der Browser jemals erhält, ist HTML. Im Folgenden sehen Sie 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 der Seite dynamisch HTML-Inhalte hinzufügen können. Und ASP.NET CSHTML-Seiten können wie jede HTML-Seite auch Code enthalten, der im Browser selbst ausgeführt wird (JavaScript- und jQuery-Code). Sie erkunden all diese Dinge in diesem Tutorialsatz und in den nachfolgenden.

Nächster Schritt

Im nächsten Tutorial dieser Reihe erkunden Sie ASP.NET Web Pages Programmierung noch ein wenig mehr.

Zusätzliche Ressourcen

Erstellen Sie eine ASP.NET Website von Grund auf neu. In diesem Tutorial geht es insbesondere um die Verwendung von WebMatrix (nicht ASP.NET Web Pages). Es geht ein wenig ausführlicher um einige der zusätzlichen Features von WebMatrix, die wir in diesem Tutorialsatz nicht behandeln werden.

Nächste