Freigeben über

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

  • Artikel

von Rick Anderson

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

In diesem Lernprogramm erfahren Sie, wie Sie mit Editorvorlagen, Anzeigevorlagen und dem jQuery UI-Popupkalender in einer ASP.NET MVC-Webanwendung arbeiten. In diesem Lernprogramm können Sie Microsoft Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer"), eine kostenlose Version von Microsoft Visual Studio, verwenden oder Visual Studio 2010 SP1 verwenden, wenn Sie dies bereits haben.

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: Web Platform Installer. Alternativ können Sie die erforderliche Software mit den folgenden Links einzeln installieren:

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 Lernprogramm wird davon ausgegangen, dass Sie das Lernprogramm "Erste Schritte mit MVC 3 " abgeschlossen haben oder mit ASP.NET MVC-Entwicklung vertraut sind. Dieses Lernprogramm beginnt mit dem abgeschlossenen Projekt aus dem Lernprogramm "Erste Schritte mit MVC 3 ".

Sie lernen Folgendes

Sie fügen der einfachen Filmauflistungsanwendung, die im Lernprogramm "Erste Schritte mit MVC 3 " erstellt wurde, Vorlagen (insbesondere Bearbeitungs- und Anzeigevorlagen) hinzu. Darüber hinaus fügen Sie einen jQuery UI-Popupkalender hinzu, um das Eingeben von Datumsangaben zu vereinfachen. Der folgende Screenshot zeigt die geänderte Anwendung mit dem angezeigten jQuery UI-Popupkalender.

Screenshot des Fensters

Erlernte Fertigkeiten

Folgendes können Sie lernen:

  • Verwenden von Attributen aus dem DataAnnotations-Namespace zum Steuern des Datenformats, wenn sie angezeigt wird und sich im Bearbeitungsmodus befindet.
  • Erstellen von Vorlagen (Bearbeiten und Anzeigen von Vorlagen), um die Formatierung von Daten zu steuern.
  • So fügen Sie den jQuery UI-Datepicker als Möglichkeit zum Eingeben von Datumsfeldern hinzu.

Erste Schritte

Wenn Sie noch nicht über die Filmauflistungsanwendung aus dem Startprojekt verfügen, laden Sie sie herunter:

  • Herunterladen.
  • Klicken Sie im Windows-Explorer mit der rechten Maustaste auf die MvcMovie.zip Datei, 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.)

Screenshot des Felds

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 MvcMovieCS_TU.sln Datei.

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

Screenshot des Fensters

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 Movie.cs Datei, und kommentieren Sie das DisplayFormat Attribut für die ReleaseDate und Price die Eigenschaften 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 nicht mehr das Währungssymbol an. Ihre Änderung in der Movie Klasse hat die schöne Formatierung rückgängig gemacht, die Sie zuvor gesehen haben, aber Sie werden dies in einem Moment beheben.

Screenshot des Fensters

Verwenden des DataAnnotations DataType-Attributs zum Angeben des Datentyps

Ersetzen Sie das auskommentierte Attribut für die ReleaseDate Eigenschaft durch das DataType-Attribut DisplayFormat mithilfe der Date Enumeration. Ersetzen Sie das DisplayFormat Attribut für die Price Eigenschaft erneut durch das DataType-Attribut , diesmal mit der Currency Enumeration. So sieht der fertige Code 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 werden 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, sodass die Felder im richtigen Format gerendert werden. Die Verwendung des DataType Attributs empfiehlt es sich, das DisplayFormat ursprünglich im Code enthaltene Attribut zu verwenden, da das DataType Attribut das Modell übersichtlicher und flexibler für Zwecke wie internationalisierung macht.

Im nächsten Abschnitt erfahren Sie, wie Sie benutzerdefinierte Vorlagen zum Anzeigen von Datumsfeldern erstellen.

Nächste