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

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.

Bekerja dengan Tipe Kompleks

Di bagian ini Anda akan membuat kelas alamat dan mempelajari cara membuat templat untuk menampilkannya.

Di folder Model , buat file kelas baru bernama Person.cs tempat Anda akan meletakkan dua jenis: Person kelas dan Address kelas. Kelas Person akan berisi properti yang di ketik sebagai Address. Jenisnya Address adalah jenis kompleks, yang berarti bukan salah satu jenis bawaan seperti int, , stringatau double. Sebaliknya, ia memiliki beberapa properti. Kode untuk kelas baru terlihat seperti ini:

public class Address {
    public string StreetAddress { get; set; }
    public string City { get; set; }
    public string PostalCode { get; set; }
}

public class Person {
    public int ID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Phone { get; set; }
    public Address HomeAddress;
}

Movie Di pengontrol, tambahkan tindakan berikut PersonDetail untuk menampilkan instans orang:

public ActionResult PersonDetail(int id = 0) {
     return View(GetPerson(id));
}

Kemudian tambahkan kode berikut ke Movie pengontrol untuk mengisi Person model dengan beberapa data sampel:

Person GetPerson(int id) {
    var p = new Person
    {
        ID = 1,
        FirstName = "Joe",
        LastName = "Smith",
        Phone = "123-456",
        HomeAddress = new Address
        {
            City = "Great Falls",
            StreetAddress = "1234 N 57th St",
            PostalCode = "95045"
        }
    };
    return p;
}

Buka file Views\Movies\PersonDetail.cshtml dan tambahkan markup berikut untuk PersonDetail tampilan.

@model Person
@{
    ViewBag.Title = "PersonDetail";
}
<h2>Person Detail</h2>
@Html.DisplayForModel()

Tekan Ctrl+F5 untuk menjalankan aplikasi dan menavigasi ke Film/PersonDetail.

Tampilan PersonDetail tidak berisi jenis kompleks, seperti yang Address dapat Anda lihat di cuplikan layar ini. (Tidak ada alamat yang ditampilkan.)

Data Address model tidak ditampilkan karena merupakan jenis yang kompleks. Untuk menampilkan informasi alamat, buka file Views\Movies\PersonDetail.cshtml lagi dan tambahkan markup berikut.

@Html.DisplayFor( x => x.HomeAddress )

Markup lengkap untuk PersonDetail tampilan sekarang terlihat seperti ini:

@model MvcMovie.Models.Person

@{
    ViewBag.Title = "PersonDetail";
}

<h2>Person Detail</h2>

@Html.DisplayForModel()
@Html.DisplayFor( x => x.HomeAddress )

Jalankan aplikasi lagi dan tampilkan PersonDetail tampilan. Informasi alamat sekarang ditampilkan:

Membuat Templat untuk Tipe Kompleks

Di bagian ini Anda akan membuat templat yang akan digunakan untuk merender Address jenis kompleks. Saat Anda membuat templat untuk jenis tersebut Address , ASP.NET MVC dapat secara otomatis menggunakannya untuk memformat model alamat di mana saja dalam aplikasi. Ini memberi Anda cara untuk mengontrol penyajian Address jenis hanya dari satu tempat dalam aplikasi.

Di folder Views\Shared\DisplayTemplates , buat tampilan parsial yang diketik dengan kuat bernama Alamat:

Klik Tambahkan, lalu buka file Views\Shared\DisplayTemplates\Address.cshtml baru. Tampilan baru berisi markup yang dihasilkan berikut ini:

@model MvcMovie.Models.Address

<fieldset>
    <legend>Address</legend>

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

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

    <div class="display-label">PostalCode</div>
    <div class="display-field">
        @Html.DisplayFor(model => model.PostalCode)
    </div>
</fieldset>

Jalankan aplikasi dan tampilkan PersonDetail tampilan. Kali ini, Address templat yang baru saja Anda buat digunakan untuk menampilkan Address jenis kompleks, sehingga tampilan terlihat seperti berikut ini:

Ringkasan: Cara Menentukan Format dan Templat Tampilan Model

Anda telah melihat bahwa Anda dapat menentukan format atau templat untuk properti model dengan menggunakan pendekatan berikut:

• Menerapkan atribut ke DisplayFormat properti dalam model. Misalnya, kode berikut menyebabkan tanggal ditampilkan tanpa waktu:

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

• Menerapkan atribut DataType ke properti dalam model dan menentukan jenis data. Misalnya, kode berikut menyebabkan tanggal ditampilkan tanpa waktu.

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

  Jika aplikasi berisi templat date.cshtml di folder Views\Shared\DisplayTemplates atau folder Views\Movies\DisplayTemplates , templat tersebut DateTime akan digunakan untuk merender properti. Jika tidak, sistem templat ASP.NET bawaan menampilkan properti sebagai tanggal.

• Membuat templat tampilan di folder Views\Shared\DisplayTemplates atau folder Views\Movies\DisplayTemplates yang namanya cocok dengan tipe data yang ingin Anda format. Misalnya, Anda melihat bahwa Views\Shared\DisplayTemplates\DateTime.cshtml digunakan untuk merender DateTime properti dalam model, tanpa menambahkan atribut ke model dan tanpa menambahkan markup apa pun ke tampilan.

• Menggunakan atribut UIHint pada model untuk menentukan templat untuk menampilkan properti model.

• Secara eksplisit menambahkan nama templat tampilan ke Html.DisplayUntuk panggilan dalam tampilan.

Pendekatan yang Anda gunakan tergantung pada apa yang perlu Anda lakukan dalam aplikasi Anda. Tidak jarang mencampur pendekatan ini untuk mendapatkan jenis pemformatan yang Anda butuhkan.

Di bagian berikutnya, Anda akan beralih sedikit gigi dan beralih dari menyesuaikan bagaimana data ditampilkan untuk menyesuaikan cara memasukkannya. Anda akan menghubungkan datepicker jQuery ke tampilan edit dalam aplikasi untuk memberikan cara yang apik untuk menentukan tanggal.

SebelumnyaBerikutnya