Menggunakan Html5 dan jQuery UI Datepicker Popup Calendar dengan ASP.NET MVC - Bagian 1

oleh Rick Anderson

Tutorial ini akan mengajari Anda dasar-dasar cara bekerja dengan templat editor, templat tampilan, dan kalender popup datepicker UI jQuery dalam aplikasi Web MVC ASP.NET.

Tutorial ini akan mengajari Anda dasar-dasar cara bekerja dengan templat editor, templat tampilan, dan kalender popup datepicker UI jQuery di aplikasi Web MVC ASP.NET. Untuk tutorial ini, Anda dapat menggunakan Microsoft Visual Web Developer 2010 Express Service Pack 1 ("Visual Web Developer"), yang merupakan versi gratis Microsoft Visual Studio, atau Anda dapat menggunakan Visual Studio 2010 SP1 jika Anda sudah memilikinya.

Sebelum memulai, pastikan Anda telah menginstal prasyarat yang tercantum di bawah ini. Anda dapat menginstal semuanya dengan mengklik tautan berikut: Penginstal Platform Web. Atau, Anda dapat menginstal perangkat lunak yang diperlukan secara individual menggunakan tautan berikut:

• Prasyarat Visual Studio Web Developer Express SP1
• ASP.NET Pembaruan Alat MVC 3
• SQL Server Compact 4.0(runtime + dukungan alat)

Jika Anda menggunakan Visual Studio 2010 alih-alih Visual Web Developer, instal prasyarat dengan mengklik tautan berikut: Prasyarat Visual Studio 2010.

Tutorial ini mengasumsikan Anda telah menyelesaikan tutorial Memulai dengan MVC 3 atau Anda terbiasa dengan pengembangan MVC ASP.NET. Tutorial ini dimulai dengan proyek yang telah selesai dari tutorial Memulai MVC 3 .

Apa yang akan Anda Bangun

Anda akan menambahkan templat (khususnya, mengedit, dan menampilkan templat) ke aplikasi daftar film sederhana yang dibuat dalam tutorial Memulai dengan MVC 3 . Anda juga akan menambahkan kalender popup datepicker UI jQuery untuk menyederhanakan proses memasukkan tanggal. Cuplikan layar berikut menunjukkan aplikasi yang dimodifikasi dengan kalender popup datepicker UI jQuery ditampilkan.

Keterampilan yang akan Anda Pelajari

Berikut adalah apa yang akan Anda pelajari:

• Cara menggunakan atribut dari namespace DataAnnotations untuk mengontrol format data saat ditampilkan dan saat dalam mode edit.
• Cara membuat templat (mengedit dan menampilkan templat) untuk mengontrol pemformatan data.
• Cara menambahkan datepicker UI jQuery sebagai cara untuk memasukkan bidang tanggal.

Memulai

Jika Anda belum memiliki aplikasi daftar film dari proyek pemula, unduh:

• Unduh.
• Di Windows Explorer, klik kanan file MvcMovie.zip dan pilih Properti.
• Dalam kotak dialog Properti MvcMovie.zip, pilih Buka blokir. (Membuka blokir mencegah peringatan keamanan yang terjadi ketika Anda mencoba menggunakan file .zip yang telah Anda unduh dari web.)

Klik kanan file MvcMovie.zip dan pilih Ekstrak Semua untuk membuka zip file. Di Visual Web Developer atau Visual Studio 2010, buka file MvcMovieCS_TU.sln .

Di Penjelajah Solusi, klik dua kali Views\Shared\_Layout.cshtml untuk membukanya. H1 Ubah header dari Aplikasi Film MVC ke Movie jQuery. Tekan CTRL+F5 untuk menjalankan aplikasi dan klik tab Beranda , yang membawa Anda ke Index metode pengontrol film. Untuk mencoba aplikasi, pilih tautan Edit dan tautan Detail untuk salah satu film. Perhatikan bahwa dalam tampilan Indeks, Edit, dan Detail, tanggal rilis dan harga diformat dengan baik:

Pemformatan untuk tanggal dan harga adalah hasil dari menggunakan atribut DisplayFormat pada properti Movie kelas.

Buka file Movie.cs dan komentari DisplayFormat atribut pada ReleaseDate properti dan Price . Kelas yang Movie dihasilkan terlihat seperti ini:

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

Tekan CTRL+F5 lagi untuk menjalankan aplikasi dan pilih tab Beranda untuk melihat daftar film. Kali ini tanggal rilis menunjukkan tanggal dan waktu, dan bidang harga tidak lagi menunjukkan simbol mata uang. Perubahan Anda di Movie kelas telah melenyapkan pemformatan bagus yang Anda lihat sebelumnya, tetapi Anda akan memperbaikinya dalam sesaat.

Menggunakan Atribut DataType DataAnnotations untuk Menentukan Tipe Data

Ganti atribut yang dikomentari DisplayFormat untuk ReleaseDate properti dengan atribut DataType , menggunakan Date enumerasi. DisplayFormat Ganti atribut untuk Price properti dengan atribut DataType lagi, kali ini menggunakan Currency enumerasi. Seperti inilah tampilan kode yang telah selesai:

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

Jalankan aplikasi lagi. Sekarang tanggal rilis dan properti harga diformat dengan benar (yaitu, menggunakan format tanggal dan mata uang yang sesuai). Atribut DataType menyediakan metadata jenis untuk templat MVC ASP.NET bawaan sehingga bidang dirender dalam format yang benar. DataType Menggunakan atribut lebih disukai untuk menggunakan DisplayFormat atribut yang awalnya dalam kode, karena DataType atribut membuat model lebih bersih dan lebih fleksibel untuk tujuan seperti internasionalisasi.

Di bagian berikutnya Anda akan melihat cara membuat templat kustom untuk menampilkan bidang tanggal.

Berikutnya