Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
von Scott Hanselman
Dies ist ein Anfängertutorial, in dem die Grundlagen der ASP.NET MVC vorgestellt werden. Sie erstellen eine einfache Webanwendung, die Lese- und Schreibvorgänge aus einer Datenbank ermöglicht. Besuchen Sie das ASP.NET MVC Learning Center , um weitere ASP.NET MVC-Tutorials und -Beispiele zu finden.
In diesem Abschnitt untersuchen wir, wie unsere HelloWorldController-Klasse eine View-Vorlagendatei verwendet, um die Generierung von HTML-Antworten sauber an einen Client zu kapseln.
Beginnen wir mit der Verwendung einer View-Vorlage mit unserer Index-Methode. Unsere Methode heißt Index und befindet sich im HelloWorldController. Derzeit gibt die Index()-Methode eine Zeichenfolge mit einer Nachricht zurück, die innerhalb der Controller-Klasse hartcodiert ist.
public string Index()
{
return "<html><body>This is my default action...</body></html>";
}
Lassen Sie uns nun die Index-Methode so ändern, dass sie stattdessen wie folgt aussieht:
public ActionResult Index()
{
return View();
}
Nun fügen wir dem Projekt eine Ansichtsvorlage hinzu, die wir für die Index()-Methode verwenden können. Klicken Sie dazu mit der rechten Maustaste irgendwo in der Mitte der Index-Methode, und klicken Sie auf Ansicht hinzufügen...
Dadurch wird das Dialogfeld "Ansicht hinzufügen" geöffnet, das uns einige Optionen zum Erstellen einer Ansichtsvorlage bietet, die von unserer Index-Methode verwendet werden kann. Ändern Sie vorerst nichts, und klicken Sie einfach auf die Schaltfläche Hinzufügen.
Nachdem Sie auf Hinzufügen geklickt haben, werden ein neuer Ordner und eine neue Datei im Projektmappenordner angezeigt, wie hier dargestellt. Ich habe jetzt einen HelloWorld-Ordner unter Ansichten und eine Index.aspx-Datei in diesem Ordner.
Die neue Indexdatei ist ebenfalls bereits geöffnet und kann bearbeitet werden. Fügen Sie unter dem ersten <h2-Index<>/h2> text wie "Hallo Welt" hinzu.
<h2>Index</h2>
Hello world!
Führen Sie Ihre Anwendung aus, und besuchen Sie http://localhost:xx/HelloWorld erneut in Ihrem Browser. Die Index-Methode in unserem Controller in diesem Beispiel hat keine Arbeit ausgeführt, aber "return View()" aufgerufen, was angibt, dass wir eine Ansichtsvorlagendatei verwenden wollten, um eine Antwort zurück an den Client zu rendern. Da wir den Namen der zu verwendenden Ansichtsvorlagendatei nicht explizit angegeben haben, ASP.NET MVC standardmäßig die Ansichtsdatei Index.aspx im Ordner \Views\HelloWorld verwendet. Nun sehen wir die hartcodierte Zeichenfolge in unserer Ansicht.
Sieht ziemlich gut aus. Beachten Sie jedoch, dass der Titel des Browsers "Index" und der große Titel auf der Seite "Meine MVC-Anwendung" lautet. Lassen Sie uns diese ändern.
Ändern von Ansichten und Gestaltungsvorlagen
Zunächst ändern wir den Text "Meine MVC-Anwendung". Dieser Text wird freigegeben und auf jeder Seite angezeigt. Es wird tatsächlich nur an einer Stelle in unserem Code angezeigt, obwohl es sich auf jeder Seite in unserer App befindet. Wechseln Sie zum Ordner /Views/Shared im Projektmappen-Explorer, und öffnen Sie die Datei Site.Master. Diese Datei wird als Gestaltungsvorlage bezeichnet und ist die freigegebene "Shell", die alle anderen Seiten verwenden.
Beachten Sie in dieser Datei den Text ContentPlaceholder "MainContent".
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
In diesem Platzhalter werden alle von Ihnen erstellten Seiten in der master Seite "umschlossen" angezeigt. Versuchen Sie, den Titel zu ändern, führen Sie dann Ihre App aus, und besuchen Sie mehrere Seiten. Sie werden feststellen, dass Ihre eine Änderung auf mehreren Seiten angezeigt wird.
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
Jetzt enthält jede Seite die primäre Überschrift - das ist H1 - von "Meine MVC-Filmanwendung". Das verarbeitet den weißen Text oben, der für alle Seiten freigegeben wird.
Hier ist site.Master in seiner Gesamtheit mit unserem geänderten Titel:
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1>My MVC Movie Application</h1>
</div>
<div id="logindisplay">
<% Html.RenderPartial("LogOnUserControl"); %>
</div>
<div id="menucontainer">
<ul id="menu">
<li><%: Html.ActionLink("Home", "Index", "Home")%></li>
<li><%: Html.ActionLink("About", "About", "Home")%></li>
</ul>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Nun ändern wir den Titel der Seite Index.
Öffnen Sie /HelloWorld/Index.aspx. Es gibt zwei Möglichkeiten, sich zu ändern. Zuerst der Titel, der im Titel des Browsers angezeigt wird, dann der sekundäre Header - das ist H2 - sowie. Ich mache sie jeweils etwas anders, damit Sie sehen können, welcher Teil der App sich ändert.
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Movie List
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>My Movie List</h2>
Hello World!
</asp:Content>
Führen Sie Ihre App aus, und besuchen Sie /Movies. Beachten Sie, dass sich der Browsertitel, die primäre Überschrift und die sekundären Überschriften geändert haben. Es ist einfach, mit kleinen Änderungen an Ihrer Ansicht große Änderungen in Ihrer App vorzunehmen.
Unser wenig "Daten" (in diesem Fall die "Hallo Welt!"-Nachricht) war jedoch hartcodiert. Wir haben V (Ansichten) und C (Controller), aber noch kein M (Modell). In Kürze erfahren Sie, wie Sie eine Datenbank erstellen und Modelldaten daraus abrufen.
Übergeben eines ViewModel
Bevor wir jedoch zu einer Datenbank wechseln und über Modelle sprechen, sprechen wir zunächst über "ViewModels". Dies sind Objekte, die darstellen, was eine Ansichtsvorlage zum Rendern einer HTML-Antwort auf einen Client benötigt. Sie werden in der Regel erstellt und von einer Controller-Klasse an eine View-Vorlage übergeben und sollten nur die Daten enthalten, die für die View-Vorlage erforderlich sind – und nicht mehr.
Zuvor hat unsere Welcome()-Aktionsmethode mit unserem HelloWorld-Beispiel einen Namen und einen numTimes-Parameter verwendet und an den Browser ausgegeben. Anstatt diese Antwort vom Controller weiterhin direkt zu rendern, erstellen wir stattdessen eine kleine Klasse, um diese Daten zu speichern, und übergeben sie dann an eine Ansichtsvorlage, um die HTML-Antwort mit ihr zurückzurendern. Auf diese Weise befasst sich der Controller mit einer Sache und der Ansichtsvorlage mit einer anderen – damit wir sauber "Trennung von Bedenken" innerhalb unserer Anwendung beibehalten können.
Kehren Sie zur Datei HelloWorldController.cs zurück, fügen Sie eine neue "WelcomeViewModel"-Klasse hinzu, und ändern Sie die Welcome-Methode in Ihrem Controller. Hier sehen Sie den vollständigen HelloWorldController.cs mit der neuen Klasse in derselben Datei.
using System.Web.Mvc;
namespace Movies.Controllers
{
public class HelloWorldController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Welcome(string name, int numTimes = 1)
{
var viewModel = new WelcomeViewModel
{
Message = "Hello " + name,
NumTimes = numTimes
};
return View(viewModel);
}
public class WelcomeViewModel
{
public string Message { get; set; }
public int NumTimes { get; set; }
}
}
}
Obwohl es sich um mehrere Zeilen handelt, besteht unsere Welcome-Methode wirklich nur aus zwei Codeanweisungen. Die erste Anweisung packt unsere beiden Parameter in ein ViewModel-Objekt, und die zweite übergibt das resultierende Objekt an view.
Jetzt benötigen wir eine Willkommensansichtsvorlage! Klicken Sie mit der rechten Maustaste in die Welcome-Methode, und wählen Sie Ansicht hinzufügen aus. Dieses Mal aktivieren wir "Erstellen einer stark typisierten Ansicht" und wählen unsere WelcomeViewModel-Klasse aus der Dropdownliste aus. Diese neue Ansicht kennt nur WelcomeViewModels und keine anderen Objekttypen.
HINWEIS: Sie müssen nach dem Hinzufügen Ihres WelcomeViewModels einmal kompiliert haben, damit sie in der Dropdownliste angezeigt wird.
So sollte Ihr Dialogfeld Ansicht hinzufügen aussehen. Klicken Sie auf die Schaltfläche Hinzufügen.
Fügen Sie diesen Code unter h2 <> in Ihrer neuen Welcome.aspx-Datei hinzu. Wir erstellen eine Schleife und sagen so oft Hallo, wie der Benutzer sagt, wir sollten es!
<% for(int i=0;i<Model.NumTimes;i++) { %>
<%h3><%: Model.Message %></h3>
<% } %>
Beachten Sie auch, wenn Sie das eingeben, da wir dieser Ansicht über das WelcomeViewModel (sie sind verheiratet, erinnern Sie sich?) erzählt haben, dass wir jedes Mal hilfreich sind, wenn wir auf unser Model-Objekt verweisen, wie im folgenden Screenshot gezeigt:
Führen Sie Ihre Anwendung aus, und besuchen Sie sie http://localhost:xx/HelloWorld/Welcome?name=Scott&numtimes=4 erneut. Jetzt nehmen wir Daten aus der URL, sie werden automatisch an unseren Controller übergeben, unser Controller packt die Daten in ein ViewModel und übergibt dieses Objekt an unsere Ansicht. Die Ansicht als zeigt dem Benutzer die Daten als HTML an.
Nun, das war eine Art "M" für Model, aber nicht die Datenbankart. Nehmen wir an, was wir gelernt haben, und erstellen Sie eine Datenbank mit Filmen.