ASP.NET MVC-Ansichten – Übersicht (VB)

2023-07-13

Was ist eine ASP.NET MVC-Ansicht, und wie unterscheidet sie sich von einer HTML-Seite? In diesem Tutorial führt Stephen Walther Sie in Ansichten ein und veranschaulicht, wie Sie die Vorteile von Ansichtsdaten und HTML-Hilfsprogrammen in einer Ansicht nutzen können.

In diesem Tutorial erhalten Sie eine kurze Einführung in ASP.NET MVC-Ansichten, Ansichtsdaten und HTML-Hilfsprogramme. Am Ende dieses Tutorials sollten Sie verstehen, wie Sie neue Ansichten erstellen, Daten von einem Controller an eine Ansicht übergeben und HTML-Hilfsprogramme verwenden, um Inhalte in einer Ansicht zu generieren.

Grundlegendes zu Sichten

Im Gegensatz zu ASP.NET oder Active Server Pages enthält ASP.NET MVC nichts, das einer Seite direkt entspricht. In einer ASP.NET MVC-Anwendung gibt es keine Seite auf dem Datenträger, die dem Pfad in der URL entspricht, die Sie in die Adressleiste Ihres Browsers eingeben. Die nächste Sache zu einer Seite in einer ASP.NET MVC-Anwendung ist etwas, das als Ansicht bezeichnet wird.

In einer ASP.NET MVC-Anwendung werden eingehende Browseranforderungen Controlleraktionen zugeordnet. Eine Controlleraktion gibt möglicherweise eine Ansicht zurück. Eine Controlleraktion kann jedoch eine andere Art von Aktion ausführen, z. B. die Umleitung zu einer anderen Controlleraktion.

Listing 1 enthält einen einfachen Controller namens HomeController. Der HomeController macht zwei Controlleraktionen namens Index() und Details() verfügbar.

Eintrag 1 : HomeController.vb

<HandleError()> _
Public Class HomeController
    Inherits System.Web.Mvc.Controller

    Function Index()
        Return View()
    End Function

    Function Details()
        Return RedirectToAction("Index")
    End Function
End Class

Sie können die erste Aktion, die Index()-Aktion, aufrufen, indem Sie die folgende URL in die Adressleiste Ihres Browsers eingeben:

/Home/Index

Sie können die zweite Aktion, die Aktion Details() aufrufen, indem Sie diese Adresse in Ihren Browser eingeben:

/Home/Details

Die Index()-Aktion gibt eine Ansicht zurück. Die meisten von Ihnen erstellten Aktionen geben Ansichten zurück. Eine Aktion kann jedoch andere Arten von Aktionsergebnissen zurückgeben. Die Aktion Details() gibt beispielsweise ein RedirectToActionResult zurück, das die eingehende Anforderung an die Index()-Aktion umleitet.

Die Index()-Aktion enthält die folgende einzelne Codezeile:

View()

Diese Codezeile gibt eine Ansicht zurück, die sich unter dem folgenden Pfad auf Ihrem Webserver befinden muss:

\Views\Home\Index.aspx

Der Pfad zur Ansicht wird aus dem Namen des Controllers und dem Namen der Controlleraktion abgeleitet.

Wenn Sie möchten, können Sie sich explizit über die Ansicht informieren. Die folgende Codezeile gibt eine Ansicht mit dem Namen Fred zurück:

View( Fred )

Wenn diese Codezeile ausgeführt wird, wird eine Ansicht aus dem folgenden Pfad zurückgegeben:

\Views\Home\Fred.aspx

Hinweis

Wenn Sie Komponententests für Ihre ASP.NET MVC-Anwendung erstellen möchten, empfiehlt es sich, sich explizit über Ansichtsnamen zu informieren. Auf diese Weise können Sie einen Komponententest erstellen, um zu überprüfen, ob die erwartete Ansicht von einer Controlleraktion zurückgegeben wurde.

Hinzufügen von Inhalten zu einer Ansicht

Eine Ansicht ist ein standardmäßiges (X)HTML-Dokument, das Skripts enthalten kann. Sie verwenden Skripts, um einer Ansicht dynamische Inhalte hinzuzufügen.

Beispielsweise zeigt die Ansicht in Listing 2 das aktuelle Datum und die aktuelle Uhrzeit an.

Auflistung 2: \Views\Home\Index.aspx

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>
     
    The current date and time is
    <% Response.Write(DateTime.Now)%>
    
    </div>
</body>
</html>

Beachten Sie, dass der Text der HTML-Seite in Listing 2 das folgende Skript enthält:

<% Response.Write(DateTime.Now)%>

Sie verwenden die Skripttrennzeichen <% und %> , um den Anfang und das Ende eines Skripts zu markieren. Dieses Skript ist in Visual Basic geschrieben. Es zeigt das aktuelle Datum und die aktuelle Uhrzeit an, indem die Response.Write()-Methode aufgerufen wird, um Inhalte im Browser zu rendern. Die Skripttrennzeichen <% und %> können verwendet werden, um eine oder mehrere Anweisungen auszuführen.

Da Sie Response.Write() so oft aufrufen, stellt Microsoft eine Verknüpfung zum Aufrufen der Response.Write()-Methode bereit. Die Ansicht in Listing 3 verwendet die Trennzeichen <%= und %> als Verknüpfung zum Aufrufen von Response.Write().

Auflistung 3: Views\Home\Index2.aspx

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Index</title>
</head>
<body>
    <div>
     
    The current date and time is
    <%= DateTime.Now %>
    
    </div>
</body>
</html>

Sie können eine beliebige .NET-Sprache verwenden, um dynamische Inhalte in einer Ansicht zu generieren. Normalerweise verwenden Sie entweder Visual Basic .NET oder C#, um Ihre Controller und Ansichten zu schreiben.

Verwenden von HTML-Hilfsprogrammen zum Generieren von Ansichtsinhalten

Um das Hinzufügen von Inhalten zu einer Ansicht zu vereinfachen, können Sie etwas nutzen, das als HTML-Hilfsprogramm bezeichnet wird. Ein HTML-Hilfsprogramm ist in der Regel eine Methode, die eine Zeichenfolge generiert. Sie können HTML-Hilfsprogramme verwenden, um HTML-Standardelemente wie Textfelder, Links, Dropdownlisten und Listenfelder zu generieren.

Die Ansicht in Listing 4 nutzt beispielsweise drei HTML-Hilfsprogramme – BeginForm(), TextBox() und Password() – zum Generieren eines Anmeldeformulars (siehe Abbildung 1).

Listing 4 -- \Views\Home\Login.aspx

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login Form</title>
</head>
<body>
    <div>

    <%  Using Html.BeginForm()%>

        <label for="UserName">User Name:</label>
        <br />
        <%= Html.TextBox("UserName") %>
        
        <br /><br />
            
        <label for="Password">Password:</label>
        <br />
        <%= Html.Password("Password") %>
        
        <br /><br />

        <input type="submit" value="Log in" />        
    
    <% End Using%>

    </div>
</body>
</html>

Abbildung 01: Ein Standardanmeldungsformular (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

Alle HTML-Hilfsmethoden werden für die Html-Eigenschaft der Ansicht aufgerufen. Beispielsweise rendern Sie ein TextBox-Objekt, indem Sie die Html.TextBox()-Methode aufrufen.

Beachten Sie, dass Sie beim Aufrufen der Hilfsprogramme Html.TextBox() und Html.Password() die Skripttrennzeichen <%= und %> verwenden. Diese Hilfsprogramme geben einfach eine Zeichenfolge zurück. Sie müssen Response.Write() aufrufen, um die Zeichenfolge im Browser zu rendern.

Die Verwendung von HTML-Hilfsmethoden ist optional. Sie erleichtern Ihnen das Leben, indem sie die Menge an HTML und Skripts reduzieren, die Sie schreiben müssen. Die Ansicht in Listing 5 rendert genau das gleiche Formular wie die Ansicht in Listing 4, ohne HTML-Hilfsprogramme zu verwenden.

Listing 5 -- \Views\Home\Login.aspx

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Login Form</title>
</head>
<body>
    <div>
        
    <form method="post" action="/Home/Login">
    
    <label for="userName">User Name:</label>
    <br />
    <input name="userName" />
    
    <br /><br />
    
    <label for="password">Password:</label>
    <br />
    <input name="password" type="password" />
    
    <br /><br />
    <input type="submit" value="Log In" />
    
    </form>
    
    </div>
</body>
</html>

Sie haben auch die Möglichkeit, eigene HTML-Hilfsprogramme zu erstellen. Sie können beispielsweise eine GridView()-Hilfsmethode erstellen, die einen Satz von Datenbankdatensätzen in einer HTML-Tabelle automatisch anzeigt. Dieses Thema wird im Tutorial Erstellen von benutzerdefinierten HTML-Hilfsprogrammen erläutert.

Verwenden von Daten anzeigen zum Übergeben von Daten an eine Ansicht

Sie verwenden Ansichtsdaten, um Daten von einem Controller an eine Ansicht zu übergeben. Stellen Sie sich vor, Daten wie ein Paket anzuzeigen, das Sie über die E-Mail senden. Alle Daten, die von einem Controller an eine Ansicht übergeben werden, müssen mit diesem Paket gesendet werden. Der Controller in Listing 6 fügt beispielsweise eine Meldung hinzu, um Daten anzuzeigen.

Eintrag 6: ProductController.vb

Public Class ProductController
    Inherits System.Web.Mvc.Controller

    Function Index()
        ViewData("message") = "Hello World!"
        Return View()
    End Function

End Class

Die ViewData-Eigenschaft des Controllers stellt eine Auflistung von Name- und Wertpaaren dar. In Listing 6 fügt die Index()-Methode der Ansichtsdatensammlung mit dem Namen Message ein Element mit dem Wert Hallo Welt! hinzu. Wenn die Ansicht von der Index()-Methode zurückgegeben wird, werden die Ansichtsdaten automatisch an die Ansicht übergeben.

Die Ansicht in Listing 7 ruft die Nachricht aus den Ansichtsdaten ab und rendert die Nachricht im Browser.

Listing 7 -- \Views\Product\Index.aspx

<%@ Page Language="VB" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Product Index</title>
</head>
<body>
    <div>

    <%=Html.Encode(ViewData("message"))%>
    
    </div>
</body>
</html>

Beachten Sie, dass die Ansicht beim Rendern der Nachricht die HTML.Encode()-HTML-Hilfsmethode nutzt. Das Html.Encode()-HTML-Hilfsprogramm codiert Sonderzeichen wie < und > in Zeichen, die sicher auf einer Webseite angezeigt werden können. Wenn Sie Inhalte rendern, die ein Benutzer an eine Website übermittelt, sollten Sie den Inhalt codieren, um JavaScript-Einschleusungsangriffe zu verhindern.

(Da wir die Nachricht selbst im ProductController erstellt haben, müssen wir die Nachricht nicht wirklich codieren. Es ist jedoch eine gute Gewohnheit, immer die Html.Encode()-Methode aufzurufen, wenn Inhalte angezeigt werden, die aus Ansichtsdaten innerhalb einer Ansicht abgerufen wurden.)

In Listing 7 nutzten wir Ansichtsdaten, um eine einfache Zeichenfolgennachricht von einem Controller an eine Ansicht zu übergeben. Sie können auch Ansichtsdaten verwenden, um andere Datentypen, z. B. eine Sammlung von Datenbankdatensätzen, von einem Controller an eine Ansicht zu übergeben. Wenn Sie beispielsweise den Inhalt der Products-Datenbanktabelle in einer Ansicht anzeigen möchten, übergeben Sie die Sammlung von Datenbankdatensätzen in Ansichtsdaten.

Sie haben auch die Möglichkeit, stark typisierte Ansichtsdaten von einem Controller an eine Ansicht zu übergeben. Dieses Thema wird im Tutorial Grundlegendes zu stark typisierten Ansichtsdaten und Sichten erläutert.

Zusammenfassung

Dieses Tutorial bietet eine kurze Einführung in ASP.NET MVC-Ansichten, Ansichtsdaten und HTML-Hilfsprogramme. Im ersten Abschnitt haben Sie gelernt, wie Sie Ihrem Projekt neue Ansichten hinzufügen. Sie haben gelernt, dass Sie dem richtigen Ordner eine Ansicht hinzufügen müssen, um sie von einem bestimmten Controller aufrufen zu können. Als Nächstes haben wir das Thema html-Hilfsprogramme behandelt. Sie haben gelernt, wie Html-Hilfsprogramme ihnen das einfache Generieren von HTML-Standardinhalten ermöglichen. Schließlich haben Sie gelernt, wie Sie die Vorteile von Ansichtsdaten nutzen, um Daten von einem Controller an eine Ansicht zu übergeben.

Zurück Weiter

Freigeben über