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

oleh Rick Anderson

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

Menambahkan Templat untuk Mengedit Tanggal

Di bagian ini Anda akan membuat templat untuk mengedit tanggal yang akan diterapkan saat ASP.NET MVC menampilkan UI untuk mengedit properti model yang ditandai dengan enumerasi Tanggal atribut DataType . Templat hanya akan merender tanggal; waktu tidak akan ditampilkan. Dalam templat, Anda akan menggunakan kalender popup Datepicker jQuery UI untuk menyediakan cara mengedit tanggal.

Untuk memulai, buka file Movie.cs dan tambahkan atribut DataType dengan enumerasi Tanggal ke ReleaseDate properti , seperti yang ditunjukkan dalam kode berikut:

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

Kode ini menyebabkan ReleaseDate bidang ditampilkan tanpa waktu di templat tampilan dan mengedit templat. Jika aplikasi Anda berisi templat date.cshtml di folder Views\Shared\EditorTemplates atau di folder Views\Movies\EditorTemplates , templat tersebut akan digunakan untuk merender properti apa pun DateTime saat mengedit. Jika tidak, sistem templat ASP.NET bawaan akan menampilkan properti sebagai tanggal.

Klik CTRL + F5 untuk menjalankan aplikasi. Pilih tautan edit untuk memverifikasi bahwa bidang input untuk tanggal rilis hanya menampilkan tanggal.

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

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

Dalam kotak Nama tampilan , ketik "Tanggal".

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

Klik Tambahkan. Templat Views\Shared\EditorTemplates\Date.cshtml dibuat.

Tambahkan kode berikut ke templat Views\Shared\EditorTemplates\Date.cshtml .

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

Baris pertama mendeklarasikan model sebagai DateTime jenis. Meskipun Anda tidak perlu mendeklarasikan jenis model dalam templat edit dan tampilan, ini adalah praktik terbaik sehingga Anda mendapatkan pemeriksaan waktu kompilasi model yang diteruskan ke tampilan. (Manfaat lain adalah Anda kemudian mendapatkan IntelliSense untuk model dalam tampilan di Visual Studio.) Jika jenis model tidak dideklarasikan, ASP.NET MVC menganggapnya sebagai jenis dinamis dan tidak ada pemeriksaan jenis waktu kompilasi. Jika Anda mendeklarasikan model menjadi DateTime jenis, model tersebut menjadi sangat ditik.

Baris kedua hanyalah markup HTML literal yang menampilkan "Menggunakan Templat Tanggal" sebelum bidang tanggal. Anda akan menggunakan baris ini untuk sementara waktu untuk memverifikasi bahwa templat tanggal ini sedang digunakan.

Baris berikutnya adalah pembantu Html.TextBox yang merender input bidang yang merupakan kotak teks. Parameter ketiga untuk pembantu menggunakan jenis anonim untuk mengatur kelas untuk kotak teks ke datefield dan jenis ke date. (Karena class dicadangkan dalam C#, Anda perlu menggunakan @ karakter untuk menghindari class atribut di parser C#.)

Jenisnya date adalah jenis input HTML5 yang memungkinkan browser yang sadar HTML5 untuk merender kontrol kalender HTML5. Nantinya Anda akan menambahkan beberapa JavaScript untuk menghubungkan datepicker jQuery ke Html.TextBox elemen menggunakan datefield kelas .

Klik CTRL + F5 untuk menjalankan aplikasi. Anda dapat memverifikasi bahwa ReleaseDate properti dalam tampilan edit menggunakan templat edit karena templat menampilkan "Menggunakan Templat Tanggal" tepat sebelum ReleaseDate kotak input teks, seperti yang ditunjukkan pada gambar ini:

Di browser Anda, lihat sumber halaman. (Misalnya, klik kanan halaman dan pilih Tampilkan sumber.) Contoh berikut menunjukkan beberapa markup untuk halaman, mengilustrasikan class atribut dan type dalam HTML yang dirender.

<input class="datefield" data-val="true" data-val-required="Date is required" 
      id="ReleaseDate" name="ReleaseDate" type="date" value="1/11/1989" />

Kembali ke templat Views\Shared\EditorTemplates\Date.cshtml dan hapus markup "Using Date Template". Sekarang templat yang sudah selesai terlihat seperti ini:

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

Di bagian ini Anda akan menambahkan kalender popup datepicker jQuery UI ke templat date-edit. Pustaka UI jQuery menyediakan dukungan untuk animasi, efek lanjutan, dan widget yang dapat disesuaikan. Ini dibangun di atas pustaka JavaScript jQuery. Kalender popup datepicker memudahkan dan alami untuk memasukkan tanggal menggunakan kalender alih-alih memasukkan string. Kalender popup juga membatasi pengguna ke tanggal hukum — entri teks biasa untuk tanggal akan memungkinkan Anda memasukkan sesuatu seperti 2/33/1999 (33 Februari 1999), tetapi kalender popup datepicker jQuery UI tidak akan mengizinkannya.

Pertama, Anda harus menginstal pustaka UI jQuery. Untuk melakukannya, Anda akan menggunakan NuGet, yang merupakan manajer paket yang disertakan dalam Visual Studio 2010 dan Visual Web Developer versi SP1.

Di Visual Web Developer, dari menu Alat , pilih NuGet Package Manager lalu pilih Kelola Paket NuGet.

Catatan: Jika menu Alat tidak menampilkan perintah NuGet Package Manager , Anda perlu menginstal NuGet dengan mengikuti instruksi di halaman Menginstal NuGet dari situs web NuGet.

Jika Anda menggunakan Visual Studio alih-alih Visual Web Developer, dari menu Alat , pilih Manajer Paket NuGet lalu pilih Tambahkan Referensi Paket Pustaka.

Dalam kotak dialog MVCMovie - Kelola Paket NuGet , klik tab Online di sebelah kiri lalu masukkan "jQuery.UI" di kotak pencarian. Pilih j Widget UI Kueri:Datepicker, lalu pilih tombol Instal .

NuGet menambahkan versi debug ini dan versi minifikasi jQuery UI Core dan pemilih tanggal UI jQuery ke proyek Anda:

jquery.ui.core.js
jquery.ui.core.min.js
jquery.ui.datepicker.js
jquery.ui.datepicker.min.js

Catatan: Versi debug (file tanpa ekstensi .min.js ) berguna untuk penelusuran kesalahan, tetapi di situs produksi, Anda hanya akan menyertakan versi yang dikurangi.

Untuk benar-benar menggunakan pemilih tanggal jQuery, Anda perlu membuat skrip jQuery yang akan menghubungkan widget kalender ke templat edit. Di Penjelajah Solusi, klik kanan folder Skrip dan pilih Tambahkan, lalu Item Baru, lalu File JScript. Beri nama file DatePickerReady.js.

Tambahkan kode berikut ke file DatePickerReady.js :

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

Jika Anda tidak terbiasa dengan jQuery, berikut penjelasan singkat tentang apa yang dilakukan ini: baris pertama adalah fungsi "jQuery siap", yang dipanggil ketika semua elemen DOM di halaman telah dimuat. Baris kedua memilih semua elemen DOM yang memiliki nama datefieldkelas , lalu memanggil datepicker fungsi untuk masing-masing elemen. (Ingat bahwa Anda menambahkan datefield kelas ke templat Views\Shared\EditorTemplates\Date.cshtml sebelumnya dalam tutorial.)

Selanjutnya, buka file Views\Shared\_Layout.cshtml . Anda perlu menambahkan referensi ke file berikut, yang semuanya diperlukan sehingga Anda dapat menggunakan pemilih tanggal:

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

Contoh berikut menunjukkan kode aktual yang harus Anda tambahkan di bagian head bawah elemen dalam file Views\Shared\_Layout.cshtml .

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

Bagian lengkap head diperlihatkan di sini:

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

Metode pembantu konten URL mengonversi jalur sumber daya ke jalur absolut. Anda harus menggunakan @URL.Content untuk mereferensikan sumber daya ini dengan benar ketika aplikasi berjalan di IIS.

Klik CTRL + F5 untuk menjalankan aplikasi. Pilih tautan edit, lalu letakkan titik penyisipan ke bidang ReleaseDate . Kalender popup UI jQuery ditampilkan.

Seperti kebanyakan kontrol jQuery, pemecah tanggal memungkinkan Anda menyesuaikannya secara ekstensif. Untuk informasi, lihat Kustomisasi Visual: Merancang tema UI jQuery di situs UI jQuery .

Mendukung Kontrol Input Tanggal HTML5

Karena lebih banyak browser mendukung HTML5, Anda mungkin ingin menggunakan input HTML5 asli, seperti date elemen input, dan tidak menggunakan kalender UI jQuery. Anda dapat menambahkan logika ke aplikasi Anda untuk secara otomatis menggunakan kontrol HTML5 jika browser mendukungnya. Untuk melakukan ini, ganti konten file DatePickerReady.js dengan yang berikut ini:

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

Baris pertama skrip ini menggunakan Modernizr untuk memverifikasi bahwa input tanggal HTML5 didukung. Jika tidak didukung, pemilih tanggal UI jQuery akan dikaitkan sebagai gantinya. (Modernizr adalah pustaka JavaScript sumber terbuka yang mendeteksi ketersediaan implementasi asli HTML5 dan CSS3. Modernizr disertakan dalam proyek MVC ASP.NET baru yang Anda buat.)

Setelah melakukan perubahan ini, Anda dapat mengujinya dengan menggunakan browser yang mendukung HTML5, seperti Opera 11. Jalankan aplikasi menggunakan browser yang kompatibel dengan HTML5 dan edit entri film. Kontrol tanggal HTML5 digunakan alih-alih kalender popup UI jQuery:

Karena versi baru browser menerapkan HTML5 secara bertahap, pendekatan yang baik untuk saat ini adalah menambahkan kode ke situs web Anda yang mengakomodasi berbagai dukungan HTML5. Misalnya, skrip DatePickerReady.js yang lebih kuat ditunjukkan di bawah ini yang memungkinkan situs Anda mendukung browser yang hanya sebagian mendukung kontrol tanggal HTML5.

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

Skrip ini memilih elemen HTML5 input jenis date yang tidak sepenuhnya mendukung kontrol tanggal HTML5. Untuk elemen-elemen tersebut, ia menghubungkan kalender popup UI jQuery dan kemudian mengubah type atribut dari date ke text. Dengan mengubah type atribut dari date ke text, dukungan tanggal HTML5 parsial dihilangkan. Skrip DatePickerReady.js yang lebih kuat dapat ditemukan di JSFIDDLE.

Menambahkan Tanggal Nullable ke Templat

Jika Anda menggunakan salah satu templat tanggal yang ada dan melewati tanggal null, Anda akan mendapatkan kesalahan run-time. Untuk membuat templat tanggal lebih kuat, Anda akan mengubahnya untuk menangani nilai null. Untuk mendukung tanggal nullable, ubah kode di Views\Shared\DisplayTemplates\DateTime.cshtml menjadi berikut ini:

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

Kode mengembalikan string kosong saat model null.

Ubah kode dalam file Views\Shared\EditorTemplates\Date.cshtml menjadi berikut:

@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"  })
}

Ketika kode ini berjalan, jika model tidak null, nilai model DateTime digunakan. Jika model null, tanggal saat ini digunakan sebagai gantinya.

Wrapup

Tutorial ini telah membahas dasar-dasar ASP.NET pembantu templat dan menunjukkan kepada Anda cara menggunakan kalender popup datepicker UI jQuery dalam aplikasi MVC ASP.NET. Untuk informasi selengkapnya, coba sumber daya ini:

Untuk informasi tentang UI jQuery, lihat UI jQuery.
Untuk informasi tentang cara melokalisasi kontrol datepicker, lihat UI/Datepicker/Localization.
Untuk informasi selengkapnya tentang templat MVC ASP.NET, lihat Seri blog Brad Wilson di templat ASP.NET MVC 2. Meskipun seri ini ditulis untuk ASP.NET MVC 2, materi tersebut masih berlaku untuk versi ASP.NET MVC saat ini.

Sebelumnya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2023-06-16