Verwenden des HTML5 und jQuery UI DatePicker-Popup Kalenders mit ASP.NET MVC-Part 4

  • Artikel
  • 9 Minuten Lesedauer

von Rick Anderson

Dieses Tutorial vermittelt Ihnen die Grundlagen der Arbeit mit Editor-Vorlagen, Anzeige Vorlagen und des jQuery UI DatePicker-Popup Kalenders in einer ASP.NET MVC-Webanwendung.

Hinzufügen einer Vorlage zum Bearbeiten von Datumsangaben

In diesem Abschnitt erstellen Sie eine Vorlage zum Bearbeiten von Datumsangaben, die angewendet werden, wenn ASP.NET MVC eine Benutzeroberfläche zum Bearbeiten von Modell Eigenschaften anzeigt, die mit der Date -Enumeration des DataType -Attributs gekennzeichnet sind. Die Vorlage stellt nur das Datum dar. die Zeit wird nicht angezeigt. In der Vorlage verwenden Sie den jQuery UI DatePicker -Popup Kalender, um eine Möglichkeit zum Bearbeiten von Datumsangaben zu bieten.

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

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

Dieser Code bewirkt, dass das ReleaseDate-Feld in Anzeige Vorlagen und Bearbeitungs Vorlagen ohne die Uhrzeit 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 zum renderingbeliebiger DateTime Eigenschaft während der Bearbeitung verwendet. Andernfalls zeigt das integrierte ASP.net-Vorlagen System die Eigenschaft als Datum an.

Drücken Sie STRG+F5, um die Anwendung auszuführen. Wählen Sie einen Link bearbeiten aus, um zu überprüfen, ob im Eingabefeld für das Veröffentlichungsdatum nur das Datum angezeigt wird.

Erweitern Sie in Projektmappen-Explorerden Ordner Ansichten , erweitern Sie den Ordner frei gegeben , und klicken Sie dann mit der rechten Maustaste auf den Ordner views\shared\editortemplates .

Klicken Sie auf Hinzufügenund dann auf anzeigen. Das Dialogfeld Ansicht hinzufügen wird angezeigt.

Geben Sie im Feld Ansichts Name "Datum"ein.

Aktivieren Sie das Kontrollkästchen als Teilansicht erstellen . Stellen Sie sicher, dass die Kontrollkästchen Layout oder Master Seite verwenden und eine stark typisierte Ansicht erstellen nicht aktiviert sind.

Klicken Sie auf Hinzufügen. Die Vorlage " views\shared\editor templates\date.cshtml " wird erstellt.

Fügen Sie der Vorlage " views\shared\editor templates\date.cshtml " den folgenden Code hinzu.

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

In der ersten Zeile wird das Modell als DateTime Typ deklariert. Obwohl Sie den Modelltyp nicht in Bearbeitungs-und Anzeige Vorlagen deklarieren müssen, ist es eine bewährte Vorgehensweise, dass Sie die Kompilierzeit Überprüfung des Modells erhalten, das an die Ansicht übermittelt wird. (Ein weiterer Vorteil ist, dass Sie dann IntelliSense für das Modell in der Ansicht in Visual Studio erhalten.) Wenn der Modelltyp nicht deklariert ist, betrachtet ASP.NET MVC ihn als dynamischen Typ, und es ist keine Typüberprüfung zur Kompilierzeit vorhanden. Wenn Sie das Modell als DateTime Typ deklarieren, wird es stark typisiert.

Die zweite Zeile ist nur ein literales HTML-Markup, das "mithilfe der Datums Vorlage" vor einem Datumsfeld anzeigt. Diese Zeile wird temporär verwendet, um zu überprüfen, ob diese Datums Vorlage 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 datefestzulegen. (Da class in C#reserviert ist, müssen Sie das @ Zeichen verwenden, um das class-Attribut im C# Parser zu Escapezeichen zu versehen.)

Der date Typ ist ein HTML5-Eingabetyp, der HTML5-fähigen Browsern das Rendering eines HTML5-Kalender Steuer Elements ermöglicht. 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 Bearbeitungs Ansicht die Vorlage bearbeiten verwendet, da die Vorlage "mithilfe von Datums Vorlagen" direkt vor dem Eingabefeld ReleaseDate Text anzeigt, wie in der folgenden Abbildung dargestellt:

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 anzeigenaus.) Im folgenden Beispiel wird ein Teil des Markups für die Seite gezeigt, das die class-und type Attribute im gerenderten HTML-Code 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\editor templates\date.cshtml " zurück, und entfernen Sie die "mithilfe der Datums Vorlage" Markup. Die fertige Vorlage sieht nun wie folgt aus:

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

Hinzufügen eines jQuery UI DatePicker-Popup Kalenders mithilfe von nuget

In diesem Abschnitt fügen Sie den jQuery UI DatePicker -Popup Kalender zur Date-Edit-Vorlage 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-Popup Kalender macht es einfach und natürlich, Datumsangaben mithilfe eines Kalenders einzugeben, anstatt eine Zeichenfolge einzugeben. Der Popup Kalender schränkt Benutzer auch auf rechtliche Daten ein – bei einem normalen Text Eintrag für ein Datum können Sie z. b. 2/33/1999 (am 33. Februar, 1999) eingeben, aber der jQuery UI DatePicker -Popup Kalender lässt dies nicht zu.

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

Klicken Sie in Visual Web Developer im Menü Extras auf nuget-Paket-Manager , und wählen Sie dann nuget-Pakete verwaltenaus.

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

Wenn Sie Visual Studio anstelle von Visual Web Developer verwenden, wählen Sie im Menü Extras den Befehl nuget-Paket-Manager und dann Bibliothekspaket Verweis hinzufügenaus.

Klicken Sie im Dialogfeld mvcmovie-nuget-Pakete verwalten auf die Registerkarte Online , und geben Sie dann "jQuery. UI" in das Suchfeld ein. Wählen Sie j Query UI Widgets: DatePickeraus, und wählen Sie dann die Schaltfläche Installieren aus.

Nuget fügt diese Debugversionen und die minimalen Versionen von jQuery UI Core und der jQuery UI Date Picker dem Projekt 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 für das Debuggen hilfreich, aber an einer Produktions Website würden Sie nur die minierten Versionen einschließen.

Um die jQuery-Datumsauswahl tatsächlich verwenden zu können, müssen Sie ein jQuery-Skript erstellen, mit dem das Calendar-widget mit der Bearbeitungs Vorlage eingebunden wird. Klicken Sie in Projektmappen-Explorermit der rechten Maustaste auf den Ordner Scripts , und wählen Sie Hinzufügen, Neues Elementund dann JScript-Dateiaus. Nennen Sie die Datei datepickerready. js.

Fügen Sie der Datei " datepickerready. js " den folgenden Code hinzu:

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

Wenn Sie mit jQuery nicht vertraut sind, finden Sie hier eine kurze Erläuterung dazu: die erste Zeile ist die "jQuery Ready"-Funktion, die aufgerufen wird, wenn alle DOM-Elemente in einer Seite geladen wurden. Die zweite Zeile wählt alle DOM-Elemente aus, die den Klassennamen datefieldhaben, und ruft dann die datepicker-Funktion für jedes dieser Elemente auf. (Denken Sie daran, dass Sie die datefield-Klasse der Vorlage " views\shared\editortemplates\date.cshtml " zuvor in diesem Tutorial 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 am Ende des head-Elements in der 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 Abschnitt Complete head wird hier angezeigt:

            <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-Inhalts Hilfsmethode konvertiert den Ressourcen Pfad in einen absoluten Pfad. Sie müssen @URL.Content verwenden, um auf diese Ressourcen korrekt zu verweisen, wenn die Anwendung auf IIS ausgeführt wird.

Drücken Sie STRG+F5, um die Anwendung auszuführen. Wählen Sie einen Bearbeitungs Link aus, und platzieren Sie die Einfügemarke im ReleaseDate -Feld. Der jQuery UI-Popup Kalender wird angezeigt.

Wie die meisten jQuery-Steuerelemente ermöglicht Ihnen das DatePicker-Steuerelement eine umfassende Anpassung. Weitere Informationen finden Sie unter visuelle Anpassung: Entwerfen eines jQuery UI-Designs auf der jQuery UI -Website.

Unterstützen des HTML5-Datums Eingabe-Steuer Elements

Da mehr Browser HTML5 unterstützen, sollten Sie die native HTML5-Eingabe verwenden, wie z. b. das date input-Element, und den jQuery-Benutzeroberflächen Kalender nicht verwenden. Sie können der Anwendung Logik hinzufügen, um automatisch HTML5-Steuerelemente zu verwenden, wenn Sie vom Browser unterstützt werden. Ersetzen Sie dazu den Inhalt der Datei " datepickerready. js " durch Folgendes:

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

In der ersten Zeile dieses Skripts wird modernizr verwendet, um zu überprüfen, ob HTML5-Datums Eingaben unterstützt werden Wenn dies nicht unterstützt wird, wird stattdessen die Datumsauswahl der jQuery-Benutzeroberfläche eingebunden. (Modernizr ist eine Open-Source-JavaScript-Bibliothek, die die Verfügbarkeit von systemeigenen 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, wie z. b. Opera 11. Führen Sie die Anwendung mithilfe eines HTML5-kompatiblen Browsers aus, und bearbeiten Sie einen filmeintrag. Das HTML5-Datums Steuerelement wird anstelle des jQuery UI-Popup Kalenders verwendet:

Da in neuen Versionen von Browsern HTML5 inkrementell implementiert wird, ist es jetzt sinnvoll, Ihrer Website Code hinzuzufügen, der eine Vielzahl von HTML5-Unterstützung bietet. Beispielsweise wird unten ein robusteres datepickerready. js -Skript angezeigt, mit dem Ihre Site Browser unterstützen kann, die nur teilweise das HTML5-Datums Steuerelement unterstützen.

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

Dieses Skript wählt HTML5-input Elemente vom Typ date aus, die das HTML5-Datums Steuerelement nicht vollständig unterstützen. Für diese Elemente verknüpft Sie den jQuery UI-Popup Kalender und ändert dann das type-Attribut von date in text. Durch Ändern des type-Attributs von date in textwird die Unterstützung von teilweiser HTML5-Datumsangaben entfernt. Ein noch robusteres datepickerready. js -Skript finden Sie unter jsfiddle.

Hinzufügen von Datumsangaben, die NULL-Werte zulassen

Wenn Sie eine der vorhandenen Datums Vorlagen verwenden und ein NULL-Datum übergeben, erhalten Sie einen Laufzeitfehler. Damit die Datums Vorlagen stabiler werden, ändern Sie Sie, um NULL-Werte zu behandeln. Zum unterstützen von Datumsangaben, die NULL-Werte zulassen, ändern Sie den Code in views\shared\displaytemplates\datetime.cshtml in den folgenden Code:

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

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

Ändern Sie den Code in der Datei views\shared\editor templates\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 und das Modell nicht NULL ist, wird der DateTime Wert des Modells verwendet. Wenn das Modell NULL ist, wird stattdessen das aktuelle Datum verwendet.

Wrapup

In diesem Lernprogramm wurden die Grundlagen von ASP.net-Vorlagen behandelt, und es wird gezeigt, wie Sie den jQuery UI DatePicker-Popup Kalender in einer ASP.NET MVC-Anwendung verwenden. Weitere Informationen finden Sie in den folgenden Ressourcen:

  • Informationen zur Lokalisierung finden Sie unter rajeesh es Blog jqueryui DatePicker in ASP.NET MVC.
  • Weitere Informationen zur jQuery-Benutzeroberfläche finden Sie unter jQuery UI.
  • Informationen dazu, wie das DatePicker-Steuerelement lokalisiert wird, finden Sie unter UI/DatePicker/Lokalisierung.
  • Weitere Informationen zu den ASP.NET-MVC-Vorlagen finden Sie in der Blog Reihe von Brad Wilson unter ASP.NET MVC 2-Vorlagen. Obwohl die Reihe für ASP.NET MVC 2 geschrieben wurde, gilt das Material weiterhin für die aktuelle Version von ASP.NET MVC.