Hinzufügen einer Ansicht zu einer MVC-Anwendung

von Rick Anderson

Hinweis

Eine aktualisierte Version dieses Tutorials ist hier mit der neuesten Version von Visual Studio verfügbar. Das neue Tutorial verwendet ASP.NET Core MVC, der viele Verbesserungen gegenüber diesem Tutorial bietet.

Dieses Tutorial vermittelt Informationen zu ASP.NET Core MVC mit Controllern und Ansichten. Razor Pages ist eine neue Alternative in ASP.NET Core, einem seitenbasierten Programmiermodell, das das Erstellen einer Webbenutzeroberfläche einfacher und produktiver macht. Es empfiehlt sich, dass Sie sich das Tutorial der Razor Pages vor der MVC-Version ansehen. Das Tutorial zu Razor Pages:

• Ist einfacher zu befolgen.
• Behandelt mehr Features.
• Ist der bevorzugte Ansatz für die Entwicklung neuer Apps.

In diesem Abschnitt ändern Sie die HelloWorldController Klasse so, dass Sie Vorlagendateien anzeigen, um den Prozess der Generierung von HTML-Antworten für einen Client sauber zu kapseln.

Sie erstellen eine Ansichtsvorlagendatei mit der Razor-Ansichts-Engine. Razor-basierte Ansichtsvorlagen verfügen über eine CSHTML-Dateierweiterung und bieten eine elegante Möglichkeit, HTML-Ausgabe mit C# zu erstellen. Razor minimiert die Anzahl der Zeichen und Tastenanschläge, die beim Schreiben einer Ansichtsvorlage erforderlich sind, und ermöglicht einen schnellen, flüssigen Codierungsworkflow.

Derzeit gibt die Index-Methode eine Zeichenfolge mit der Meldung zurück, die in der Controllerklasse hartcodiert ist. Ändern Sie die Index -Methode, um die View-Methode der Controller aufzurufen, wie im folgenden Code gezeigt:

public ActionResult Index() 
{ 
    return View(); 
}

Die Index obige Methode verwendet eine Ansichtsvorlage, um eine HTML-Antwort für den Browser zu generieren. Controllermethoden (auch als Aktionsmethoden bezeichnet), z. B. die Index oben genannte Methode, geben im Allgemeinen ein ActionResult (oder eine von ActionResult abgeleitete Klasse) zurück, nicht primitive Typen wie Zeichenfolge.

Klicken Sie mit der rechten Maustaste auf den Ordner Ansichten\HelloWorld , und klicken Sie auf Hinzufügen, und klicken Sie dann auf MVC 5 View Page with Layout (Razor).

Geben Sie im Dialogfeld Name für Element angeben den Namen Index ein, und klicken Sie dann auf OK.

Übernehmen Sie im Dialogfeld Layoutseite auswählen die Standardeinstellung _Layout.cshtml, und klicken Sie auf OK.

Im obigen Dialogfeld ist im linken Bereich der Ordner Views\Shared ausgewählt. Wenn Sie eine benutzerdefinierte Layoutdatei in einem anderen Ordner hatten, können Sie sie auswählen. Wir werden weiter unten im Tutorial über die Layoutdatei sprechen.

Die Datei MvcMovie\Views\HelloWorld\Index.cshtml wird erstellt.

Fügen Sie das folgende hervorgehobene Markup hinzu.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Klicken Sie mit der rechten Maustaste auf die Datei Index.cshtml , und wählen Sie Im Browser anzeigen aus.

Sie können auch mit der rechten Maustaste auf die Datei Index.cshtml klicken und in Seitenprüfung anzeigen auswählen. Weitere Informationen finden Sie im Tutorial Seitenprüfung.

Führen Sie alternativ die Anwendung aus, und navigieren Sie zum HelloWorld Controller (http://localhost:xxxx/HelloWorld). Die Index Methode in Ihrem Controller hat nicht viel Arbeit ausgeführt. Sie hat einfach die -Anweisung return View()ausgeführt, die angibt, dass die Methode eine Ansichtsvorlagendatei verwenden soll, um eine Antwort für den Browser zu rendern. Da Sie den Namen der zu verwendenden Ansichtsvorlagendatei nicht explizit angegeben haben, ASP.NET MVC standardmäßig die Ansichtsdatei Index.cshtml im Ordner \Views\HelloWorld verwendet. Die folgende Abbildung zeigt die hartcodierte Zeichenfolge "Hello from our View Template!" in der Ansicht.

Sieht ziemlich gut aus. Beachten Sie jedoch, dass auf der Titelleiste des Browsers "Index – Meine ASP.NET Anwendung" angezeigt wird und der große Link oben auf der Seite "Anwendungsname" lautet. Je nachdem, wie klein Ihr Browserfenster ist, müssen Sie möglicherweise oben rechts auf die drei Balken klicken, um die Links zu Start, Info, Kontakt, Registrieren und Anmelden anzuzeigen.

Ändern von Ansichten und Layoutseiten

Zunächst möchten Sie den Link "Anwendungsname" oben auf der Seite ändern. Dieser Text ist für jede Seite üblich. Es wird tatsächlich nur an einer Stelle im Projekt implementiert, obwohl es auf jeder Seite in der Anwendung angezeigt wird. Wechseln Sie zum Ordner /Views/Shared in Projektmappen-Explorer, und öffnen Sie die Datei _Layout.cshtml. Diese Datei wird als Layoutseite bezeichnet und befindet sich im freigegebenen Ordner, den alle anderen Seiten verwenden.

Layout-Vorlagen ermöglichen Ihnen, das HTML-Containerlayout Ihrer Website zentral anzugeben und dann auf mehrere Seiten Ihrer Website anzuwenden. Suchen Sie die Zeile @RenderBody(). RenderBody ist ein Platzhalter, bei dem alle ansichtsspezifischen Seiten, die Sie erstellen, auf der Layoutseite "umschlossen" angezeigt werden. Wenn Sie beispielsweise den Link Info auswählen, wird die Ansicht Views\Home\About.cshtml innerhalb der RenderBody -Methode gerendert.

Ändern Sie den Inhalt des Elements „title“. Ändern Sie den ActionLink in der Layoutvorlage von "Anwendungsname" in "MVC Movie" und den Controller von in HomeMovies. Die vollständige Layoutdatei ist unten dargestellt:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Führen Sie die Anwendung aus, und beachten Sie, dass es jetzt "MVC Movie" heißt. Klicken Sie auf den Link Info , und Sie sehen, wie auf dieser Seite auch "MVC Movie" angezeigt wird. Wir konnten die Änderung einmal in der Layoutvorlage vornehmen und alle Seiten auf der Website den neuen Titel widerspiegeln.

Als wir zum ersten Mal die Datei Views\HelloWorld\Index.cshtml erstellt haben, enthielt sie den folgenden Code:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Der oben genannte Razor-Code legt die Layoutseite explizit fest. Untersuchen Sie die Datei Views\_ViewStart.cshtml und enthält genau das gleiche Razor-Markup. Die Datei Views\_ViewStart.cshtml definiert das allgemeine Layout, das alle Ansichten verwenden. Daher können Sie diesen Code aus der Datei Views\HelloWorld\Index.cshtml auskommentieren oder entfernen.

@*@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}*@

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>Hello from our View Template!</p>

Sie können mithilfe der Layout-Eigenschaft eine andere Layoutansicht festlegen oder diese auf null festlegen, damit keine Layoutdatei verwendet wird.

Nun ändern wir den Titel der Indexansicht.

Öffnen Sie MvcMovie\Views\HelloWorld\Index.cshtml. Es gibt zwei Stellen, an denen eine Änderung vorgenommen werden muss: erstens der Text, der im Titel des Browsers und dann im sekundären Header (dem <h2> Element) angezeigt wird. Sie nehmen diese geringfügig anders vor, damit Sie erkennen können, welcher Teil der App mithilfe einer Codebearbeitung geändert wird.

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>

<p>Hello from our View Template!</p>

Um den anzuzeigenden HTML-Titel anzugeben, legt der obige Code eine Title Eigenschaft des ViewBag Objekts fest (die sich in der Index.cshtml-Ansichtsvorlage befindet). Beachten Sie, dass die Layoutvorlage ( Views\Shared\_Layout.cshtml ) diesen Wert im <title> Element als Teil des <head> Abschnitts des HTML-Codes verwendet, den wir zuvor geändert haben.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

Mit diesem ViewBag Ansatz können Sie problemlos andere Parameter zwischen Ihrer Ansichtsvorlage und Ihrer Layoutdatei übergeben.

Führen Sie die Anwendung aus. Sie sehen, dass sich der Browsertitel, die primäre Überschrift und die sekundären Überschriften geändert haben. (Wenn im Browser keine Änderungen angezeigt werden, werden möglicherweise zwischengespeicherte Inhalte angezeigt. Drücken Sie STRG+F5 in Ihrem Browser, um das Laden der Antwort vom Server zu erzwingen.) Der Browsertitel wird mit dem erstellt, das ViewBag.Title wir in der Index.cshtml-Ansichtsvorlage festgelegt haben, und der zusätzlichen "- Movie-App", die in der Layoutdatei hinzugefügt wurde.

Beachten Sie auch, wie der Inhalt in der Index.cshtml-Ansichtsvorlage mit der Ansichtsvorlage _Layout.cshtml zusammengeführt wurde und eine einzelne HTML-Antwort an den Browser gesendet wurde. Layoutvorlagen erleichtern ungemein das Vornehmen von Änderungen an allen Seiten in Ihrer Anwendung.

Unser wenig "Daten" (in diesem Fall die Meldung "Hello from our View Template!") ist jedoch hartcodiert. Die MVC-Anwendung weist ein „V“ (View [Ansicht]) auf, und Sie verfügen über ein „C“ (Controller), aber noch nicht über ein „M“ (Modell). In Kürze erfahren Sie, wie Sie eine Datenbank erstellen und Modelldaten daraus abrufen.

Übergeben von Daten vom Controller an die Ansicht

Bevor wir jedoch zu einer Datenbank wechseln und über Modelle sprechen, sprechen wir zunächst über das Übergeben von Informationen vom Controller an eine Ansicht. Controllerklassen werden als Antwort auf eine eingehende URL-Anforderung aufgerufen. In einer Controllerklasse schreiben Sie den Code, der die eingehenden Browseranforderungen verarbeitet, Daten aus einer Datenbank abruft und letztendlich entscheidet, welche Art von Antwort an den Browser gesendet werden soll. Ansichtsvorlagen können dann über einen Controller verwendet werden, um eine HTML-Antwort für den Browser zu generieren und zu formatieren.

Controller sind dafür verantwortlich, alle Daten oder Objekte bereitzustellen, die erforderlich sind, damit eine Ansichtsvorlage eine Antwort im Browser rendern kann. Bewährte Methode: Eine Ansichtsvorlage sollte niemals Geschäftslogik ausführen oder direkt mit einer Datenbank interagieren. Stattdessen sollte eine Ansichtsvorlage nur mit den Daten funktionieren, die ihr vom Controller bereitgestellt werden. Die Beibehaltung dieser "Trennung von Bedenken" trägt dazu bei, dass Ihr Code sauber, testbar und verwaltbarer bleibt.

Derzeit nimmt die Welcome Aktionsmethode in der HelloWorldController -Klasse einen name - und einen numTimes -Parameter an und gibt die Werte dann direkt an den Browser aus. Anstatt diese Antwort vom Controller als Zeichenfolge zu rendern, ändern wir den Controller stattdessen so, dass er eine Ansichtsvorlage verwendet. Die Ansichtsvorlage generiert eine dynamische Antwort. Das bedeutet, dass Sie die entsprechenden Datenelemente vom Controller an die Ansicht übergeben müssen, um die Antwort zu generieren. Dazu können Sie die dynamischen Daten (Parameter), die die Ansichtsvorlage benötigt, vom Controller in ein ViewBag Objekt einfügen, auf das die Ansichtsvorlage dann zugreifen kann.

Kehren Sie zur Datei HelloWorldController.cs zurück, und ändern Sie die Welcome -Methode, um dem ViewBag -Objekt einen Message - und NumTimes -Wert hinzuzufügen. ViewBag ist ein dynamisches Objekt, d. h. Sie können alles einfügen, was Sie möchten; das ViewBag Objekt hat keine definierten Eigenschaften, bis Sie etwas darin einfügen. Das ASP.NET MVC-Modellbindungssystem ordnet die benannten Parameter (name und numTimes) automatisch von der Abfragezeichenfolge in der Adressleiste den Parametern in Ihrer Methode zu. Die vollständige Datei HelloWorldController.cs sieht wie folgt aus:

using System.Web;
using System.Web.Mvc;

namespace MvcMovie.Controllers
{
    public class HelloWorldController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult Welcome(string name, int numTimes = 1)
        {
            ViewBag.Message = "Hello " + name;
            ViewBag.NumTimes = numTimes;

            return View();
        }
    }
}

Nun enthält das ViewBag -Objekt Daten, die automatisch an die Ansicht übergeben werden. Als Nächstes benötigen Sie eine Willkommensansichtsvorlage! Wählen Sie im Menü Erstellen die Option Projektmappe erstellen (oder STRG+UMSCHALT+B), um sicherzustellen, dass das Projekt kompiliert ist. Klicken Sie mit der rechten Maustaste auf den Ordner Views\HelloWorld , und klicken Sie auf Hinzufügen, und klicken Sie dann auf MVC 5 View Page with Layout (Razor).

Geben Sie im Dialogfeld Name für Element angeben die Zeichenfolge Willkommen ein, und klicken Sie dann auf OK.

Übernehmen Sie im Dialogfeld Layoutseite auswählen die Standardeinstellung _Layout.cshtml, und klicken Sie auf OK.

Die Datei MvcMovie\Views\HelloWorld\Welcome.cshtml wird erstellt.

Ersetzen Sie das Markup in der Datei Welcome.cshtml . Sie erstellen eine Schleife, die so oft wie der Benutzer sagt, "Hello". Die vollständige Datei Welcome.cshtml wird unten angezeigt.

@{
    ViewBag.Title = "Welcome";
}

<h2>Welcome</h2>

<ul>
    @for (int i = 0; i < ViewBag.NumTimes; i++)
    {
        <li>@ViewBag.Message</li>
    }
</ul>

Führen Sie die Anwendung aus, und navigieren Sie zur folgenden URL:

http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4

Nun werden Daten aus der URL übernommen und mithilfe des Modellbinders an den Controller übergeben. Der Controller packt die Daten in ein ViewBag -Objekt und übergibt dieses Objekt an die Ansicht. Die Ansicht zeigt dem Benutzer dann die Daten als HTML an.

Im obigen Beispiel haben wir ein ViewBag -Objekt verwendet, um Daten vom Controller an eine Ansicht zu übergeben. Später in diesem Tutorial verwenden wir eine Ansichtsmodell, um Daten von einem Controller an eine Ansicht zu übergeben. Der Ansichtsmodellansatz für die Datenübergabe wird im Allgemeinen gegenüber dem Ansichtsbehälter-Ansatz bevorzugt. Weitere Informationen finden Sie im Blogeintrag Dynamische V Stark typisierte Ansichten .

Das war also eine Art eines „M“ für Modell, jedoch nicht der Art Datenbank. Lassen Sie uns das Gelernte umsetzen und eine Filmdatenbank erstellen.

ZurückWeiter