In diesem Lernprogramm wird Microsoft WebMatrix vorgestellt, eine kostenlose Webentwicklungstechnologie, die Webentwicklern eine der besten Erfahrungen bietet.

Was Sie lernen werden:

• Was ist WebMatrix??
• So installieren Sie WebMatrix.
• So erstellen Sie eine einfache Website mit WebMatrix.
• So erstellen Sie eine dynamische Webseite mit WebMatrix.
• So programmieren Sie Ihre Webseiten in Visual Studio, um erweiterte Funktionen zu nutzen.

Was ist WebMatrix??

WebMatrix ist ein kostenloser Satz von Web-Entwicklungstools, der die einfachste Methode zum Erstellen von Websites bietet.

Dazu gehören IIS Express (ein Entwicklungs-Webserver), ASP.NET (ein Web-Framework) und SQL Server Compact (eine eingebettete Datenbank). Es enthält auch ein einfaches Tool, das die Website-Entwicklung rationalisiert und das Starten von Websites aus beliebten Open-Source-Apps vereinfacht. Die Kenntnisse und der Code, die Sie mit WebMatrix entwickeln, werden nahtlos zu Visual Studio und SQL Server übertragen.

Die Webseiten, die Sie mit WebMatrix erstellen, können dynamisch sein, dh sie können ihren Inhalt oder Stil basierend auf Benutzereingaben oder anderen Informationen wie Datenbankinformationen ändern. Um dynamische Webseiten zu programmieren, verwenden Sie ASP.NET mit der Razor-Syntax und mit den Programmiersprachen C # oder Visual Basic.

Wenn Sie bereits über Programmiertools verfügen, die Ihnen gefallen, können Sie die WebMatrix-Tools ausprobieren oder mit Ihren eigenen Tools Websites erstellen, die ASP.NET verwenden.

Dieses Tutorial zeigt Ihnen, wie Sie mit WebMatrix schnell und einfach Websites und dynamische Webseiten erstellen können.

WebMatrix installieren

Um WebMatrix zu installieren, können Sie den Web Platform Installer von Microsoft verwenden. Hierbei handelt es sich um eine kostenlose Anwendung, die die Installation und Konfiguration webbezogener Technologien vereinfacht.

1. Wenn Sie das Web Platform-Installationsprogramm noch nicht installiert haben, laden Sie es von der folgenden URL herunter:

   http://go.microsoft.com/fwlink/?LinkID=205867

2. Führen Sie das Web Platform-Installationsprogramm aus, und wählen Sie aus Scheinwerfer, und klicken Sie dann auf Hinzufügen um WebMatrix zu installieren.
   

   HinweisWenn Sie bereits eine WebMatrix-Betaversion installiert haben, aktualisiert das Web Platform-Installationsprogramm die Installation auf WebMatrix 1.0. Sites, die Sie mit früheren Beta-Editionen erstellt haben, werden möglicherweise nicht in der angezeigt Meine Sites Liste, wenn Sie WebMatrix zum ersten Mal öffnen. Um eine zuvor erstellte Site zu öffnen, klicken Sie auf Site aus Ordner Symbol, navigieren Sie zur Site und öffnen Sie sie. Wenn Sie das nächste Mal WebMatrix öffnen, wird die Site im angezeigt Meine Sites Liste.

Erste Schritte mit WebMatrix

Zunächst erstellen Sie eine neue Website und eine einfache Webseite.

1. Starten Sie WebMatrix.
2. Klicken Site von der Vorlage. Vorlagen enthalten vorgefertigte Dateien und Seiten für verschiedene Arten von Websites.
3. Wählen Leere Site und benennen Sie die neue Site Hallo Welt.
4. Klicken OK. WebMatrix erstellt und öffnet die neue Site.

   Oben sehen Sie, wie in Microsoft Office 2010, eine Symbolleiste für den Schnellzugriff und eine Multifunktionsleiste. Links unten sehen Sie die Arbeitsbereichsauswahl, die Schaltflächen enthält, die bestimmen, was im linken Bereich darüber angezeigt wird. Auf der rechten Seite befindet sich der Inhaltsbereich, in dem Sie Berichte anzeigen, Dateien bearbeiten usw. Am unteren Rand befindet sich schließlich die Benachrichtigungsleiste, auf der Meldungen nach Bedarf angezeigt werden.

   

Eine Webseite erstellen

1. Wählen Sie in WebMatrix das aus Dateien Arbeitsplatz. In diesem Arbeitsbereich können Sie mit Dateien und Ordnern arbeiten. Der linke Bereich zeigt die Dateistruktur Ihrer Site.
2. Klicken Sie im Menüband auf Neu und klicken Sie dann auf Neue Datei.

   WebMatrix zeigt eine Liste der Dateitypen an.

   
3. Wählen CSHTML, und in der Name Feld, Typ default.cshtml. Eine CSHTML-Seite ist ein spezieller Seitentyp in WebMatrix, der den üblichen Inhalt einer Webseite wie HTML- und JavaScript-Code enthalten kann und auch Code zum Programmieren von Webseiten enthalten kann. (Sie erfahren später mehr über CSHTML-Dateien.)
4. Klicken OK. WebMatrix erstellt die Seite und öffnet sie im Editor.

   Wie Sie sehen, handelt es sich hierbei um ein gewöhnliches HTML-Markup.

5. Fügen Sie der Seite folgenden Titel, Überschrift und Absatz hinzu:

           
   Hallo Welt Seite
    
   Hallo Welt!
     

6. Klicken Sie in der Symbolleiste für den Schnellzugriff auf sparen.
7. Klicken Sie im Menüband auf Lauf.

   Hinweisяя Bevor Sie klicken Lauf, Stellen Sie sicher, dass die Webseite, die Sie ausführen möchten, im Navigationsbereich von ausgewählt ist Dateien Arbeitsplatz. WebMatrix führt die ausgewählte Seite aus, auch wenn Sie gerade eine andere Seite bearbeiten. Wenn keine Seite ausgewählt ist, versucht WebMatrix, die Standardseite für die Site auszuführen (default.cshtml) und wenn keine Standardseite vorhanden ist, zeigt der Browser einen Fehler an.

   WebMatrix startet einen Webserver (IIS Express), mit dem Sie Seiten auf Ihrem Computer testen können. Die Seite wird in Ihrem Standardbrowser angezeigt.

   

Helfer mit dem Administration Tool installieren

Nachdem Sie jetzt WebMatrix installiert und eine Site erstellt haben, sollten Sie sich mit dem ASP.NET-Webseiten-Verwaltungstool und dem Package Manager für die Installation von Helfern vertraut machen. WebMatrix enthält Helfer (Komponenten), die allgemeine Programmieraufgaben vereinfachen und in diesen Lernprogrammen verwendet werden. (Einige Helfer sind bereits in WebMatrix enthalten, Sie können jedoch auch andere installieren.) Im Anhang finden Sie eine Kurzanleitung für die enthaltenen Helfer und für andere Helfer, die Sie als Teil eines Pakets mit dem Namen ASP.NET Web installieren können Helfer-Bibliothek. Das folgende Verfahren zeigt, wie Sie mithilfe des Verwaltungstools die ASP.NET Web Helpers-Bibliothek installieren. Einige dieser Helfer werden in diesem Tutorial und in anderen Tutorials dieser Serie verwendet.

1. Klicken Sie in WebMatrix auf Seite? ˅ Arbeitsplatz.
2. Klicken Sie im Inhaltsbereich auf ASP.NET-Webseitenverwaltung. Dadurch wird eine Administrationsseite in Ihren Browser geladen. Da Sie sich zum ersten Mal auf der Administrationsseite anmelden, werden Sie aufgefordert, ein Kennwort zu erstellen.
3. Erstelle ein Passwort.

   Nach dem Klicken auf Passwort erstellen, Auf einer Sicherheitsüberprüfungsseite, die wie im folgenden Screenshot dargestellt aussieht, werden Sie aus Sicherheitsgründen aufgefordert, die Kennwortdatei umzubenennen. Wenn Sie diese Seite zum ersten Mal sehen, versuchen Sie nicht, die Datei noch umzubenennen. Fahren Sie mit dem nächsten Schritt fort und folgen Sie den Anweisungen dort.

   
4. Lassen Sie den Browser auf der Sicherheitsüberprüfungsseite geöffnet, kehren Sie zu WebMatrix zurück und klicken Sie auf Dateien Arbeitsplatz.
5. Klicken Sie mit der rechten Maustaste auf Hallo Welt Ordner für Ihre Site und klicken Sie dann auf Aktualisierung. Die Liste der Dateien und Ordner zeigt jetzt ein Anwendungsdaten Mappe. Öffne das und du siehst ein Administrator Mappe. Die neu erstellte Kennwortdatei (_Password.config) wird im angezeigt ./ App_Data / Admin / Mappe. Die folgende Abbildung zeigt die aktualisierte Dateistruktur mit der ausgewählten Kennwortdatei:

6. Benennen Sie die Datei in um Passwort.config durch Entfernen des führenden Unterstrichs (_).
7. Kehren Sie zur Sicherheitsüberprüfungsseite im Browser zurück und klicken Sie auf Klick hier Link am Ende der Nachricht über das Umbenennen der Kennwortdatei.
8. Melden Sie sich mit dem von Ihnen erstellten Kennwort bei der Verwaltungsseite an. Die Seite zeigt den Paket-Manager an, der eine Liste von Zusatzpaketen enthält.

   Wenn Sie andere Feed-Standorte anzeigen möchten, klicken Sie auf Paketquellen verwalten Verknüpfung zum Hinzufügen, Ändern oder Entfernen von Feeds.

9. Suchen Sie das ASP.NET Web Helpers Library-Paket. Um die Liste einzugrenzen, suchen Sie nach Helfer Verwendung der Suche Feld. Das folgende Bild zeigt das Ergebnis der Suche Helfer. Beachten Sie, dass mehrere Versionen dieses Pakets verfügbar sind
10. Wählen Sie die gewünschte Version aus und klicken Sie auf Installieren Klicken Sie auf die Schaltfläche, und installieren Sie dann das Paket wie angegeben. Nach der Installation des Pakets zeigt der Paketmanager das Ergebnis an

    Auf dieser Seite können Sie auch Pakete deinstallieren. Mit dieser Seite können Sie Pakete aktualisieren, wenn neuere Versionen verfügbar sind. Du kannst zu dem ... gehen Show Dropdown-Liste und klicken Sie auf Eingerichtet Klicken Sie auf, um die installierten Pakete anzuzeigen Aktualisierung um verfügbare Updates für die installierten Pakete anzuzeigen.

    HinweisDie Standard-Website-Vorlagen (Bäckerei, Kalender, Fotogallerie, und Starter Site) sind in C # - und Visual Basic-Versionen verfügbar. Sie können die Visual Basic-Vorlagen mithilfe von installieren ASP.NET-Webseitenverwaltung Werkzeug in WebMatrix. Öffnen Sie das Verwaltungstool wie in diesem Abschnitt beschrieben und suchen Sie nach VB, und installieren Sie dann die gewünschten Vorlagen. Websitevorlagen werden im Stammordner Ihrer Site in einem Ordner namens installiert Microsoft-Vorlagen.

    Im nächsten Abschnitt werden Sie sehen, wie einfach es ist, dem Code Code hinzuzufügen default.cshtml Seite, um eine dynamische Seite zu erstellen.

Verwenden von ASP.NET-Webseitencode

In diesem Verfahren erstellen Sie eine Seite, die mit einfachem Code Datum und Uhrzeit des Servers auf der Seite anzeigt. In diesem Beispiel werden Sie mit der Razor-Syntax vertraut, mit der Sie Code in HTML auf ASP.NET-Webseiten einbetten können. (Weitere Informationen dazu finden Sie im nächsten Tutorial.) Der Code führt Sie in eines der Helfer ein, zu denen Sie zuvor im Tutorial gelesen haben.

1. Öffne dein default.cshtml Datei.
2. Fügen Sie der Seite Markup hinzu, sodass es wie folgt aussieht:

           
   Hallo Welt Seite
    
   Hallo Welt!
    
   Die Zeit ist @ DateTime.Now
     

   Die Seite enthält gewöhnliches HTML-Markup mit einem Zusatz: der @ Zeichen markiert ASP.NET-Programmcode.

3. Speichern Sie die Seite und führen Sie sie im Browser aus. Sie sehen jetzt das aktuelle Datum und die aktuelle Uhrzeit auf der Seite.

   Die von Ihnen hinzugefügte einzige Codezeile dient dazu, die aktuelle Uhrzeit auf dem Server zu ermitteln, für die Anzeige zu formatieren und an den Browser zu senden. (Sie können Formatierungsoptionen angeben; dies ist nur die Standardeinstellung.)

Angenommen, Sie möchten etwas komplexeres tun, z. B. eine Liste mit Tweets eines von Ihnen ausgewählten Twitter-Benutzers anzeigen. Sie können einen Helfer dafür verwenden; Wie bereits erwähnt, ist ein Helfer eine Komponente, die allgemeine Aufgaben vereinfacht. In diesem Fall müssen alle Arbeiten, die Sie andernfalls erledigen müssten, einen Twitter-Feed abrufen und anzeigen.

1. Erstellen Sie eine neue CSHTML-Datei und benennen Sie sie TwitterFeed.cshtml.
2. Ersetzen Sie auf der Seite den vorhandenen Code durch den folgenden Code:

           
   Twitter-Feed
    
    
    Geben Sie den Namen eines anderen Twitter-Feeds ein, der angezeigt werden soll:       
    
    @if (Request ["TwitterUser"]. IsEmpty ()) @ Twitter.Search ("microsoft") else @ Twitter.Profile (Request ["TwitterUser"]) 
    
     

   In diesem HTML-Code wird ein Formular erstellt, in dem ein Textfeld zur Eingabe eines Benutzernamens sowie ein Feld angezeigt wird einreichen Taste. Diese befinden sich zwischen dem ersten Satz von

   Stichworte.

   Zwischen dem zweiten Satz von

   Tags gibt es etwas Code. (Wie Sie bereits gesehen haben, verwenden Sie zum Markieren von Code in ASP.NET-Webseiten die @ Zeichen.) Das erste Mal, wenn diese Seite angezeigt wird oder wenn der Benutzer klickt einreichen Das Textfeld bleibt jedoch leer, der bedingte Ausdruck Anfrage ["TwitterUser"]. IsEmpty wird wahr sein In diesem Fall zeigt die Seite einen Twitter-Feed, der nach dem Begriff "Microsoft" sucht. Andernfalls zeigt die Seite einen Twitter-Feed für den Benutzernamen, den Sie in das Textfeld eingegeben haben.

3. Führen Sie die Seite im Browser aus. Im Twitter-Feed werden Tweets mit "Microsoft" angezeigt.
4. Geben Sie einen Twitter-Benutzernamen ein und klicken Sie auf einreichen. Der neue Feed wird angezeigt. (Wenn Sie einen nicht vorhandenen Namen eingeben, wird weiterhin ein Twitter-Feed angezeigt. Er ist nur leer.)

   Dieses Beispiel hat Ihnen ein wenig gezeigt, wie Sie WebMatrix verwenden und wie Sie dynamische Webseiten mit einfachem ASP.NET-Code mit der Razor-Syntax programmieren können. Im nächsten Tutorial wird der Code eingehender untersucht. Die nachfolgenden Tutorials zeigen Ihnen dann, wie Sie Code für viele verschiedene Arten von Website-Aufgaben verwenden.

Programmieren von ASP.NET-Rasiermesser-Seiten in Visual Studio

Neben der Verwendung von WebMatrix zum Programmieren von ASP.NET Razor-Seiten können Sie auch Visual Studio 2010 verwenden, entweder eine der vollständigen Editionen oder die kostenlose Visual Web Developer Express-Edition. Wenn Sie Visual Studio oder Visual Web Developer zum Bearbeiten von ASP.NET Razor-Seiten verwenden, stehen Ihnen zwei Programmiertools zur Verfügung, mit denen Sie die Produktivität steigern können - IntelliSense und der Debugger. IntelliSense arbeitet im Editor durch Anzeige kontextbezogener Auswahlmöglichkeiten. Wenn Sie beispielsweise ein HTML-Element eingeben, zeigt IntelliSense eine Liste der Attribute an, die das Element haben kann, und zeigt Ihnen sogar, für welche Werte Sie diese Attribute festlegen können. IntelliSense funktioniert für HTML, JavaScript und C # und Visual Basic (die Programmiersprachen, die Sie für ASP.NET Razor-Seiten verwenden.)

Mit dem Debugger können Sie ein Programm stoppen, während es ausgeführt wird. Sie können dann Dinge wie die Werte von Variablen untersuchen und Sie können Zeile für Zeile durch das Programm gehen, um zu sehen, wie es ausgeführt wird.

Um mit ASP.NET Razor Pages in Visual Studio arbeiten zu können, muss auf Ihrem Computer die folgende Software installiert sein:

• Visual Studio 2010 oder Visual Web Developer 2010 Express
• ASP.NET MVC 3 RTM.

HinweisSie können sowohl Visual Web Developer 2010 Express als auch ASP.NET MVC 3 mithilfe des Web Platform Installer installieren.

Wenn Sie Visual Studio installiert haben und eine Website in WebMatrix bearbeiten, können Sie die Site in Visual Studio starten, um IntelliSense und den Debugger zu nutzen.

1. Öffnen Sie die Site, die Sie in diesem Lernprogramm erstellt haben, und klicken Sie auf Dateien Arbeitsplatz.
2. Klicken Sie im Menüband auf Visual Studio Launch Taste.

   Nachdem die Site in Visual Studio geöffnet wurde, können Sie die Site-Struktur in Visual Studio in sehen Lösungsforscher Feld. Die folgende Abbildung zeigt die in Visual Web Developer 2010 Express geöffnete Website:

   

   Eine Übersicht über die Verwendung von IntelliSense und des Debuggers mit ASP.NET Razor-Seiten in Visual Studio finden Sie im Anhang ASP.NET Web Pages Visual Studio.

Erstellen und Testen von ASP.NET-Seiten mit Ihrem eigenen Texteditor

Sie müssen nicht den WebMatrix-Editor verwenden, um eine ASP.NET-Webseite zu erstellen und zu testen. Zum Erstellen der Seite können Sie einen beliebigen Texteditor einschließlich Notepad verwenden. Speichern Sie die Seiten einfach mit .cshtml Dateinamenserweiterung (Oder .vbhtml wenn Sie Visual Basic verwenden möchten)

Der einfachste Weg zum Testen .cshtml Seiten ist der Webserver (IIS Express) mit der WebMatrix zu starten Lauf Taste. Wenn Sie das WebMatrix-Tool jedoch nicht verwenden möchten, können Sie den Webserver über die Befehlszeile ausführen und mit einer bestimmten Portnummer verknüpfen. Sie geben dann diesen Port bei der Anforderung an .cshtml Dateien in Ihrem Browser.

Öffnen Sie in Windows eine Eingabeaufforderung mit Administratorrechten und wechseln Sie in den folgenden Ordner:

C: \ Programme \ IIS Express

Verwenden Sie für 64-Bit-Systeme diesen Ordner:

C: \ Programme (x86) \ IIS Express

Geben Sie den folgenden Befehl mit dem tatsächlichen Pfad zu Ihrer Site ein:

iisexpress.exe / port: 35896 / pfad: C: \ BasicWebSite

Es ist egal, welche Portnummer Sie verwenden, solange der Port nicht bereits von einem anderen Prozess reserviert ist. (Portnummern über 1024 sind in der Regel kostenlos.)

Verwenden Sie für den Pfadwert den Pfad der Website, auf der der .cshtml Dateien sind die, die Sie testen möchten.

Nachdem dieser Befehl ausgeführt wurde, können Sie einen Browser öffnen und zu einem Browser navigieren .cshtml Datei wie folgt:

http: // localhost: 35896 / default.cshtml

Um Hilfe zu den Befehlszeilenoptionen von IIS Express zu erhalten, geben Sie Folgendes ein iisexpress.exe /? in der Befehlszeile.