Hinzufügen einer Ansicht (C#)
von Rick Anderson
Hinweis
Hier ist eine aktualisierte Version dieses Lernprogramms verfügbar, die ASP.NET MVC 5 und Visual Studio 2013 verwendet. Es ist sicherer, viel einfacher zu folgen und zeigt weitere Features.
In diesem Lernprogramm lernen Sie die Grundlagen zum Erstellen einer ASP.NET MVC-Webanwendung mithilfe von Microsoft Visual Web Developer 2010 Express Service Pack 1, einer kostenlosen Version von Microsoft Visual Studio. Bevor Sie beginnen, stellen Sie sicher, dass Sie die unten aufgeführten Voraussetzungen installiert haben. Sie können alle installieren, indem Sie auf den folgenden Link klicken: Web Platform Installer. Alternativ können Sie die erforderlichen Komponenten mit den folgenden Links einzeln installieren:
- Voraussetzungen für Visual Studio Web Developer Express SP1
- ASP.NET MVC 3 Tools Update
- SQL Server Compact 4.0(Runtime + Tools-Unterstützung)
Wenn Sie Visual Studio 2010 anstelle von Visual Web Developer 2010 verwenden, installieren Sie die erforderlichen Komponenten, indem Sie auf den folgenden Link klicken: Visual Studio 2010-Voraussetzungen.
Für dieses Thema steht ein Visual Web Developer-Projekt mit C#-Quellcode zur Verfügung. Laden Sie die C#-Version herunter. Wenn Sie Visual Basic bevorzugen, wechseln Sie zu der Visual Basic-Version dieses Lernprogramms.
In diesem Abschnitt ändern Sie die HelloWorldController Klasse, um Ansichtsvorlagendateien zu verwenden, um den Prozess der Generierung von HTML-Antworten auf einen Client sauber zu kapseln.
Sie erstellen eine Ansichtsvorlagendatei mit dem neuen Razor-Ansichtsmodul , das mit ASP.NET MVC 3 eingeführt wurde. 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.
Beginnen Sie mit der Verwendung einer Ansichtsvorlage mit der Index Methode in der HelloWorldController Klasse. Derzeit gibt die Index-Methode eine Zeichenfolge mit der Meldung zurück, die in der Controllerklasse hartcodiert ist. Ändern Sie die Index Methode, um ein View Objekt zurückzugeben, wie in der folgenden Abbildung dargestellt:
public ActionResult Index()
{
return View();
}
Dieser Code verwendet eine Ansichtsvorlage, um eine HTML-Antwort auf den Browser zu generieren. Fügen Sie im Projekt eine Ansichtsvorlage hinzu, die Sie mit der Index Methode verwenden können. Klicken Sie dazu mit der rechten Maustaste in die Index Methode, und klicken Sie auf " Ansicht hinzufügen".
Das Dialogfeld "Ansicht hinzufügen" wird angezeigt. Behalten Sie die Standardeinstellungen bei, und klicken Sie auf die Schaltfläche "Hinzufügen ":
Der Ordner "MvcMovie\Views\HelloWorld " und die Datei "MvcMovie\Views\HelloWorld\Index.cshtml " werden erstellt. Sie können sie in Projektmappen-Explorer sehen:
Im Folgenden wird die Datei Index.cshtml angezeigt, die erstellt wurde:
Fügen Sie html-Code unter dem <h2> Tag hinzu. Die geänderte Datei "MvcMovie\Views\HelloWorld\Index.cshtml " wird unten angezeigt.
@{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<p>Hello from our View Template!</p>
Führen Sie 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 in der Ansicht hartcodierte Zeichenfolge.
Sieht ziemlich gut aus. Beachten Sie jedoch, dass die Titelleiste des Browsers "Index" und der große Titel auf der Seite "Meine MVC-Anwendung" lautet. Ändern wir diese.
Ändern von Ansichten und Layoutseiten
Zuerst möchten Sie den Titel "Meine MVC-Anwendung" 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 in Projektmappen-Explorer zum Ordner "/Views/Shared", und öffnen Sie die Datei "_Layout.cshtml". Diese Datei wird als Layoutseite bezeichnet und ist die freigegebene "Shell", die alle anderen Seiten verwenden.
Layout-Vorlagen ermöglichen Ihnen, das HTML-Containerlayout Ihrer Website zentral anzugeben und dann auf mehrere Seiten Ihrer Website anzuwenden. Notieren Sie sich die @RenderBody() Zeile am Ende der Datei. RenderBody ist ein Platzhalter, in dem alle ansichtsspezifischen Seiten, die Sie erstellen, auf der Layoutseite "umschlossen" angezeigt werden. Ändern Sie die Titelüberschrift in der Layoutvorlage von "Meine MVC-Anwendung" in "MVC Movie App".
<div id="title">
<h1>MVC Movie App</h1>
</div>
Führen Sie die Anwendung aus, und beachten Sie, dass sie jetzt "MVC Movie App" lautet. Klicken Sie auf den Link "Info ", und sehen Sie, wie diese Seite auch "MVC Movie App" anzeigt. Wir konnten die Änderung einmal in der Layoutvorlage vornehmen und alle Seiten auf der Website den neuen Titel widerspiegeln.
Die vollständige datei _Layout.cshtml wird unten angezeigt:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>MVC Movie App</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
@RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
Jetzt ändern wir den Titel der Indexseite (Ansicht).
Ö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 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). Wenn Sie sich den Quellcode der Layoutvorlage ansehen, werden Sie feststellen, dass die Vorlage diesen Wert im <title> Element als Teil des <head> HTML-Abschnitts verwendet. Mit diesem Ansatz können Sie problemlos andere Parameter zwischen Der Ansichtsvorlage und der Layoutdatei übergeben.
Führen Sie die Anwendung aus, und navigieren Sie zu http://localhost:xx/HelloWorld. 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, werden möglicherweise zwischengespeicherte Inhalte angezeigt. Drücken Sie STRG+F5 in Ihrem Browser, um zu erzwingen, dass die Antwort vom Server geladen wird.)
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 erleichtern ungemein das Vornehmen von Änderungen an allen Seiten in Ihrer Anwendung.
Unser kleines Stück "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). Kurz gesagt, wir werden durchgehen, wie eine Datenbank erstellt und Modelldaten daraus abgerufen werden.
Ü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 Parameter 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.
Die Verantwortlichen sind für die Bereitstellung von Daten oder Objekten verantwortlich, damit eine Ansichtsvorlage eine Antwort auf den Browser rendern kann. Eine Ansichtsvorlage sollte niemals Geschäftslogik ausführen oder direkt mit einer Datenbank interagieren. Stattdessen sollte sie nur mit den Daten verwendet werden, die vom Verantwortlichen bereitgestellt werden. Die Aufrechterhaltung dieser "Trennung von Bedenken" trägt dazu bei, dass Ihr Code sauberer und besser verwaltet werden kann.
Derzeit verwendet die Welcome Aktionsmethode in der HelloWorldController Klasse einen name Parameter und numTimes gibt dann die Werte 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. 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 platzieren, die die Ansichtsvorlage in einem ViewBag Objekt benötigt, auf das die Ansichtsvorlage zugreifen kann.
Kehren Sie zur HelloWorldController.cs Datei zurück, und ändern Sie die Welcome Methode, um dem ViewBag Objekt einen und NumTimes einen Message Wert hinzuzufügen. 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. 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();
}
}
}
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ü "Debuggen " die Option "Build MvcMovie " aus, um sicherzustellen, dass das Projekt kompiliert ist.
Klicken Sie dann mit der rechten Maustaste in die Welcome Methode, und klicken Sie auf " Ansicht hinzufügen". So sieht das Dialogfeld "Ansicht hinzufügen" aus:
Klicken Sie auf "Hinzufügen", und fügen Sie dann den folgenden Code unter dem <h2> Element in der neuen Datei "Welcome.cshtml" hinzu. Sie erstellen eine Schleife, die "Hello" so oft sagt, wie der Benutzer sagt, es sollte. 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
Jetzt werden Daten aus der URL übernommen und automatisch 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.
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.