Verwenden des HTML5- und jQuery-UI-Popupkalenders für Datepicker mit ASP.NET MVC – Teil 1

von Rick Anderson

In diesem Tutorial lernen Sie die Grundlagen der Arbeit mit Editorvorlagen, Anzeigevorlagen und dem jQuery UI-Popupkalender in einer ASP.NET MVC-Webanwendung kennen.

In diesem Tutorial lernen Sie die Grundlagen der Arbeit mit Editorvorlagen, Anzeigevorlagen und dem jQuery UI-Popupkalender in einer ASP.NET MVC-Webanwendung kennen. Für dieses Tutorial können Sie Microsoft Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer") verwenden, eine kostenlose Version von Microsoft Visual Studio, oder Sie können Visual Studio 2010 SP1 verwenden, wenn Sie diese bereits besitzen.

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: Webplattform-Installer. Alternativ können Sie die erforderliche Software auch über die 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 support)

Wenn Sie Visual Studio 2010 anstelle von Visual Web Developer verwenden, installieren Sie die erforderlichen Komponenten, indem Sie auf den folgenden Link klicken: Voraussetzungen für Visual Studio 2010.

In diesem Tutorial wird davon ausgegangen, dass Sie das Tutorial Erste Schritte mit MVC 3 abgeschlossen haben oder dass Sie mit ASP.NET MVC-Entwicklung vertraut sind. Dieses Tutorial beginnt mit dem abgeschlossenen Projekt aus dem Tutorial Erste Schritte mit MVC 3.

Sie lernen Folgendes

Sie fügen Vorlagen (insbesondere Bearbeitungs- und Anzeigevorlagen) zur einfachen Anwendung für die Filmauflistung hinzu, die im Tutorial Erste Schritte mit MVC 3 erstellt wurde. Sie fügen auch einen jQuery UI-Datepicker-Popupkalender hinzu, um die Eingabe von Datumsangaben zu vereinfachen. Der folgende Screenshot zeigt die geänderte Anwendung mit angezeigtem jQuery UI-Popupkalender.

Erlernte Fertigkeiten

Folgendes können Sie lernen:

• Hier erfahren Sie, wie Sie Attribute aus dem DataAnnotations-Namespace verwenden, um das Format von Daten zu steuern, wenn sie angezeigt werden und sich im Bearbeitungsmodus befinden.
• Erstellen von Vorlagen (Bearbeiten und Anzeigen von Vorlagen) zum Steuern der Formatierung von Daten
• Hier erfahren Sie, wie Sie die jQuery UI-Datumsauswahl als Möglichkeit zum Eingeben von Datumsfeldern hinzufügen.

Erste Schritte

Wenn Sie noch nicht über die Anwendung für die Filmauflistung aus dem Startprojekt verfügen, laden Sie sie herunter:

• Herunterladen.
• Klicken Sie in Windows Explorer mit der rechten Maustaste auf die dateiMvcMovie.zip, und wählen Sie Eigenschaften aus.
• Wählen Sie im Dialogfeld MvcMovie.zip Eigenschaften die Option Blockierung aufheben aus. (Durch diese Option wird eine Sicherheitswarnung verhindert, die angezeigt wird, wenn Sie versuchen, eine .zip -Datei zu verwenden, die Sie aus dem Internet heruntergeladen haben.)

Klicken Sie mit der rechten Maustaste auf die MvcMovie.zip Datei, und wählen Sie Alle extrahieren aus, um die Datei zu entzippen. Öffnen Sie in Visual Web Developer oder Visual Studio 2010 die Datei MvcMovieCS_TU.sln .

Doppelklicken Sie in Projektmappen-Explorer auf Views\Shared\_Layout.cshtml, um sie zu öffnen. Ändern Sie den H1 Header von MVC Movie App in Movie jQuery. Drücken Sie STRG+F5, um die Anwendung auszuführen, und klicken Sie auf die Registerkarte Start , die Sie zur Index -Methode des Filmcontrollers führt. Um die Anwendung auszuprobieren, wählen Sie den Link Bearbeiten und den Link Details für eines der Filme aus. Beachten Sie, dass in den Ansichten Index, Bearbeiten und Details das Veröffentlichungsdatum und der Preis gut formatiert sind:

Die Formatierung für das Datum und den Preis ist das Ergebnis der Verwendung des DisplayFormat-Attributs für Eigenschaften der Movie -Klasse.

Öffnen Sie die Datei Movie.cs , und kommentieren Sie das DisplayFormat Attribut für die ReleaseDate Eigenschaften und Price aus. Die resultierende Movie Klasse sieht wie folgt aus:

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

    //  [DisplayFormat(DataFormatString = "{0:d}")]
    public DateTime ReleaseDate { get; set; }

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    //[DisplayFormat(DataFormatString = "{0:c}")]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

Drücken Sie erneut STRG+F5, um die Anwendung auszuführen, und wählen Sie die Registerkarte Start aus, um die Filmliste anzuzeigen. Dieses Mal zeigt das Veröffentlichungsdatum das Datum und die Uhrzeit an, und das Preisfeld zeigt das Währungssymbol nicht mehr an. Ihre Änderung in der Movie Klasse hat die schöne Formatierung rückgängig, die Sie zuvor gesehen haben, aber Sie werden dies in einem Moment beheben.

Verwenden des DataAnnotations DataType-Attributs zum Angeben des Datentyps

Ersetzen Sie das auskommentierte DisplayFormat Attribut für die ReleaseDate Eigenschaft mithilfe der -Enumeration durch das DateDataType-Attribut. Ersetzen Sie das DisplayFormat Attribut für die Price -Eigenschaft erneut durch das DataType-Attribut , diesmal mithilfe der Currency -Enumeration. Der fertige Code sieht wie folgt aus:

public class Movie {
    public int ID { get; set; }

    [Required(ErrorMessage = "Title is required")]
    public string Title { get; set; }

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

    [Required(ErrorMessage = "Genre must be specified")]
    public string Genre { get; set; }

    [Range(1, 100, ErrorMessage = "Price must be between $1 and $100")]
    [DataType(DataType.Currency)]
    public decimal Price { get; set; }

    [StringLength(5)]
    public string Rating { get; set; }
}

Führen Sie die Anwendung aus. Jetzt sind das Veröffentlichungsdatum und die Preiseigenschaften richtig formatiert (d. a. mit entsprechenden Datums- und Währungsformaten). Das DataType-Attribut stellt Typmetadaten für die integrierten ASP.NET MVC-Vorlagen bereit, damit die Felder im richtigen Format gerendert werden. Die Verwendung des DataType Attributs ist der Verwendung des DisplayFormat Attributs vorzuziehen, das ursprünglich im Code enthalten war, da das DataType -Attribut das Modell sauberer und flexibler für Zwecke wie die Internationalisierung macht.

Im nächsten Abschnitt erfahren Sie, wie Sie benutzerdefinierte Vorlagen erstellen, um Datumsfelder anzuzeigen.

Nächste