Exemplarische Vorgehensweise: Erstellen einer einfachen Webanwendung

Aktualisiert: November 2007

In dieser exemplarischen Vorgehensweise werden Sie eine einfache Webanwendung erstellen, die als Basis für einen Webtest in Exemplarische Vorgehensweise: Aufzeichnen und Ausführen eines Webtests verwendet wird.

Zum Erstellen eines beispielhaften Webtests sollten Sie eine Webanwendung verwenden, bei der Sie beliebige Änderungen vornehmen können.

Im Verlauf dieser exemplarischen Vorgehensweise führen Sie folgende Aufgaben aus:

  • Erstellen einer einfachen Webanwendung.

  • Manuelles Testen der Webanwendung.

Vorbereitungsmaßnahmen

Für diese exemplarische Vorgehensweise benötigen Sie:

  • Microsoft Visual Studio 2005

Erstellen einer Webanwendung

So erstellen Sie die Webanwendung

  1. Klicken Sie in Microsoft Visual Studio 2005 im Menü Datei auf Neu und dann auf Website.

    Das Dialogfeld Neue Website wird angezeigt.

  2. Klicken Sie unter Von Visual Studio installierte Vorlagen auf ASP.NET-Website.

  3. Wählen Sie im Feld SpeicherortDateisystem aus, und geben Sie den Namen des Ordners ein, in dem Sie die Webanwendung speichern möchten. Benennen Sie das Ende des Ordnernamens ColorWebApp\ColorWebApp. Geben Sie beispielsweise den Ordnernamen C:\WebSites\ColorWebApp\ColorWebApp ein.

    Hinweis:

    Fügen Sie den Namen zweimal ein, sodass Sie dem ersten Ordner ein Webtestprojekt hinzufügen können, das von der Webanwendung im zweiten Ordner getrennt ist.

  4. Wählen Sie in der Liste Sprachen die von Ihnen gewünschte Programmiersprache aus.

    Hinweis:

    In dieser exemplarischen Vorgehensweise werden Sie sehr wenig Code schreiben.

  5. Klicken Sie auf OK.

Hinzufügen von Steuerelementen zur Webanwendung

So fügen Sie der Webanwendung Steuerelemente hinzu

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Datei Default.aspx, und wählen Sie Ansicht-Designer aus.

    Eine leere Seite wird angezeigt.

  2. Wenn die Toolbox nicht angezeigt wird, klicken Sie auf Ansicht und dann auf Toolbox.

  3. Ziehen Sie aus der Gruppe Standard eine RadioButtonList auf die Seite.

    Der Entwurfsoberfläche wird ein RadioButtonList-Steuerelement hinzugefügt.

  4. Klicken Sie im RadioButtonList-Aufgaben-Smarttagbereich auf die Verknüpfung Elemente bearbeiten.

    Ein ListItem-Auflistungs-Editor wird angezeigt.

    Hinweis:

    Sie können den ListItem-Auflistungs-Editor auch anzeigen, indem Sie die Elemente-Auflistung im Eigenschaften-Fenster bearbeiten.

  5. Klicken Sie auf Hinzufügen, um ein neues Element hinzuzufügen.

  6. Unter ListItem-Eigenschaften:

    1. Ändern Sie die Text-Eigenschaft in Red.

    2. Legen Sie die Selected-Eigenschaft auf True fest.

  7. Klicken Sie auf Hinzufügen, um ein weiteres Element hinzuzufügen.

  8. Ändern Sie unter ListItem-Eigenschaften die Text-Eigenschaft in Blue.

  9. Klicken Sie auf OK, um den ListItem-Auflistungs-Editor zu schließen.

  10. Ziehen Sie einen Button auf die Seite, und ändern Sie die Text-Eigenschaft in Submit.

  11. Klicken Sie im Menü Datei auf Alle speichern.

Hinzufügen von Seiten zur Webanwendung

So fügen Sie der Webanwendung Seiten hinzu

  1. Klicken Sie im Menü Website auf Neues Element hinzufügen.

  2. Klicken Sie im Dialogfeld Neues Element hinzufügen auf die Web Form-Vorlage, nennen Sie diese Red.aspx, und klicken Sie dann auf Hinzufügen.

  3. Klicken Sie im unteren Bereich des Dokumentfensters auf die Registerkarte Entwurf, um zur Entwurfsansicht zu wechseln.

  4. Ziehen Sie ein Label auf die Seite. Legen Sie die Text-Eigenschaft auf Red und die ForeColor-Eigenschaft gleichfalls auf Red fest.

  5. Klicken Sie im Menü Website auf Neues Element hinzufügen.

  6. Klicken Sie im Dialogfeld Neues Element hinzufügen auf die Web Form-Vorlage, nennen Sie diese Blue.aspx, und klicken Sie dann auf Hinzufügen.

  7. Klicken Sie im unteren Bereich des Dokumentfensters auf die Registerkarte Entwurf, um zur Entwurfsansicht zu wechseln.

  8. Ziehen Sie ein Label auf die Seite. Legen Sie die Text-Eigenschaft auf Blue und die ForeColor-Eigenschaft ebenfalls auf Blue fest.

  9. Klicken Sie im Menü Datei auf Alle speichern.

Hinzufügen von Funktionalität zur Webanwendung

So fügen Sie der Webanwendung Funktionalität hinzu

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf die Datei Default.aspx, und klicken dann Sie auf Ansicht-Designer.

  2. Doppelklicken Sie auf den Submit-Button. Visual Studio wechselt zum Seitencode und erstellt das Skelett eines Ereignishandlers für das Click-Ereignis des Button-Steuerelements.

  3. Fügen Sie dem Ereignishandler folgenden Code hinzu:

    if (this.RadioButtonList1.SelectedValue == "Blue")
    {
        Response.Redirect("Blue.aspx");
    }
    else
    {
        Response.Redirect("Red.aspx");
    }
    
    If RadioButtonList1.SelectedValue = "Blue" Then
        Response.Redirect("Blue.aspx")
    Else
        Response.Redirect("Red.aspx")
    End If
    
  4. Klicken Sie im Menü Datei auf Alle speichern.

Manuelles Testen der Webanwendung

So testen Sie die Webanwendung manuell

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf Default.aspx, und klicken Sie dann auf Als Startseite festlegen.

  2. Drücken Sie STRG+F5, um die Webanwendung im Browser auszuführen. Die erste Seite wird angezeigt.

  3. Klicken Sie auf Red und dann auf Submit. Wenn die Anwendung ordnungsgemäß funktioniert, gelangen Sie auf die Seite mit dem Label, auf welchem Red zu lesen ist.

  4. Navigieren Sie zurück zur ersten Seite.

  5. Klicken Sie auf Blue und dann auf Submit. Wenn die Anwendung ordnungsgemäß funktioniert, gelangen Sie auf die Seite mit dem Label, auf welchem Blue zu lesen ist.

Nächste Schritte

In dieser exemplarischen Vorgehensweise haben Sie eine einfache Webanwendung erstellt und diese manuell getestet. Jetzt sind Sie in der Lage, einen Webtest zum Testen dieser Anwendung zu erstellen. Weitere Informationen finden Sie unter Exemplarische Vorgehensweise: Aufzeichnen und Ausführen eines Webtests.

Siehe auch

Aufgaben

Exemplarische Vorgehensweise: Aufzeichnen und Ausführen eines Webtests

Weitere Ressourcen

Einführung in das Erstellen von Websites in Visual Web Developer