Freigeben über

Verwenden des HTML5- und jQuery-Ui-Popupkalenders mit ASP.NET MVC – Teil 4

  • Artikel

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 Vorlage zum Bearbeiten von Datumsangaben

In diesem Abschnitt erstellen Sie eine Vorlage zum Bearbeiten von Datumsangaben, die angewendet wird, wenn ASP.NET MVC die Benutzeroberfläche zum Bearbeiten von Modelleigenschaften anzeigt, die mit der Date-Enumeration des DataType-Attributs gekennzeichnet sind. Die Vorlage rendert nur das Datum. Die Zeit wird nicht angezeigt. In der Vorlage verwenden Sie den jQuery UI Datepicker-Popupkalender , um Datumsangaben zu bearbeiten.

Öffnen Sie zunächst die Datei Movie.cs, und fügen Sie der Eigenschaft das DataType-Attribut mit der ReleaseDateDate-Enumeration hinzu, wie im folgenden Code gezeigt:

[DataType(DataType.Date)]
public DateTime ReleaseDate { get; set; }

Dieser Code bewirkt, dass das ReleaseDate Feld ohne zeit in Anzeigevorlagen und Bearbeitungsvorlagen angezeigt wird. Wenn Ihre Anwendung eine date.cshtml-Vorlage im Ordner Views\Shared\EditorTemplates oder im Ordner Views\Movies\EditorTemplates enthält, wird diese Vorlage verwendet, um jede DateTime Eigenschaft während der Bearbeitung zu rendern. Andernfalls zeigt das integrierte ASP.NET Vorlagensystem die Eigenschaft als Datum an.

Drücken Sie STRG+F5, um die Anwendung auszuführen. Wählen Sie einen Bearbeitungslink aus, um zu überprüfen, ob das Eingabefeld für das Releasedatum nur das Datum anzeigt.

Bild des Filmveröffentlichungsdatums

Erweitern Sie in Projektmappen-Explorer den Ordner Ansichten, den Ordner Freigegeben, und klicken Sie dann mit der rechten Maustaste auf den Ordner Views\Shared\EditorTemplates.

Klicken Sie auf Hinzufügen und dann auf Anzeigen. Das Dialogfeld Ansicht hinzufügen wird angezeigt.

Geben Sie im Feld Ansichtsname den Namen "Datum" ein.

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. Die Vorlage Views\Shared\EditorTemplates\Date.cshtml wird erstellt.

Fügen Sie der Vorlage Views\Shared\EditorTemplates\Date.cshtml den folgenden Code hinzu.

@model DateTime
Using Date Template
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date"  })

Die erste Zeile deklariert das Modell als Typ DateTime . Obwohl Sie den Modelltyp nicht in Bearbeitungs- und Anzeigevorlagen deklarieren müssen, ist dies eine bewährte Methode, damit Sie die Kompilierzeitüberprüfung des Modells erhalten, das an die Ansicht übergeben wird. (Ein weiterer Vorteil ist, dass Sie dann IntelliSense für das Modell in der Ansicht in Visual Studio abrufen.) Wenn der Modelltyp nicht deklariert ist, betrachtet ASP.NET MVC ihn als dynamischen Typ, und es gibt keine Überprüfung des Kompilierzeittyps. Wenn Sie das Modell als Typ DateTime deklarieren, wird es stark typisiert.

Die zweite Zeile ist nur literales HTML-Markup, das "Using Date Template" vor einem Datumsfeld anzeigt. Sie verwenden diese Zeile vorübergehend, um zu überprüfen, ob diese Datumsvorlage verwendet wird.

Die nächste Zeile ist ein Html.TextBox-Hilfsprogramm , das ein input Feld rendert, das ein Textfeld ist. Der dritte Parameter für das Hilfsprogramm verwendet einen anonymen Typ, um die Klasse für das Textfeld auf datefield und den Typ auf datefestzulegen. (Da class in C# reserviert ist, müssen Sie das Zeichen verwenden, um das @class Attribut im C#-Parser zu escapen.)

Der date Typ ist ein HTML5-Eingabetyp, mit dem HTML5-fähige Browser ein HTML5-Kalendersteuerelement rendern können. Später fügen Sie JavaScript hinzu, um den jQuery-Datepicker mithilfe der datefield -Klasse mit dem Html.TextBox Element zu verbinden.

Drücken Sie STRG+F5, um die Anwendung auszuführen. Sie können überprüfen, ob die ReleaseDate -Eigenschaft in der Bearbeitungsansicht die Bearbeitungsvorlage verwendet, da die Vorlage "Using Date Template" direkt vor dem ReleaseDate Texteingabefeld anzeigt, wie in dieser Abbildung dargestellt:

Verwendete Bildüberprüfungsvorlage

Zeigen Sie in Ihrem Browser die Quelle der Seite an. (Klicken Sie beispielsweise mit der rechten Maustaste auf die Seite, und wählen Sie Quelle anzeigen aus.) Im folgenden Beispiel wird ein Teil des Markups für die Seite veranschaulicht, das die class Attribute und type im gerenderten HTML veranschaulicht.

<input class="datefield" data-val="true" data-val-required="Date is required" 
      id="ReleaseDate" name="ReleaseDate" type="date" value="1/11/1989" />

Kehren Sie zur Vorlage Views\Shared\EditorTemplates\Date.cshtml zurück, und entfernen Sie das Markup "Using Date Template". Nun sieht die fertige Vorlage wie folgt aus:

@model DateTime
@Html.TextBox("", String.Format("{0:d}", Model.ToShortDateString()),
  new { @class = "datefield", type = "date" })

Hinzufügen eines jQuery-UI-Datepicker-Popupkalenders mithilfe von NuGet

In diesem Abschnitt fügen Sie der Date-Edit-Vorlage den Datepicker-Popupkalender jQuery UI hinzu. Die jQuery UI-Bibliothek bietet Unterstützung für Animationen, erweiterte Effekte und anpassbare Widgets. Es basiert auf der jQuery JavaScript-Bibliothek. Der datepicker-Popupkalender macht es einfach und natürlich, Datumsangaben mithilfe eines Kalenders einzugeben, anstatt eine Zeichenfolge einzugeben. Der Popupkalender schränkt Benutzer auch auf gesetzliche Datumsangaben ein . Mit einem normalen Texteintrag für ein Datum können Sie etwas wie 2/33/1999 ( 33. Februar 1999) eingeben, aber der jQuery UI-Popupkalender lässt dies nicht zu.

Zunächst müssen Sie die jQuery-Ui-Bibliotheken installieren. Dazu verwenden Sie NuGet, einen Paket-Manager, der in SP1-Versionen von Visual Studio 2010 und Visual Web Developer enthalten ist.

Wählen Sie in Visual Web Developer im Menü Extras die Option NuGet-Paket-Manager und dann NuGet-Pakete verwalten aus.

Abbildung des Zugriffs auf die Menüoption

Hinweis: Wenn im Menü Extras der Befehl NuGet-Paket-Manager nicht angezeigt wird, müssen Sie NuGet installieren, indem Sie die Anweisungen auf der Seite NuGet-Installation der NuGet-Website befolgen.

Wenn Sie Visual Studio anstelle von Visual Web Developer verwenden, wählen Sie im Menü Extras die Option NuGet-Paket-Manager und dann Bibliothekspaketverweis hinzufügen aus.

Abbildung: Visual Studio-Version für den Zugriff auf den Nu Get-Paket-Manager

Klicken Sie im Dialogfeld MVCMovie – NuGet-Pakete verwalten auf der linken Seite auf die Registerkarte Online , und geben Sie dann "jQuery.UI" in das Suchfeld ein. Wählen Sie j Abfrage-UI-Widgets:Datepicker und dann die Schaltfläche Installieren aus.

Abbildung: J-Abfrage-U I-Datumsauswahl

Abbildung 2

NuGet fügt Dem Projekt diese Debugversionen und verknaktete Versionen von jQuery UI Core und der jQuery UI-Datumsauswahl hinzu:

  • jquery.ui.core.js
  • jquery.ui.core.min.js
  • jquery.ui.datepicker.js
  • jquery.ui.datepicker.min.js

Hinweis: Die Debugversionen (die Dateien ohne die Erweiterung .min.js ) sind nützlich für das Debuggen, aber in einer Produktionswebsite würden Sie nur die minimierten Versionen einschließen.

Um die jQuery-Datumsauswahl tatsächlich zu verwenden, müssen Sie ein jQuery-Skript erstellen, das das Kalenderwidget mit der Bearbeitungsvorlage verbinden wird. Klicken Sie in Projektmappen-Explorer mit der rechten Maustaste auf den Ordner Skripts, und wählen Sie Hinzufügen, neues Element und dann JScript-Datei aus. Nennen Sie die Datei DatePickerReady.js.

Fügen Sie der dateiDatePickerReady.js den folgenden Code hinzu:

$(function () {
    $(".datefield").datepicker(); 
});

Wenn Sie mit jQuery nicht vertraut sind, finden Sie hier eine kurze Erklärung dazu: Die erste Zeile ist die Funktion "jQuery ready", die aufgerufen wird, wenn alle DOM-Elemente auf einer Seite geladen wurden. In der zweiten Zeile werden alle DOM-Elemente mit dem Klassennamen datefieldausgewählt und dann die datepicker Funktion für jedes von ihnen aufgerufen. (Denken Sie daran, dass Sie die datefield Klasse weiter oben im Tutorial der Vorlage Views\Shared\EditorTemplates\Date.cshtml hinzugefügt haben.)

Öffnen Sie als Nächstes die Datei Views\Shared\_Layout.cshtml . Sie müssen Verweise auf die folgenden Dateien hinzufügen, die alle erforderlich sind, damit Sie die Datumsauswahl verwenden können:

  • Content/themes/base/jquery.ui.core.css
  • Content/themes/base/jquery.ui.datepicker.css
  • Content/themes/base/jquery.ui.theme.css
  • jquery.ui.core.min.js
  • jquery.ui.datepicker.min.js
  • DatePickerReady.js

Das folgende Beispiel zeigt den tatsächlichen Code, den Sie unten im Element in der head Datei Views\Shared\_Layout.cshtml hinzufügen sollten.

<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>

Der vollständige head Abschnitt wird hier gezeigt:

<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>

    <link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
        rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
        rel="stylesheet"  type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
        rel="stylesheet" type="text/css" />

    <script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
        type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
        type="text/javascript"></script>
</head>

Die URL-Inhaltshilfsmethode konvertiert den Ressourcenpfad in einen absoluten Pfad. Sie müssen verwenden @URL.Content , um ordnungsgemäß auf diese Ressourcen zu verweisen, wenn die Anwendung in IIS ausgeführt wird.

Drücken Sie STRG+F5, um die Anwendung auszuführen. Wählen Sie einen Bearbeitungslink aus, und setzen Sie dann die Einfügemarke in das Feld ReleaseDate . Der jQuery-Ui-Popupkalender wird angezeigt.

Abbildung des Veröffentlichungsdatumsfelds mit Datumsauswahl

Wie bei den meisten jQuery-Steuerelementen können Sie ihn mit dem Datepicker umfassend anpassen. Weitere Informationen finden Sie unter Visuelle Anpassung: Entwerfen eines jQuery-UI-Designs auf der jQuery UI-Website .

Unterstützung des HTML5-Datumseingabesteuerelements

Da mehr Browser HTML5 unterstützen, sollten Sie die native HTML5-Eingabe verwenden, z. B. das date Eingabeelement, und nicht den jQuery-UI-Kalender. Sie können Ihrer Anwendung Logik hinzufügen, um HTML5-Steuerelemente automatisch zu verwenden, wenn sie vom Browser unterstützt werden. Ersetzen Sie hierzu den Inhalt der DatePickerReady.js-Datei durch Folgendes:

if (!Modernizr.inputtypes.date) {
    $(function () {
        $(".datefield").datepicker();
    });
}

In der ersten Zeile dieses Skripts wird Modernizr verwendet, um zu überprüfen, ob HTML5-Datumseingaben unterstützt werden. Wenn dies nicht unterstützt wird, wird stattdessen die jQuery-UI-Datumsauswahl eingebunden. (Modernizr ist eine Open-Source-JavaScript-Bibliothek, die die Verfügbarkeit nativer Implementierungen von HTML5 und CSS3 erkennt. Modernizr ist in allen neuen ASP.NET MVC-Projekten enthalten, die Sie erstellen.)

Nachdem Sie diese Änderung vorgenommen haben, können Sie sie mit einem Browser testen, der HTML5 unterstützt, z. B. Opera 11. Führen Sie die Anwendung mit einem HTML5-kompatiblen Browser aus, und bearbeiten Sie einen Filmeintrag. Das HTML5-Datumssteuerelement wird anstelle des jQuery-Ui-Popupkalenders verwendet:

Abbildung der Datumssteuerung H T M L 5

Da neue Versionen von Browsern HTML5 inkrementell implementieren, besteht ein guter Ansatz derzeit darin, Ihrer Website Code hinzuzufügen, der eine Vielzahl von HTML5-Unterstützung bietet. Beispielsweise wird unten ein robusteres DatePickerReady.js Skripts gezeigt, mit dem Ihre Website Browser unterstützen kann, die das HTML5-Datumssteuerelement nur teilweise unterstützen.

if (!Modernizr.inputtypes.date) {
    $(function () {
        $("input[type='date']")
                    .datepicker()
                    .get(0)
                    .setAttribute("type", "text");
    })
}

Dieses Skript wählt HTML5-Elemente input vom Typ date aus, die das HTML5-Datumssteuerelement nicht vollständig unterstützen. Für diese Elemente wird der jQuery-Ui-Popupkalender eingebunden und das Attribut dann in datetextgeänderttype. Durch das Ändern des type Attributs von date in textwird die teilweise HTML5-Datumsunterstützung beseitigt. Ein noch robusteres DatePickerReady.js Skripts finden Sie unter JSFIDDLE.

Hinzufügen von Nullable-Datumsangaben zu den Vorlagen

Wenn Sie eine der vorhandenen Datumsvorlagen verwenden und ein NULL-Datum übergeben, erhalten Sie einen Laufzeitfehler. Um die Datumsvorlagen robuster zu machen, ändern Sie sie so, dass sie NULL-Werte behandeln. Um NULLable-Datumsangaben zu unterstützen, ändern Sie den Code in Views\Shared\DisplayTemplates\DateTime.cshtml wie folgt:

@model Nullable<DateTime>
@(Model != null ? string.Format("{0:d}", Model) : string.Empty)

Der Code gibt eine leere Zeichenfolge zurück, wenn das Modell NULL ist.

Ändern Sie den Code in der Datei Views\Shared\EditorTemplates\Date.cshtml wie folgt:

@model Nullable<DateTime>

 @{
    DateTime dt = DateTime.Now;
    if (Model != null)
    {
       dt  = (System.DateTime) Model;
   
    }
    @Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date"  })
}

Wenn dieser Code ausgeführt wird, wird der Wert des DateTime Modells verwendet, wenn das Modell nicht NULL ist. Wenn das Modell NULL ist, wird stattdessen das aktuelle Datum verwendet.

Wrapup

In diesem Tutorial werden die Grundlagen ASP.NET Vorlagenhilfsprogramme behandelt und ihnen gezeigt, wie Sie den jQuery UI-Datepicker-Popupkalender in einer ASP.NET MVC-Anwendung verwenden. Weitere Informationen findest du in den folgenden Ressourcen:

  • Informationen zur jQuery-Benutzeroberfläche finden Sie unter jQuery UI.
  • Informationen zum Lokalisieren des datepicker-Steuerelements finden Sie unter UI/Datepicker/Localization.
  • Weitere Informationen zu den ASP.NET MVC-Vorlagen finden Sie in der Blogreihe von Brad Wilson zu ASP.NET MVC 2-Vorlagen. Obwohl die Serie für ASP.NET MVC 2 geschrieben wurde, gilt das Material weiterhin für die aktuelle Version von ASP.NET MVC.

Zurück