Verwenden des HTML5- und jQuery-Ui-Popupkalenders mit ASP.NET MVC – Part 2
von Rick Anderson
In diesem Tutorial lernen Sie die Grundlagen der Arbeit mit Editorvorlagen, Anzeigevorlagen und dem jQuery UI-Popupkalender für die Datumsauswahl in einer ASP.NET MVC-Webanwendung kennen.
Hinzufügen einer automatischen DateTime-Vorlage
Im ersten Teil dieses Tutorials haben Sie erfahren, wie Sie dem Modell Attribute hinzufügen können, um die Formatierung explizit anzugeben, und wie Sie die Vorlage explizit angeben können, die zum Rendern des Modells verwendet wird. Das DisplayFormat-Attribut im folgenden Code gibt beispielsweise explizit die Formatierung für die ReleaseDate Eigenschaft an.
[DisplayFormat(DataFormatString = "{0:d}")]
public DateTime ReleaseDate { get; set; }
Im folgenden Beispiel gibt das DataType-Attribut mithilfe der Date Enumeration an, dass die Datumsvorlage zum Rendern des Modells verwendet werden soll. Wenn in Ihrem Projekt keine Datumsvorlage vorhanden ist, wird die integrierte Datumsvorlage verwendet.
[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
However, ASP. MVC kann den Typabgleich mithilfe der Konventions-über-Konfiguration durchführen, indem nach einer Vorlage gesucht wird, die dem Namen eines Typs entspricht. Dadurch können Sie eine Vorlage erstellen, die Daten automatisch formatiert, ohne Attribute oder Code zu verwenden. In diesem Teil des Tutorials erstellen Sie eine Vorlage, die automatisch auf Modelleigenschaften des Typs DateTime angewendet wird. Sie müssen kein Attribut oder eine andere Konfiguration verwenden, um anzugeben, dass die Vorlage zum Rendern aller Modelleigenschaften des Typs DateTime verwendet werden soll.
Außerdem erfahren Sie, wie Sie die Anzeige einzelner Eigenschaften oder sogar einzelner Felder anpassen können.
Zu Beginn entfernen wir vorhandene Formatierungsinformationen und zeigen die vollständigen Datumsangaben in der Anwendung an.
Öffnen Sie die Datei Movie.cs , und kommentieren Sie das DataType Attribut für die ReleaseDate Eigenschaft aus:
// [DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }
Drücken Sie STRG+F5, um die Anwendung auszuführen.
Beachten Sie, dass die ReleaseDate -Eigenschaft jetzt sowohl das Datum als auch die Uhrzeit anzeigt, da dies die Standardeinstellung ist, wenn keine Formatierungsinformationen bereitgestellt werden.
Hinzufügen von CSS-Formatvorlagen zum Testen neuer Vorlagen
Bevor Sie eine Vorlage zum Formatieren von Datumsangaben erstellen, fügen Sie einige CSS-Stilregeln hinzu, die Sie auf die neuen Vorlagen anwenden können. Dadurch können Sie überprüfen, ob die gerenderte Seite die neue Vorlage verwendet.
Öffnen Sie die Datei Content\Site.cs, und fügen Sie unten in der Datei die folgenden CSS-Regeln hinzu:
/* Styles to test new editor and display templates.
----------------------------------------------------------*/
.loud-1 {
font-weight: bold;
color: Red;
}
.loud-2 {
font-size: 2.0em;
color:Green;
}
.loud-3 {
font-style: italic;
color: yellow;
background-color: blue;
}
Hinzufügen von DateTime-Anzeigevorlagen
Jetzt können Sie die neue Vorlage erstellen. Erstellen Sie im Ordner Views\Movies einen Ordner DisplayTemplates .
Erstellen Sie im Ordner Views\Shared einen Ordner DisplayTemplates und einen EditorTemplates-Ordner .
Die Anzeigevorlagen im Ordner Views\Shared\DisplayTemplates werden von allen Controllern verwendet. Die Anzeigevorlagen im Ordner Views\Movie\DisplayTemplates werden nur vom Movie Controller verwendet. (Wenn eine Vorlage mit demselben Namen in beiden Ordnern angezeigt wird, hat die Vorlage im Ordner Views\Movie\DisplayTemplates – also die spezifischere Vorlage – Vorrang für vom Controller zurückgegebene Movie Ansichten.)
Erweitern Sie in Projektmappen-Explorer den Ordner Ansichten, erweitern Sie den Ordner Freigegeben, und klicken Sie dann mit der rechten Maustaste auf den Ordner Views\Shared\DisplayTemplates.
Klicken Sie auf Hinzufügen und dann auf Anzeigen. Das Dialogfeld Ansicht hinzufügen wird angezeigt.
Geben Sie im Feld Ansichtsname den Namen ein DateTime. (Sie müssen diesen Namen verwenden, um dem Namen des Typs zu entsprechen.)
Aktivieren Sie das Kontrollkästchen Als Teilansicht erstellen . Stellen Sie sicher, dass die Kontrollkästchen Layout oder master Seite verwenden und Stark typisierte Ansicht erstellen nicht aktiviert sind.
Klicken Sie auf Hinzufügen. Eine DateTime.cshtml-Vorlage wird in Views\Shared\DisplayTemplates erstellt.
Die folgende Abbildung zeigt den Ordner Ansichten in Projektmappen-Explorer, nachdem die DateTime Anzeige- und Editorvorlagen erstellt wurden.
Öffnen Sie die Datei Views\Shared\DisplayTemplates\DateTime.cshtml , und fügen Sie das folgende Markup hinzu, das die String.Format-Methode verwendet, um die Eigenschaft als Datum ohne Uhrzeit zu formatieren. (Das {0:d} Format gibt das kurze Datumsformat an.)
@String.Format("{0:d}", Model.Date)
Wiederholen Sie diesen Schritt, um eine DateTime Vorlage im Ordner Views\Movie\DisplayTemplates zu erstellen. Verwenden Sie den folgenden Code in der Datei Views\Movie\DisplayTemplates\DateTime.cshtml .
<span class="loud-1">
@String.Format("{0:d}", Model.Date)
</span>
Die loud-1 CSS-Klasse bewirkt, dass das Datum in fettem rotem Text angezeigt wird. Sie haben die loud-1 CSS-Klasse nur als temporäres Measure hinzugefügt, sodass Sie leicht sehen können, wann diese bestimmte Vorlage verwendet wird.
Sie haben vorlagen erstellt und angepasst, die ASP.NET zum Anzeigen von Datumsangaben verwenden. Die allgemeinere Vorlage (im Ordner Views\Shared\DisplayTemplates) zeigt ein einfaches kurzes Datum an. Die Vorlage speziell für den Movie Controller (im Ordner Views\Movies\DisplayTemplates ) zeigt ein kurzes Datum an, das auch als fett formatierter roter Text formatiert ist.
Drücken Sie STRG+F5, um die Anwendung auszuführen. Der Browser rendert die Indexansicht für die Anwendung.
Die ReleaseDate -Eigenschaft zeigt das Datum jetzt in einer fetten roten Schriftart ohne Uhrzeit an. Dadurch können Sie bestätigen, dass das DateTime vorlagenbasierte Hilfsprogramm im Ordner Views\Movies\DisplayTemplates über dem DateTime vorlagenbasierten Hilfsprogramm im freigegebenen Ordner (Views\Shared\DisplayTemplates) ausgewählt ist.
Benennen Sie nun die Datei Views\Movies\DisplayTemplates\DateTime.cshtml in Views\Movies\DisplayTemplates\LoudDateTime.cshtml um.
Drücken Sie STRG+F5, um die Anwendung auszuführen.
Dieses Mal zeigt die ReleaseDate Eigenschaft ein Datum ohne Uhrzeit und ohne die fettgedruckte rote Schriftart an. Dies veranschaulicht, dass eine Vorlage mit dem Namen des Datentyps (in diesem Fall DateTime) automatisch verwendet wird, um alle Modelleigenschaften dieses Typs anzuzeigen. Nachdem Sie die Datei DateTime.cshtml in LoudDateTime.cshtml umbenannt haben, ASP.NET keine Vorlage mehr im Ordner Views\Movies\DisplayTemplates gefunden, sodass die Vorlage DateTime.cshtml aus dem Ordner *Views\Movies\Shared* verwendet wurde.
(Beim Vorlagenabgleich wird die Groß-/Kleinschreibung nicht beachtet, sodass Sie den Namen der Vorlagendatei mit einer beliebigen Groß- und Kleinschreibung erstellen können. Beispielsweise würden DATETIME.cshtml, datetime.cshtml und DaTeTiMe.cshtml alle mit dem DateTime Typ übereinstimmen.)
Zur Überprüfung: An diesem Punkt wird das ReleaseDate Feld mithilfe der Vorlage Views\Movies\DisplayTemplates\DateTime.cshtml angezeigt, die die Daten mit einem kurzen Datumsformat anzeigt, andernfalls aber kein spezielles Format hinzufügt.
Verwenden von UIHint zum Angeben einer Anzeigevorlage
Wenn Ihre Webanwendung über viele DateTime Felder verfügt und Sie standardmäßig alle oder die meisten felder im datumsgeschützten Format anzeigen möchten, ist die Vorlage DateTime.cshtml ein guter Ansatz. Aber was ist, wenn Sie ein paar Datumsangaben haben, an denen Sie das vollständige Datum und die vollständige Uhrzeit anzeigen möchten? Kein Problem. Sie können eine zusätzliche Vorlage erstellen und das UIHint-Attribut verwenden, um die Formatierung für das vollständige Datum und die vollständige Uhrzeit anzugeben. Sie können diese Vorlage dann selektiv anwenden. Sie können das UIHint-Attribut auf Modellebene verwenden oder die Vorlage in einer Ansicht angeben. In diesem Abschnitt erfahren Sie, wie Sie das UIHint -Attribut verwenden, um die Formatierung für einige Instanzen von Datums-Uhrzeit-Feldern selektiv zu ändern.
Öffnen Sie die Datei Views\Movies\DisplayTemplates\LoudDateTime.cshtml , und ersetzen Sie den vorhandenen Code durch Folgendes:
<span class="loud-2">
@Model.ToString()
</span>
Dadurch werden das vollständige Datum und die vollständige Uhrzeit angezeigt und die CSS-Klasse hinzugefügt, die den Text grün und groß macht.
Öffnen Sie die Datei Movie.cs, und fügen Sie der Eigenschaft das ReleaseDateUIHint-Attribut hinzu, wie im folgenden Beispiel gezeigt:
[UIHint("LoudDateTime")]
public DateTime ReleaseDate { get; set; }
Dies teilt ASP.NET MVC mit, dass die LoudDateTime.cshtml-Vorlage verwendet werden soll, wenn die Eigenschaft (insbesondere und nicht nur ein beliebiges DateTime Objekt) angezeigt ReleaseDate wird.
Drücken Sie STRG+F5, um die Anwendung auszuführen.
Beachten Sie, dass die ReleaseDate -Eigenschaft das Datum und die Uhrzeit jetzt in einer großen grünen Schriftart anzeigt.
Kehren Sie zum UIHint Attribut in der Datei Movie.cs zurück, und kommentieren Sie es aus, damit die Vorlage LoudDateTime.cshtml nicht verwendet wird. Führen Sie die Anwendung erneut aus. Das Veröffentlichungsdatum wird nicht groß und grün angezeigt. Dadurch wird überprüft, ob die Vorlage Views\Shared\DisplayTemplates\DateTime.cshtml in den Ansichten Index und Details verwendet wird.
Wie bereits erwähnt, können Sie auch eine Vorlage in einer Ansicht anwenden, sodass Sie die Vorlage auf eine einzelne instance einiger Daten anwenden können. Öffnen Sie die Ansicht Views\Movies\Details.cshtml . Fügen Sie "LoudDateTime" als zweiten Parameter des Html.DisplayFor-Aufrufs für das Feld hinzu ReleaseDate . Der fertige Code sieht wie folgt aus:
<div class="display-label">ReleaseDate</div>
<div class="display-field">
@Html.DisplayFor(model => model.ReleaseDate,"LoudDateTime")
</div>
Dies gibt an, dass die LoudDateTime Vorlage zum Anzeigen der Modelleigenschaft verwendet werden soll, unabhängig davon, welche Attribute auf das Modell angewendet werden.
Drücken Sie STRG+F5, um die Anwendung auszuführen.
Stellen Sie sicher, dass die Filmindexseite die Vorlage Views\Shared\DisplayTemplates\DateTime.cshtml (rot fett) verwendet und die Seite Film\Details die Vorlage Views\Movies\DisplayTemplates\LoudDateTime.cshtml (groß und grün) verwendet.
Im nächsten Abschnitt erstellen Sie eine Vorlage für einen komplexen Typ.