Halaman Induk

oleh Microsoft

Salah satu komponen kunci ke situs Web yang berhasil adalah tampilan dan nuansa yang konsisten. Di ASP.NET 1.x, pengembang menggunakan kontrol pengguna untuk mereplikasi elemen halaman umum di seluruh aplikasi Web. Meskipun itu tentu saja merupakan solusi yang dapat dikerjakan, menggunakan kontrol pengguna memang memiliki beberapa kelemahan. Misalnya, perubahan posisi kontrol pengguna memerlukan perubahan pada beberapa halaman di seluruh situs. Kontrol pengguna juga tidak dirender dalam tampilan Desain setelah disisipkan di halaman.

Salah satu komponen kunci ke situs Web yang berhasil adalah tampilan dan nuansa yang konsisten. Di ASP.NET 1.x, pengembang menggunakan kontrol pengguna untuk mereplikasi elemen halaman umum di seluruh aplikasi Web. Meskipun itu tentu saja merupakan solusi yang dapat dikerjakan, menggunakan kontrol pengguna memang memiliki beberapa kelemahan. Misalnya, perubahan posisi kontrol pengguna memerlukan perubahan pada beberapa halaman di seluruh situs. Kontrol pengguna juga tidak dirender dalam tampilan Desain setelah disisipkan di halaman.

ASP.NET 2.0 memperkenalkan halaman Master sebagai cara mempertahankan tampilan dan nuansa yang konsisten, dan seperti yang akan Anda lihat, halaman Master mewakili peningkatan signifikan atas metode kontrol pengguna.

Mengapa Halaman Master?

Anda mungkin bertanya-tanya mengapa halaman master diperlukan di ASP.NET 2.0. Lagi pula, pengembang situs Web sudah menggunakan kontrol pengguna di ASP.NET 1.x untuk berbagi area konten antar halaman. Sebenarnya ada beberapa alasan mengapa kontrol pengguna adalah solusi yang kurang optimal untuk membuat tata letak umum.

Kontrol pengguna sebenarnya tidak menentukan tata letak halaman. Sebaliknya, mereka menentukan tata letak dan fungsionalitas untuk sebagian halaman. Perbedaan antara keduanya penting karena membuat pengelolaan solusi kontrol pengguna jauh lebih sulit. Misalnya, saat Anda ingin mengubah posisi kontrol pengguna di halaman Anda, Anda harus mengedit halaman aktual tempat kontrol pengguna muncul. Itu bagus jika Anda hanya memiliki beberapa halaman, tetapi di situs besar, itu dengan cepat menjadi mimpi buruk manajemen situs!

Kelemahan lain menggunakan kontrol pengguna untuk menentukan tata letak umum berakar pada arsitektur ASP.NET itu sendiri. Jika ada anggota publik kontrol pengguna yang diubah, Anda harus mengkombinasikan ulang semua halaman yang menggunakan kontrol pengguna. Pada gilirannya, ASP.NET kemudian akan JIT ulang halaman Anda ketika pertama kali diakses. Ini, sekali lagi, menghasilkan arsitektur yang tidak dapat diskalakan dan masalah manajemen situs untuk situs yang lebih besar.

Kedua masalah ini (dan banyak lagi) ditangani dengan baik oleh halaman master di ASP.NET 2.0.

Cara Kerja Halaman Master

Halaman master dianalogikan dengan templat untuk halaman lain. Elemen halaman yang harus dibagikan di antara halaman lain (yaitu menu, batas, dll.) ditambahkan ke halaman master. Ketika halaman baru ditambahkan ke situs, Anda bisa mengaitkannya dengan halaman master. Halaman yang terkait dengan halaman master disebut halaman konten. Secara default, halaman konten mengambil tampilan dari halaman master. Namun, saat membuat halaman master, Anda bisa menentukan bagian halaman yang bisa diganti halaman kontennya dengan kontennya sendiri. Bagian-bagian ini didefinisikan menggunakan kontrol baru yang diperkenalkan di ASP.NET 2.0; kontrol ContentPlaceHolder .

Halaman master dapat berisi sejumlah kontrol ContentPlaceHolder (atau tidak sama sekali.) Pada halaman konten, konten dari kontrol ContentPlaceHolder muncul di dalam kontrol Konten , kontrol baru lainnya di ASP.NET 2.0. Secara default, halaman konten Kontrol konten kosong sehingga Anda bisa menyediakan konten Anda sendiri. Jika Anda ingin menggunakan konten dari halaman master di dalam kontrol Konten, Anda dapat melakukannya seperti yang akan Anda lihat nanti dalam modul ini. Kontrol Konten dipetakan ke kontrol ContentPlaceHolder melalui atribut ContentPlaceHolderID kontrol Konten. Kode di bawah ini memetakan kontrol Konten ke kontrol ContentPlaceHolder yang disebut mainBody di halaman master.

<asp:Content ID="Content1" ContentPlaceHolderID="mainBody" Runat="Server">

Catatan

Anda akan sering mendengar orang menggambarkan halaman master sebagai kelas dasar untuk halaman lain. Itu sebenarnya tidak benar. Hubungan antara halaman master dan halaman konten bukanlah salah satu pewarisan.

Gambar 1 memperlihatkan halaman master dan halaman konten terkait saat muncul di Visual Studio 2005. Anda bisa melihat kontrol ContentPlaceHolder di halaman master dan kontrol Konten terkait di halaman konten. Perhatikan bahwa konten halaman master yang berada di luar ContentPlaceHolder terlihat tetapi berwarna abu-abu di halaman konten. Hanya konten di dalam ContentPlaceHolder yang dapat disematkan oleh halaman konten. Semua konten lain yang berasal dari halaman master tidak dapat diubah.

Gambar 1: Halaman master dan halaman konten terkait

Membuat Halaman Master

Untuk membuat halaman master baru:

1. Buka Visual Studio 2005 dan buat situs Web baru.
2. Klik File, Baru, File.
3. Pilih File Master dari dialog Tambahkan Item Baru seperti yang diperlihatkan dalam gambar 2.
4. Klik Tambahkan.

Gambar 2: Membuat Halaman Master Baru

Perhatikan bahwa ekstensi file untuk halaman master adalah .master. Ini adalah salah satu cara halaman master berbeda dari halaman biasa. Perbedaan utama lainnya adalah bahwa sebagai pengganti arahan @Page , halaman master berisi @Master direktif. Beralih ke Tampilan Sumber untuk halaman master yang baru saja Anda buat dan tinjau kodenya.

Halaman master baru akan memiliki satu kontrol ContentPlaceHolder secara default. Dalam kebanyakan kasus, lebih masuk akal untuk membuat elemen halaman umum terlebih dahulu lalu menyisipkan kontrol ContentPlaceHolder di mana konten kustom diinginkan. Dalam kasus tersebut, pengembang akan ingin menghapus kontrol ContentPlaceHolder default dan menyisipkan yang baru saat halaman dikembangkan. Kontrol ContentPlaceHolder tidak dapat diubah ukurannya meskipun kontrol tersebut menampilkan handel ukuran. Ukuran kontrol ContentPlaceHolder secara otomatis berdasarkan konten yang dikandungnya dengan satu pengecualian; jika Anda menempatkan kontrol ContentPlaceHolder di dalam elemen blok seperti sel tabel, itu akan berukuran sesuai dengan ukuran elemen.

Lab 1 Bekerja dengan Halaman Master

Di lab ini, Anda akan membuat halaman master baru dan menentukan tiga kontrol ContentPlaceHolder. Anda kemudian akan membuat halaman Konten baru dan mengganti konten dari setidaknya salah satu kontrol ContentPlaceHolder.

1. Buat halaman master dan sisipkan kontrol ContentPlaceHolder.

   1. Buat halaman master baru seperti yang dijelaskan di atas.
   2. Hapus kontrol ContentPlaceHolder default.
   3. Pilih kontrol ContentPlaceHolder dengan mengklik batas atas kontrol yang bertaung lalu hapus dengan menekan tombol DEL di keyboard Anda.
   4. Sisipkan tabel baru menggunakan templat Header dan samping seperti yang diperlihatkan dalam gambar 3. Ubah lebar dan tinggi menjadi masing-masing 90% sehingga seluruh tabel terlihat di perancang.

Figur 3

1. Tempatkan kursor ke setiap sel tabel dan atur properti valign ke atas.
2. Dari Kotak Alat, sisipkan kontrol ContentPlaceHolder di sel atas tabel (sel header.)
3. Saat Anda menyisipkan kontrol ContentPlaceHolder ini, Anda akan melihat bahwa tinggi baris akan memakan hampir seluruh halaman seperti yang ditunjukkan pada gambar 4. Jangan khawatir tentang hal itu pada saat ini.

Gambar 4: Ruang kosong berada di sel yang sama dengan ContentPlaceHolder

1. Tempatkan kontrol ContentPlaceHolder di dua sel lainnya. Setelah kontrol ContentPlaceHolder lainnya disisipkan, ukuran sel tabel seharusnya seperti yang Anda harapkan. Halaman sekarang akan terlihat seperti halaman yang diperlihatkan dalam gambar 5.

Gambar 5: Master dengan semua kontrol ContentPlaceHolder. Perhatikan bahwa tinggi sel untuk sel header sekarang adalah apa yang seharusnya

1. Masukkan beberapa teks pilihan Anda ke dalam masing-masing dari tiga kontrol ContentPlaceHolder.
2. Simpan halaman master sebagai exercise1.master.
3. Buat Formulir Web baru dan kaitkan dengan halaman master exercise1.master.
4. Pilih File, Baru, File di Visual Studio 2005.
5. Pilih Formulir Web dalam dialog Tambahkan Item Baru.
6. Pastikan bahwa kotak centang Pilih halaman master dicentang seperti yang diperlihatkan dalam gambar 6.

Gambar 6: Menambahkan Halaman Konten baru

1. Klik Tambahkan.
2. Pilih exercise1.master dalam dialog Pilih halaman master seperti yang ditunjukkan pada gambar 7.
3. Klik OK untuk menambahkan halaman konten baru.

Halaman konten baru muncul di Visual Studio dengan satu kontrol Konten untuk setiap kontrol ContentPlaceHolder di halaman master. Secara default, kontrol Konten kosong sehingga Anda dapat menambahkan konten Anda sendiri. Jika Anda ingin mereka menggunakan konten dari kontrol ContentPlaceHolder pada halaman master, cukup klik simbol tag pintar (panah hitam kecil di sudut kanan atas kontrol) dan pilih Default ke Konten Master dari tag pintar seperti yang ditunjukkan pada gambar 8. Saat Anda melakukannya, item menu berubah menjadi Buat Konten Kustom. Mengkliknya pada saat itu akan menghapus konten dari halaman master yang memungkinkan Anda menentukan konten kustom untuk kontrol Konten tertentu.

Gambar 7: Mengatur Kontrol Konten ke Default ke Konten Halaman Master

Menyambungkan Halaman Master dan Halaman Konten

Kaitan antara halaman master dan halaman konten dapat dikonfigurasi dengan salah satu dari empat cara berbeda:

• Atribut MasterPageFile dari direktif @Page
• Mengatur properti Page.MasterPageFile dalam kode.
• Elemen <halaman> dalam file konfigurasi aplikasi (web.config di folder akar aplikasi)
• Elemen <halaman> dalam file konfigurasi subfolder (web.config dalam subfolder)

Atribut MasterPageFile

Atribut MasterPageFile memudahkan penerapan halaman master ke halaman ASP.NET tertentu. Ini juga merupakan metode yang digunakan untuk menerapkan halaman master saat Anda mencentang kotak centang Pilih Halaman Master seperti yang Anda lakukan di Latihan 1.

Mengatur Page.MasterPageFile dalam Kode

Dengan mengatur properti MasterPageFile dalam kode, Anda dapat menerapkan halaman master tertentu ke konten Anda saat runtime. Ini berguna dalam kasus di mana Anda mungkin perlu menerapkan halaman master tertentu berdasarkan peran pengguna atau beberapa kriteria lainnya. Properti MasterPageFile harus diatur dalam metode PreInit. Jika diatur setelah metode PreInit, InvalidOperationException akan dilemparkan. Halaman tempat properti ini sedang diatur juga harus memiliki kontrol Konten sebagai kontrol tingkat atas untuk halaman tersebut. Jika tidak, HttpException akan dilemparkan ketika properti MasterPageFile diatur.

<Menggunakan elemen halaman>

Anda dapat mengonfigurasi halaman master untuk halaman Anda dengan mengatur atribut masterPageFile di <elemen halaman> file web.config. Saat menggunakan metode ini, perlu diingat bahwa web.config file yang lebih rendah dalam struktur aplikasi dapat mengambil alih pengaturan ini. Setiap atribut MasterPageFile yang @Page diatur dalam direktif juga akan mengambil alih pengaturan ini. <Menggunakan elemen halaman> memudahkan untuk membuat halaman master master yang dapat ditimpa jika perlu dalam folder atau file tertentu.

Properti di Halaman Master

Halaman master dapat mengekspos properti hanya dengan membuat properti tersebut publik dalam halaman master. Misalnya, kode berikut mendefinisikan properti yang disebut SomeProperty:

private string _SomeProperty; public string SomeProperty { get { return _SomeProperty; } set { _SomeProperty = value; } }

Untuk mengakses properti SomeProperty dari halaman Konten, Anda harus menggunakan properti Master seperti ini:

void Page_Load() { Master.SomeProperty = "Master Page Property"; }

Halaman Master Berlapis

Halaman master adalah solusi sempurna untuk memastikan tampilan dan nuansa umum di seluruh aplikasi Web besar. Namun, tidak jarang bagian tertentu dari situs besar berbagi antarmuka umum sementara bagian lain berbagi antarmuka yang berbeda. Untuk mengatasi kebutuhan itu, beberapa halaman master adalah solusi yang sempurna. Namun, itu masih tidak membahas fakta bahwa aplikasi besar mungkin memiliki komponen tertentu (seperti menu, misalnya) yang dibagikan di antara semua halaman dan komponen lain yang hanya dibagikan di antara bagian tertentu dari situs. Untuk situasi seperti itu, halaman master berlapis mengisi kebutuhan dengan baik. Seperti yang telah Anda lihat, halaman master normal terdiri dari halaman master dan halaman konten. Dalam situasi halaman master berlapis, ada dua halaman master; master induk dan master anak. Halaman master anak juga merupakan halaman konten dan masternya adalah halaman master induk.

Berikut adalah kode untuk halaman master yang khas:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="parent.master.cs" Inherits="parent" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Typical Master Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:contentplaceholder id="MainMenuContent" runat="server" /> </div> </form> </body> </html>

Dalam skenario master berlapis, ini akan menjadi master induk. Halaman master lain akan menggunakan halaman ini sebagai halaman masternya, dan kode tersebut akan terlihat seperti ini:

<%@ Master Language="C#" MasterPageFile="~/parent.master" AutoEventWireup="true" CodeFile="child.master.cs" Inherits="child" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainMenuContent" Runat="Server"> <span>From the Child Master.</span> <asp:contentplaceholder id="ChildPlaceHolder1" runat="server" /> </asp:Content>

Perhatikan bahwa dalam skenario ini, master anak juga merupakan halaman konten untuk master induk. Semua konten master anak muncul di dalam kontrol Konten yang mendapatkan kontennya dari kontrol ContentPlaceHolder induk.

Catatan

Designer dukungan tidak tersedia untuk halaman master berlapis. Ketika Anda mengembangkan menggunakan master berlapis, Anda harus menggunakan tampilan sumber.

Video ini memperlihatkan panduan penggunaan halaman master berlapis.

Buka Video Full-Screen

Gambar 8: Memilih Halaman Master