Hinzufügen einer Ansicht zu einer MVC-Anwendung

von Rick Anderson

In diesem Abschnitt ändern Sie die HelloWorldController Klasse, um View-Template-Dateien zu verwenden, um den Prozess der Generierung von HTML-Antworten für einen Client übersichtlich zu kapseln.

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

Derzeit gibt die Index Methode eine Zeichenfolge mit einer Nachricht zurück, die in der Controllerklasse hartcodiert ist. Ändern Sie die Index Methode, um die Ansichtsmethode der Controller aufzurufen, wie im folgenden Codebeispiel gezeigt wird:

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

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

Klicken Sie mit der rechten Maustaste auf den Ordner "Views\HelloWorld", und klicken Sie dann auf "Hinzufügen", und klicken Sie dann auf "MVC 5-Ansichtsseite mit Layout (Razor)".

Geben Sie im Dialogfeld " Namen für Element angeben " " 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 wird der Ordner "Ansichten\Freigegeben " im linken Bereich ausgewählt. Wenn Sie eine benutzerdefinierte Layoutdatei in einem anderen Ordner hatten, könnten Sie sie auswählen. Wir werden später im Lernprogramm ü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 im Seitenprüfungsinspektor "Ansicht" auswählen. Weitere Informationen finden Sie im Lernprogramm "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 auf den Browser zu rendern. Da Sie nicht explizit den Namen der zu verwendenden Ansichtsvorlagendatei angegeben haben, ASP.NET MVC standardmäßig die Index.cshtml-Ansichtsdatei im Ordner \Views\HelloWorld verwendet. Die folgende Abbildung zeigt die Zeichenfolge "Hello from our View Template!" festcodiert in der Ansicht.

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

Ändern von Ansichten und Layoutseiten

Zuerst 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 sie auf jeder Seite in der Anwendung angezeigt wird. Wechseln Sie im Solution Explorer zum Ordner /Views/Shared, und öffnen Sie die Datei _Layout.cshtml. Diese Datei wird als Layoutseite bezeichnet und befindet sich im freigegebenen Ordner, den alle anderen Seiten verwenden.

Mithilfe von Layoutvorlagen können Sie das HTML-Containerlayout Ihrer Website an einer zentralen Stelle angeben und dann auf mehrere Seiten auf Ihrer Website anwenden. Suchen Sie die Zeile @RenderBody(). RenderBody ist ein Platzhalter, in dem alle ansichtsspezifischen Seiten, die Sie erstellen, auf der Layoutseite "umschlossen" angezeigt werden. Wenn Sie beispielsweise den "Info"-Link auswählen, wird die Ansicht Views\Home\About.cshtml in der RenderBody-Methode gerendert.

Ändern Sie den Inhalt des Titelelements. Ändern Sie den ActionLink in der Layoutvorlage von "Anwendungsname" in "MVC Movie" und den Controller von Home zu Movies. Die vollständige Layoutdatei wird unten angezeigt:

<!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 sie jetzt "MVC Movie" lautet. Klicken Sie auf den Link "Info ", und sehen Sie, wie diese Seite auch "MVC Movie" anzeigt. Wir konnten die Änderung ein einziges Mal in der Layoutvorlage vornehmen und alle Seiten der Website zeigen den neuen Titel an.

Wenn wir die Datei "Views\HelloWorld\Index.cshtml " zum ersten Mal 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 , sie enthält das gleiche Razor-Markup. Die Datei Views\_ViewStart.cshtml definiert das allgemeine Layout, das von allen Ansichten verwendet wird. 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 die Layout Eigenschaft verwenden, um eine andere Layoutansicht festzulegen oder auf diese null festzulegen, sodass keine Layoutdatei verwendet wird.

Jetzt ändern wir den Titel der Indexansicht.

Öffnen Sie MvcMovie\Views\HelloWorld\Index.cshtml. Es gibt zwei Stellen, an denen eine Änderung vorgenommen werden kann: zuerst der Text, der im Titel des Browsers und dann in der sekundären Kopfzeile (dem <h2> Element) angezeigt wird. Sie werden sie etwas anders machen, damit Sie sehen können, welche Codebits sich in welchem Teil der App ändern.

@{
    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 Der Ansichtsvorlage und der 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 Änderungen im Browser nicht angezeigt werden, sehen Sie möglicherweise zwischengespeicherte Inhalte. Drücken Sie Strg + F5 in Ihrem Browser, um zu erzwingen, dass die Antwort vom Server geladen wird.) Der Browsertitel wird mit der ViewBag.Title in der Index.cshtml-Ansichtsvorlage festgelegten und im Layout-Datei hinzugefügten "- Movie App" erstellt.

Beachten Sie außerdem, wie der Inhalt der Index.cshtml-Ansichtsvorlage mit der _Layout.cshtml-Ansichtsvorlage zusammengeführt wurde und eine einzelne HTML-Antwort an den Browser gesendet wurde. Layoutvorlagen machen es wirklich einfach, Änderungen vorzunehmen, die auf alle Seiten in Ihrer Anwendung angewendet werden.

Unser kleines Stück "Daten" (in diesem Fall die Meldung "Hello from our View Template!") ist jedoch hartcodiert. Die MVC-Anwendung verfügt über ein "V" (Ansicht) und Sie haben noch ein "C" (Controller), aber noch kein "M" (Modell). Kurz gesagt werden wir schrittweise durchgehen, wie Sie eine Datenbank erstellen und Modelldaten daraus abrufen.

Übergeben von Daten vom Controller an die Ansicht

Bevor wir 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 Reaktion auf eine eingehende URL-Anforderung aufgerufen. Eine Controllerklasse ist der Ort, an dem Sie den Code schreiben, der die eingehenden Browseranforderungen verarbeitet, Daten aus einer Datenbank abruft und letztendlich entscheidet, welche Art von Antwort an den Browser zurückgesendet werden soll. Ansichtsvorlagen können dann von einem Controller verwendet werden, um eine HTML-Antwort für den Browser zu generieren und zu formatieren.

Controller sind dafür verantwortlich, die notwendigen Daten oder Objekte bereitzustellen, damit eine View-Vorlage eine Antwort im Browser rendern kann. Eine 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 arbeiten, die vom Controller zur Verfügung gestellt werden. Die Aufrechterhaltung dieser "Trennung von Bedenken" trägt dazu bei, dass Ihr Code sauber, testbar und besser verwaltet werden kann.

Derzeit nimmt die Welcome-Aktionsmethode in der HelloWorldController-Klasse einen name- und einen numTimes-Parameter und gibt die Werte dann direkt an den Browser aus. Anstatt dass der Controller diese Antwort als Zeichenfolge rendert, ändern wir stattdessen den Controller, um eine Ansichtsvorlage zu verwenden. Die Ansichtsvorlage generiert eine dynamische Antwort, was bedeutet, dass Sie geeignete Datenbits vom Controller an die Ansicht übergeben müssen, um die Antwort zu generieren. Sie können dies tun, indem der Controller die dynamischen Daten (Parameter), die die Ansichtsvorlage benötigt, in einem ViewBag Objekt ablegt, auf das die Ansichtsvorlage dann zugreifen kann.

Kehren Sie zur HelloWorldController.cs Datei zurück, und ändern Sie die Welcome Methode so ab, dass dem Message Objekt ein NumTimes Wert ViewBag hinzugefügt wird. ViewBag ist ein dynamisches Objekt, was bedeutet, dass Sie alles, was Sie wollen, in das Objekt setzen können; 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 aus der Abfragezeichenfolge in der Adressleiste parametern in Ihrer Methode zu. Die vollständige HelloWorldController.cs Datei 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();
        }
    }
}

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

Geben Sie im Dialogfeld " Name für Element angeben " " 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 "Hallo" so oft ausgibt, wie der Benutzer es angibt. 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 entnommen und mithilfe des Modellordners an den Controller übergeben. Der Controller verpackt die Daten in ein ViewBag Objekt und übergibt das Objekt an die Ansicht. Die Ansicht zeigt die Daten dann dem Benutzer als HTML an.

Im obigen Beispiel haben wir ein ViewBag Objekt verwendet, um Daten vom Controller an eine Ansicht zu übergeben. Später im Lernprogramm verwenden wir ein Ansichtsmodell, um Daten von einem Controller an eine Ansicht zu übergeben. Der View-Model-Ansatz zum Übergeben von Daten wird allgemein dem View-Bag-Ansatz vorgezogen. Weitere Informationen finden Sie im Blogeintrag Dynamic V Strongly Typed Views .

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.