Bagikan melalui

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

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.

Menambahkan Templat DateTime Otomatis

Di bagian pertama tutorial ini, Anda melihat bagaimana Anda dapat menambahkan atribut ke model untuk secara eksplisit menentukan pemformatan, dan bagaimana Anda dapat secara eksplisit menentukan templat yang digunakan untuk merender model. Misalnya, atribut DisplayFormat dalam kode berikut secara eksplisit menentukan pemformatan untuk ReleaseDate properti .

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

Dalam contoh berikut, atribut DataType , menggunakan Date enumerasi, menentukan bahwa templat tanggal harus digunakan untuk merender model. Jika tidak ada templat tanggal dalam proyek Anda, templat tanggal bawaan akan digunakan.

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

Namun, ASP. MVC dapat melakukan pencocokan jenis menggunakan konfigurasi konvensi berlebihan, dengan mencari templat yang cocok dengan nama jenis. Ini memungkinkan Anda membuat templat yang secara otomatis memformat data tanpa menggunakan atribut atau kode sama sekali. Untuk bagian tutorial ini, Anda akan membuat templat yang secara otomatis diterapkan ke properti model jenis DateTime. Anda tidak perlu menggunakan atribut atau konfigurasi lain untuk menentukan bahwa templat harus digunakan untuk merender semua properti model jenis DateTime.

Anda juga akan mempelajari cara untuk menyesuaikan tampilan properti individual atau bahkan bidang individual.

Untuk memulai, mari kita hapus informasi pemformatan yang ada dan tampilkan tanggal lengkap dalam aplikasi.

Buka file Movie.cs dan komentari DataType atribut pada ReleaseDate properti :

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

Klik CTRL + F5 untuk menjalankan aplikasi.

Perhatikan bahwa ReleaseDate properti sekarang menampilkan tanggal dan waktu, karena itu adalah default ketika tidak ada informasi pemformatan yang disediakan.

Cuplikan layar jendela Movie jQuery memperlihatkan tampilan Detail dengan properti Tanggal Rilis disorot dengan persegi panjang merah.

Menambahkan Gaya CSS untuk Menguji Templat Baru

Sebelum membuat templat untuk pemformatan tanggal, Anda akan menambahkan beberapa aturan gaya CSS yang bisa Anda terapkan ke templat baru. Ini akan membantu Anda memverifikasi bahwa halaman yang dirender menggunakan templat baru.

Buka file Content\Site.css dan tambahkan aturan CSS berikut ke bagian bawah file:

/* Styles to test new editor and display templates.
----------------------------------------------------------*/
.loud-1 {
    font-weight: bold;
    color: Red;
}
.loud-2 {
    font-size:  2.0em;
    color:Green;
}
.loud-3 {
    font-style: italic;
    color: yellow;
    background-color: blue;
}

Menambahkan Templat Tampilan DateTime

Sekarang Anda dapat membuat templat baru. Di folder Views\Movies , buat folder DisplayTemplates .

Di folder Views\Shared , buat folder DisplayTemplates dan folder EditorTemplates .

Templat tampilan di folder Views\Shared\DisplayTemplates akan digunakan oleh semua pengontrol. Templat tampilan di folder Views\Movie\DisplayTemplates hanya akan digunakan oleh Movie pengontrol. (Jika templat dengan nama yang sama muncul di kedua folder, templat di folder Views\Movie\DisplayTemplates — yaitu, templat yang lebih spesifik — lebih diutamakan untuk tampilan yang dikembalikan oleh Movie pengontrol.)

Di Penjelajah Solusi, perluas folder Tampilan , perluas folder Bersama , lalu klik kanan folder Views\Shared\DisplayTemplates .

Klik Tambahkan lalu klik Tampilan. Kotak dialog Tambahkan Tampilan ditampilkan.

Dalam kotak Nama tampilan, ketik DateTime. (Anda harus menggunakan nama ini agar sesuai dengan nama tipe.)

Pilih kotak centang Buat sebagai tampilan parsial . Pastikan bahwa kotak centang Gunakan tata letak atau master dan Buat tampilan yang ditik dengan kuat tidak dipilih.

Cuplikan layar jendela Tambahkan Tampilan yang memperlihatkan kotak teks Nama tampilan diisi dengan teks Tanggal Waktu.

Klik Tambahkan. Templat DateTime.cshtml dibuat di Views\Shared\DisplayTemplates.

Gambar berikut menunjukkan folder Tampilan di Penjelajah Solusi setelah DateTime templat tampilan dan editor dibuat.

Cuplikan layar jendela Penjelajah Solusi memperlihatkan hierarki folder dengan file folder Templat Bersama dan Editor disorot dengan warna merah.

Buka file Views\Shared\DisplayTemplates\DateTime.cshtml dan tambahkan markup berikut, yang menggunakan metode String.Format untuk memformat properti sebagai tanggal tanpa waktu. {0:d}(Format menentukan format tanggal pendek.)

@String.Format("{0:d}", Model.Date)

Ulangi langkah ini untuk membuat DateTime templat di folder Views\Movie\DisplayTemplates . Gunakan kode berikut dalam file Views\Movie\DisplayTemplates\DateTime.cshtml .

<span class="loud-1">   
@String.Format("{0:d}", Model.Date)
</span>

Kelas loud-1 CSS menyebabkan tanggal ditampilkan dalam teks merah tebal. Anda menambahkan loud-1 kelas CSS hanya sebagai ukuran sementara sehingga Anda dapat dengan mudah melihat kapan templat khusus ini digunakan.

Apa yang telah Anda lakukan adalah membuat dan menyesuaikan templat yang akan digunakan ASP.NET untuk menampilkan tanggal. Templat yang lebih umum (di folder Views\Shared\DisplayTemplates ) menampilkan tanggal singkat sederhana. Templat yang khusus untuk Movie pengontrol (di folder Views\Movies\DisplayTemplates ) menampilkan tanggal pendek yang juga diformat sebagai teks merah tebal.

Klik CTRL + F5 untuk menjalankan aplikasi. Browser merender tampilan Indeks untuk aplikasi.

Properti ReleaseDate sekarang menampilkan tanggal dalam font merah tebal tanpa waktu. Ini membantu Anda mengonfirmasi bahwa pembantu DateTime templat di folder Views\Movies\DisplayTemplates dipilih melalui pembantu DateTime templat di folder bersama (Views\Shared\DisplayTemplates).

Cuplikan layar jendela Movie jQuery memperlihatkan tampilan Indeks dengan daftar film yang dimasukkan ke dalam database.

Sekarang ganti nama file Views\Movies\DisplayTemplates\DateTime.cshtml menjadi Views\Movies\DisplayTemplates\LoudDateTime.cshtml.

Klik CTRL + F5 untuk menjalankan aplikasi.

Kali ReleaseDate ini properti menampilkan tanggal tanpa waktu dan tanpa font merah tebal. Ini menggambarkan bahwa templat yang memiliki nama jenis data (dalam hal DateTimeini ) secara otomatis digunakan untuk menampilkan semua properti model jenis tersebut. Setelah Anda mengganti nama file DateTime.cshtml menjadi LoudDateTime.cshtml, ASP.NET tidak lagi menemukan templat di folder Views\Movies\DisplayTemplates , sehingga menggunakan templat DateTime.cshtml dari folder *Views\Movies\Shared*.

(Pencocokan templat tidak peka huruf besar/kecil, sehingga Anda bisa membuat nama file templat dengan casing apa pun. Misalnya, DATETIME.cshtml, datetime.cshtml, dan DaTeTiMe.cshtml semuanya akan cocok dengan jenisnya DateTime .)

Untuk meninjau: pada titik ini, ReleaseDate bidang sedang ditampilkan menggunakan templat Views\Movies\DisplayTemplates\DateTime.cshtml , yang menampilkan data menggunakan format tanggal pendek, tetapi jika tidak, tidak menambahkan format khusus.

Menggunakan UIHint untuk Menentukan Templat Tampilan

Jika aplikasi web Anda memiliki banyak DateTime bidang dan secara default Anda ingin menampilkan semua atau sebagian besar dalam format tanggal-saja, templat DateTime.cshtml adalah pendekatan yang baik. Tetapi bagaimana jika Anda memiliki beberapa tanggal di mana Anda ingin menampilkan tanggal dan waktu lengkap? Tidak ada masalah. Anda dapat membuat templat tambahan dan menggunakan atribut UIHint untuk menentukan pemformatan untuk tanggal dan waktu penuh. Anda kemudian dapat menerapkan templat tersebut secara selektif. Anda dapat menggunakan atribut UIHint di tingkat model atau Anda dapat menentukan templat di dalam tampilan. Di bagian ini, Anda akan melihat cara menggunakan UIHint atribut untuk secara selektif mengubah pemformatan untuk beberapa contoh bidang tanggal-waktu.

Buka file Views\Movies\DisplayTemplates\LoudDateTime.cshtml dan ganti kode yang ada dengan yang berikut ini:

<span class="loud-2">   
@Model.ToString()
</span>

Ini menyebabkan tanggal dan waktu penuh ditampilkan dan menambahkan kelas CSS yang membuat teks berwarna hijau dan besar.

Buka file Movie.cs dan tambahkan atribut UIHint ke ReleaseDate properti , seperti yang ditunjukkan dalam contoh berikut:

[UIHint("LoudDateTime")]
public DateTime ReleaseDate { get; set; }

Ini memberi tahu ASP.NET MVC bahwa ketika menampilkan ReleaseDate properti (khususnya, dan bukan sembarang objek), DateTime ia harus menggunakan templat LoudDateTime.cshtml .

Klik CTRL + F5 untuk menjalankan aplikasi.

Perhatikan bahwa ReleaseDate properti sekarang menampilkan tanggal dan waktu dalam font hijau besar.

Kembali ke UIHint atribut dalam file Movie.cs dan komentari sehingga templat LoudDateTime.cshtml tidak akan digunakan. Jalankan aplikasi lagi. Tanggal rilis tidak ditampilkan besar dan hijau. Ini memverifikasi bahwa templat Views\Shared\DisplayTemplates\DateTime.cshtml digunakan dalam tampilan Indeks dan Detail.

Seperti disebutkan sebelumnya, Anda juga dapat menerapkan templat dalam tampilan, yang memungkinkan Anda menerapkan templat ke instans individual dari beberapa data. Buka tampilan Views\Movies\Details.cshtml . Tambahkan "LoudDateTime" sebagai parameter kedua dari panggilan Html.DisplayFor untuk ReleaseDate bidang . Kode yang telah selesai terlihat seperti ini:

<div class="display-label">ReleaseDate</div>
<div class="display-field">
    @Html.DisplayFor(model => model.ReleaseDate,"LoudDateTime")
</div>

Ini menentukan bahwa LoudDateTime templat harus digunakan untuk menampilkan properti model, terlepas dari atribut apa yang diterapkan ke model.

Klik CTRL + F5 untuk menjalankan aplikasi.

Verifikasi bahwa halaman indeks film menggunakan templat Views\Shared\DisplayTemplates\DateTime.cshtml (tebal merah) dan halaman Movie\Details menggunakan templat Views\Movies\DisplayTemplates\LoudDateTime.cshtml (besar dan hijau).

Cuplikan layar jendela Movie jQuery memperlihatkan tampilan Detail dengan teks bidang Tanggal Rilis diubah menjadi ukuran yang lebih besar dan warna hijau.

Di bagian berikutnya, Anda akan membuat templat untuk jenis kompleks.

SebelumnyaBerikutnya

  • Last updated on