Bagikan melalui

Halaman Master Berlapis (C#)

oleh Scott Mitchell

Memperlihatkan cara menumpuk satu halaman master di halaman lain.

Pendahuluan

Selama sembilan tutorial terakhir, kita telah melihat cara mengimplementasikan tata letak seluruh situs dengan halaman master. Singkatnya, halaman master memungkinkan kami, pengembang halaman, untuk menentukan markup umum di halaman master bersama dengan wilayah tertentu yang dapat dikustomisasi pada halaman konten halaman demi konten. Kontrol ContentPlaceHolder di halaman master menunjukkan wilayah yang dapat disesuaikan; markup yang dikustomisasi untuk kontrol ContentPlaceHolder ditentukan di halaman konten melalui kontrol Konten.

Teknik halaman master yang telah kami jelajahi sejauh ini sangat bagus jika Anda memiliki satu tata letak yang digunakan di seluruh situs. Namun, banyak situs web besar memiliki tata letak situs yang dikustomisasi di berbagai bagian. Misalnya, pertimbangkan aplikasi perawatan kesehatan yang digunakan oleh staf rumah sakit untuk mengelola informasi pasien, aktivitas, dan penagihan. Mungkin ada tiga jenis halaman web dalam aplikasi ini:

  • Halaman khusus anggota staf tempat anggota staf dapat memperbarui ketersediaan, melihat jadwal, atau meminta waktu liburan.
  • Halaman khusus pasien tempat anggota staf melihat atau mengedit informasi untuk pasien tertentu.
  • Halaman khusus penagihan tempat akuntan meninjau status klaim saat ini dan laporan keuangan.

Setiap halaman mungkin berbagi tata letak umum, seperti menu di bagian atas dan serangkaian tautan yang sering digunakan di sepanjang bagian bawah. Tetapi halaman khusus staf, pasien, dan penagihan mungkin perlu menyesuaikan tata letak generik ini. Misalnya, mungkin semua halaman khusus staf harus menyertakan daftar kalender dan tugas yang menunjukkan ketersediaan dan jadwal harian pengguna yang saat ini masuk. Mungkin semua halaman khusus pasien perlu menunjukkan nama, alamat, dan informasi asuransi untuk pasien yang informasinya sedang diedit.

Dimungkinkan untuk membuat tata letak yang disesuaikan dengan menggunakan halaman master berlapis. Untuk menerapkan skenario di atas, kita akan mulai dengan membuat halaman master yang menentukan tata letak seluruh situs, menu dan konten footer, dengan ContentPlaceHolders yang menentukan wilayah yang dapat disesuaikan. Kami kemudian akan membuat tiga halaman master berlapis, satu untuk setiap jenis halaman web. Setiap halaman master berlapis akan menentukan konten di antara jenis halaman konten yang menggunakan halaman master. Dengan kata lain, halaman master berlapis untuk halaman konten khusus pasien akan menyertakan markup dan logika terprogram untuk menampilkan informasi tentang pasien yang sedang diedit. Saat membuat halaman khusus pasien baru, kami akan mengikatnya ke halaman master berlapis ini.

Tutorial ini dimulai dengan menyoroti manfaat halaman master berlapis. Kemudian menunjukkan cara membuat dan menggunakan halaman master berlapis.

Catatan

Halaman master berlapis telah dimungkinkan sejak versi 2.0 dari .NET Framework. Namun, Visual Studio 2005 tidak menyertakan dukungan waktu desain untuk halaman master berlapis. Kabar baiknya adalah Visual Studio 2008 menawarkan pengalaman waktu desain yang kaya untuk halaman master berlapis. Jika Anda tertarik menggunakan halaman master berlapis tetapi masih menggunakan Visual Studio 2005, lihat entri blog Scott Guthrie, Tips untuk Halaman Master Berlapis di Vs 2005 Design-Time.

Manfaat Halaman Master Berlapis

Banyak situs web memiliki desain situs menyeluruh serta desain yang lebih disesuaikan khusus untuk jenis halaman tertentu. Misalnya, di aplikasi web demo kami, kami telah membuat bagian Administrasi dasar (halaman di ~/Admin folder). Saat ini halaman web dalam ~/Admin folder menggunakan halaman master yang sama dengan halaman yang tidak ada di bagian administrasi (yaitu, Site.master atau Alternate.master, tergantung pada pilihan pengguna).

Catatan

Untuk saat ini, berpura-pura bahwa situs kami hanya memiliki satu halaman master, Site.master. Kita akan membahas menggunakan halaman master berlapis dengan dua (atau lebih) halaman master yang dimulai dengan "Menggunakan Halaman Master Berlapis untuk Bagian Administrasi" nanti dalam tutorial ini.

Bayangkan bahwa kami diminta untuk menyesuaikan tata letak halaman Administrasi untuk menyertakan informasi atau tautan tambahan yang tidak akan ada di halaman lain di situs. Ada empat teknik untuk menerapkan persyaratan ini:

  1. Tambahkan informasi dan tautan khusus Administrasi secara manual ke setiap halaman konten di ~/Admin folder.
  2. Site.master Perbarui halaman master untuk menyertakan informasi dan tautan khusus bagian Administrasi, lalu tambahkan kode ke halaman master untuk memperlihatkan atau menyembunyikan bagian ini berdasarkan apakah salah satu halaman Administrasi sedang dikunjungi.
  3. Buat halaman master baru khusus untuk bagian Administrasi, salin markup dari Site.master, tambahkan informasi dan tautan khusus bagian Administrasi, lalu perbarui halaman konten di ~/Admin folder untuk menggunakan halaman master baru ini.
  4. Buat halaman master berlapis yang mengikat Site.master dan memiliki halaman konten di ~/Admin folder menggunakan halaman master berlapis baru ini. Halaman master berlapis ini hanya akan menyertakan informasi tambahan dan tautan khusus untuk halaman Administrasi dan tidak perlu mengulangi markup yang sudah ditentukan dalam Site.master.

Opsi pertama adalah yang paling tidak dapat dipastikan. Seluruh titik penggunaan halaman master adalah untuk menjauh dari harus menyalin dan menempelkan markup umum secara manual ke halaman ASP.NET baru. Opsi kedua dapat diterima, tetapi membuat aplikasi kurang dapat dipertahankan karena massal meningkatkan halaman master dengan markup yang hanya kadang-kadang ditampilkan dan mengharuskan pengembang mengedit halaman master untuk mengatasi markup ini dan harus mengingat kapan, tepatnya, markup tertentu ditampilkan versus ketika disembunyikan. Pendekatan ini akan kurang dapat disewa karena penyesuaian dari semakin banyak jenis halaman web yang perlu diakomodasi oleh halaman master tunggal ini.

Opsi ketiga menghapus masalah kekacauan dan kompleksitas yang muncul dengan opsi kedua. Namun, kelemahan utama opsi tiga adalah mengharuskan kita untuk menyalin dan menempelkan tata letak umum dari Site.master ke halaman master khusus bagian Administrasi baru. Jika nanti kita memutuskan untuk mengubah tata letak seluruh situs, kita harus ingat untuk mengubahnya di dua tempat.

Opsi keempat, halaman master berlapis, memberi kami yang terbaik dari opsi kedua dan ketiga. Informasi tata letak di seluruh situs dipertahankan dalam satu file - halaman master tingkat atas - sementara konten khusus untuk wilayah tertentu dipisahkan menjadi file yang berbeda.

Tutorial ini dimulai dengan melihat membuat dan menggunakan halaman master berlapis sederhana. Kami membuat halaman master tingkat atas baru, dua halaman master berlapis, dan dua halaman konten. Dimulai dengan "Menggunakan Halaman Master Berlapis untuk Bagian Administrasi," kami melihat memperbarui arsitektur halaman master yang ada untuk menyertakan penggunaan halaman master berlapis. Secara khusus, kami membuat halaman master berlapis dan menggunakannya untuk menyertakan konten kustom tambahan untuk halaman konten di ~/Admin folder.

Langkah 1: Membuat Halaman Master Tingkat Atas Sederhana

Membuat master berlapis berdasarkan salah satu halaman master yang ada lalu memperbarui halaman konten yang ada untuk menggunakan halaman master berlapis baru ini alih-alih halaman master tingkat atas memerlukan beberapa kompleksitas karena halaman konten yang ada sudah mengharapkan kontrol ContentPlaceHolder tertentu yang ditentukan di halaman master tingkat atas. Oleh karena itu, halaman master berlapis juga harus menyertakan kontrol ContentPlaceHolder yang sama dengan nama yang sama. Selain itu, aplikasi demo khusus kami memiliki dua halaman master (Site.master dan Alternate.master) yang secara dinamis ditetapkan ke halaman konten berdasarkan preferensi pengguna, yang semakin menambah kompleksitas ini. Kita akan melihat memperbarui aplikasi yang ada untuk menggunakan halaman master berlapis nanti dalam tutorial ini, tetapi mari kita fokus pertama pada contoh halaman master berlapis sederhana.

Buat folder baru bernama NestedMasterPages lalu tambahkan file halaman master baru ke folder bernama Simple.master. (Lihat Gambar 1 untuk cuplikan layar Penjelajah Solusi setelah folder dan file ini ditambahkan.) AlternateStyles.css Seret file lembar gaya dari Penjelajah Solusi ke Perancang. Ini menambahkan <link> elemen ke file lembar gaya dalam <head> elemen , setelah itu markup elemen halaman <head> master akan terlihat seperti:

<head runat="server">
 <title>Untitled Page</title> 
 <asp:ContentPlaceHolder id="head" runat="server"> 
 </asp:ContentPlaceHolder>
 <link href="../AlternateStyles.css" rel="stylesheet" type="text/css" /> 
</head>

Selanjutnya, tambahkan markup berikut dalam Formulir Web dari Simple.master:

<div id="topContent"> 
 <asp:HyperLink ID="lnkHome" runat="server" 
 NavigateUrl="~/NestedMasterPages/Default.aspx"
 Text="Nested Master Pages Tutorial (Simple)" /> 
</div> 
<div id="mainContent"> 
 <asp:ContentPlaceHolder id="MainContent" runat="server"> 
 </asp:ContentPlaceHolder>
</div>

Markup ini menampilkan tautan berjudul "Halaman Master Berlapis (Sederhana)" di bagian atas halaman dalam font putih besar di latar belakang navigasi. Di bawahnya ada MainContent ContentPlaceHolder. Gambar 1 memperlihatkan Simple.master halaman master saat dimuat di Visual Studio Designer.

Halaman master master titik sederhana saat dimuat di Visual Studio Designer.

Gambar 01: Halaman Master Berlapis Menentukan Konten Khusus untuk Halaman di Bagian Administrasi (Klik untuk melihat gambar ukuran penuh)

Langkah 2: Membuat Halaman Master Berlapis Sederhana

Simple.master berisi dua kontrol ContentPlaceHolder: MainContent ContentPlaceHolder yang kami tambahkan dalam Formulir Web bersama dengan head ContentPlaceHolder dalam <head> elemen . Jika kita membuat halaman konten dan mengikatnya ke Simple.master halaman konten akan memiliki dua kontrol Konten yang merujuk pada dua ContentPlaceHolder. Demikian pula, jika kita membuat halaman master berlapis dan mengikatnya ke Simple.master halaman master berlapis akan memiliki dua kontrol Konten.

Mari kita tambahkan halaman master berlapis baru ke NestedMasterPages folder bernama SimpleNested.master. Klik kanan pada NestedMasterPages folder dan pilih Tambahkan Item Baru. Ini memunculkan kotak dialog Tambahkan Item Baru yang diperlihatkan di Gambar 2. Pilih jenis templat Halaman Master dan ketik nama halaman master baru. Untuk menunjukkan bahwa halaman master baru harus berupa halaman master berlapis, centang kotak centang "Pilih halaman master".

Selanjutnya, klik tombol Tambahkan. Ini akan menampilkan kotak dialog Pilih Halaman Master yang sama dengan yang Anda lihat saat mengikat halaman konten ke halaman master (lihat Gambar 3). Simple.master Pilih halaman master di NestedMasterPages folder dan klik OK.

Catatan

Jika Anda membuat situs web ASP.NET menggunakan model Proyek Aplikasi Web, bukan model Proyek Situs Web, Anda tidak akan melihat kotak centang "Pilih halaman master" dalam kotak dialog Tambahkan Item Baru yang diperlihatkan di Gambar 2. Untuk membuat halaman master berlapis saat menggunakan model Proyek Aplikasi Web, Anda harus memilih templat Halaman Master Berlapis (bukan templat Halaman Master). Setelah memilih templat Halaman Master Berlapis dan mengklik Tambahkan, kotak dialog Pilih Halaman Master yang sama ditampilkan di Gambar 3 akan muncul.

Centang kotak centang

Gambar 02: Centang kotak centang "Pilih halaman master" untuk Menambahkan Halaman Master Berlapis (Klik untuk melihat gambar ukuran penuh)

Mengikat Halaman Master Berlapis ke Halaman Master Simple.master

Gambar 03: Ikat Halaman Master Berlapis ke Simple.master Halaman Master (Klik untuk melihat gambar ukuran penuh)

Markup deklaratif halaman master berlapis, yang ditunjukkan di bawah ini, berisi dua kontrol Konten yang mereferensikan dua kontrol ContentPlaceHolder halaman master tingkat atas.

<%@ Master Language="C#" MasterPageFile="~/NestedMasterPages/Simple.master" AutoEventWireup="false" CodeFile="SimpleNested.master.cs" Inherits="NestedMasterPages_SimpleNested" %> 
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
 </asp:Content> 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 </asp:Content>

Kecuali untuk direktif <%@ Master %> , markup deklaratif awal halaman master berlapis identik dengan markup yang awalnya dihasilkan saat mengikat halaman konten ke halaman master tingkat atas yang sama. Seperti arahan halaman <%@ Page %> konten, <%@ Master %> arahan di sini menyertakan MasterPageFile atribut yang menentukan halaman master induk halaman master berlapis. Perbedaan utama antara halaman master berlapis dan halaman konten yang terikat ke halaman master tingkat atas yang sama adalah bahwa halaman master berlapis dapat menyertakan kontrol ContentPlaceHolder. Kontrol ContentPlaceHolder halaman master berlapis menentukan wilayah tempat halaman konten dapat menyesuaikan markup.

Perbarui halaman master berlapis ini sehingga menampilkan teks "Halo, dari SimpleNested!" dalam kontrol Konten yang sesuai dengan MainContent kontrol ContentPlaceHolder.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 <p>Hello, from SimpleNested!</p>
</asp:Content>

Setelah membuat penambahan ini, simpan halaman master berlapis lalu tambahkan halaman konten baru ke NestedMasterPages folder bernama Default.aspx, dan ikat ke SimpleNested.master halaman master. Setelah menambahkan halaman ini, Anda mungkin terkejut melihat bahwa halaman tersebut tidak berisi kontrol Konten (lihat Gambar 4)! Halaman konten hanya dapat mengakses ContentPlaceHolders halaman master induknya. SimpleNested.master tidak berisi kontrol ContentPlaceHolder apa pun; oleh karena itu, halaman isi apa pun yang terikat ke halaman master ini tidak boleh berisi kontrol Konten apa pun.

Halaman Isi Baru Tidak Berisi Kontrol Isi

Gambar 04: Halaman Konten Baru Tidak Berisi Kontrol Konten (Klik untuk melihat gambar ukuran penuh)

Apa yang perlu kita lakukan adalah memperbarui halaman master berlapis (SimpleNested.master) untuk menyertakan kontrol ContentPlaceHolder. Biasanya Anda ingin halaman master berlapis menyertakan ContentPlaceHolder untuk setiap ContentPlaceHolder yang ditentukan oleh halaman master induknya, sehingga memungkinkan halaman master turunan atau halaman kontennya berfungsi dengan salah satu kontrol ContentPlaceHolder halaman master tingkat atas.

SimpleNested.master Perbarui halaman master untuk menyertakan ContentPlaceHolder dalam dua kontrol Kontennya. Beri kontrol ContentPlaceHolder nama yang sama seperti kontrol ContentPlaceHolder yang dirujuk kontrol Konten mereka. Artinya, tambahkan kontrol ContentPlaceHolder bernama MainContent ke kontrol Konten di SimpleNested.master yang mereferensikan MainContent ContentPlaceHolder di Simple.master. Lakukan hal yang sama dalam kontrol Konten yang mereferensikan head ContentPlaceHolder.

Catatan

Meskipun saya merekomendasikan penamaan kontrol ContentPlaceHolder di halaman master berlapis sama dengan ContentPlaceHolders di halaman master tingkat atas, simetri penamaan ini tidak diperlukan. Anda dapat memberikan kontrol ContentPlaceHolder di halaman master berlapis dengan nama apa pun yang Anda suka. Namun, saya merasa lebih mudah untuk mengingat apa yang sesuai dengan ContentPlaceHolders dengan wilayah halaman apa jika halaman master tingkat atas dan halaman master berlapis saya menggunakan nama yang sama.

Setelah membuat penambahan ini, markup deklaratif halaman master Anda SimpleNested.master akan terlihat mirip dengan yang berikut ini:

<%@ Master Language="C#" MasterPageFile="~/NestedMasterPages/Simple.master"AutoEventWireup="false" CodeFile="SimpleNested.master.cs" Inherits="NestedMasterPages_SimpleNested" %> 
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
 <asp:ContentPlaceHolder ID="head" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content> 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 <p>Hello, from SimpleNested!</p>
 <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content>

Hapus halaman konten yang Default.aspx baru saja kita buat lalu tambahkan kembali, mengikatnya ke SimpleNested.master halaman master. Kali ini Visual Studio menambahkan dua kontrol Konten ke Default.aspx, mereferensikan ContentPlaceHolders yang sekarang ditentukan dalam SimpleNested.master (lihat Gambar 6). Tambahkan teks, "Halo, dari Default.aspx!" di kontrol Konten yang mereferensikan MainContent.

Gambar 5 menunjukkan tiga entitas yang terlibat di sini - Simple.master, , SimpleNested.masterdan - dan Default.aspx bagaimana mereka berhubungan satu sama lain. Seperti yang ditunjukkan diagram, halaman master berlapis mengimplementasikan kontrol Konten untuk ContentPlaceHolder induknya. Jika wilayah ini harus dapat diakses ke halaman konten, halaman master berlapis harus menambahkan ContentPlaceHolders sendiri ke kontrol Konten.

Halaman Master Tingkat Atas dan Berlapis Menentukan Tata Letak Halaman Konten

Gambar 05: Halaman Master Tingkat Atas dan Berlapis Menentukan Tata Letak Halaman Konten (Klik untuk melihat gambar ukuran penuh)

Perilaku ini menggambarkan bagaimana halaman konten atau halaman master hanya kognizan dari halaman master induknya. Perilaku ini juga ditunjukkan oleh Visual Studio Designer. Gambar 6 memperlihatkan Perancang untuk Default.aspx. Meskipun Perancang dengan jelas menunjukkan wilayah apa yang dapat diedit dari halaman konten dan bagian apa yang tidak, perancang tidak membedakan wilayah yang tidak dapat diedit dari halaman master berlapis dan wilayah mana yang berasal dari halaman master tingkat atas.

Halaman Konten Sekarang Menyertakan Kontrol Konten untuk ContentPlaceHolder Halaman Master Berlapis

Gambar 06: Halaman Konten Sekarang Menyertakan Kontrol Konten untuk ContentPlaceHolders Halaman Master Berlapis (Klik untuk melihat gambar ukuran penuh)

Langkah 3: Menambahkan Halaman Master Berlapis Sederhana Kedua

Manfaat halaman master berlapis lebih jelas ketika ada beberapa halaman master berlapis. Untuk mengilustrasikan manfaat ini, buat halaman master berlapis lain di NestedMasterPages folder; beri nama halaman SimpleNestedAlternate.master master berlapis baru ini dan ikat ke Simple.master halaman master. Tambahkan kontrol ContentPlaceHolder di dua kontrol Konten halaman master berlapis seperti yang kami lakukan di Langkah 2. Tambahkan juga teks, "Halo, dari SimpleNestedAlternate!" di kontrol Konten yang sesuai dengan ContentPlaceHolder halaman MainContent master tingkat atas. Setelah membuat perubahan ini, markup deklaratif halaman master berlapis baru Anda akan terlihat mirip dengan yang berikut ini:

<%@ Master Language="C#" MasterPageFile="~/NestedMasterPages/Simple.master" AutoEventWireup="false" CodeFile="SimpleNestedAlternate.master.cs" Inherits="NestedMasterPages_SimpleNestedAlternate" %> 
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
 <asp:ContentPlaceHolder ID="head" runat="server">
 </asp:ContentPlaceHolder> 
 </asp:Content> 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
 <p>Hello, from SimpleNestedAlternate!</p> 
 <asp:ContentPlaceHolder ID="MainContent" runat="server">
 </asp:ContentPlaceHolder> 
 </asp:Content>

Buat halaman konten bernama Alternate.aspx di NestedMasterPages folder dan ikat ke SimpleNestedAlternate.master halaman master berlapis. Tambahkan teks, "Halo, dari Alternatif!" di kontrol Konten yang sesuai dengan MainContent. Gambar 7 ditampilkan Alternate.aspx saat dilihat melalui Visual Studio Designer.

Alternate.aspx Terikat ke Halaman Master SimpleNestedAlternate.master

Gambar 07: Alternate.aspx Terikat ke SimpleNestedAlternate.master Halaman Master (Klik untuk melihat gambar ukuran penuh)

Bandingkan Perancang di Gambar 7 dengan Perancang di Gambar 6. Kedua halaman konten memiliki tata letak yang sama yang ditentukan di halaman master tingkat atas (Simple.master), yaitu judul "Tutorial Halaman Master Berlapis (Sederhana)". Namun keduanya memiliki konten berbeda yang ditentukan dalam halaman master induk mereka - teks "Hello, from SimpleNested!" di Gambar 6 dan "Halo, dari SimpleNestedAlternate!" di Gambar 7. Diberikan, perbedaan ini di sini sepele, tetapi Anda dapat memperluas contoh ini untuk menyertakan perbedaan yang lebih bermakna. Misalnya, SimpleNested.master halaman mungkin menyertakan menu dengan opsi khusus untuk halaman kontennya, sedangkan SimpleNestedAlternate.master mungkin memiliki informasi yang berkaitan dengan halaman konten yang mengikatnya.

Sekarang, bayangkan bahwa kita perlu membuat perubahan pada tata letak situs menyeluruh. Misalnya, bayangkan bahwa kami ingin menambahkan daftar tautan umum ke semua halaman konten. Untuk mencapai hal ini, kami memperbarui halaman master tingkat atas, Simple.master. Setiap perubahan di sana segera tercermin di halaman master berlapis dan, berdasarkan ekstensi, halaman kontennya.

Untuk menunjukkan kemudahan di mana kita dapat mengubah tata letak situs yang menyeluruh, buka Simple.master halaman master dan tambahkan markup berikut antara topContent elemen dan mainContent <div> :

<div id="navContent"> 
 <asp:HyperLink ID="lnkDefault" runat="server" 
 NavigateUrl="~/NestedMasterPages/Default.aspx" 
 Text="Nested Master Page Example 1" /> 
 | 
 <asp:HyperLink ID="lnkAlternate" runat="server" 
 NavigateUrl="~/NestedMasterPages/Alternate.aspx" 
 Text="Nested Master Page Example 2" /> 
</div>

Ini menambahkan dua tautan ke bagian atas setiap halaman yang mengikat ke Simple.master, , SimpleNested.masteratau SimpleNestedAlternate.master; perubahan ini berlaku untuk semua halaman master berlapis dan halaman kontennya segera. Gambar 8 ditampilkan Alternate.aspx saat dilihat melalui browser. Perhatikan penambahan tautan di bagian atas halaman (dibandingkan dengan Gambar 7).

Diubah ke Halaman Master Tingkat Atas Segera Tercermin di Halaman Master Berlapis dan Halaman Kontennya

Gambar 08: Diubah ke Halaman Master Tingkat Atas Segera Tercermin di Halaman Master Berlapis dan Halaman Kontennya (Klik untuk melihat gambar ukuran penuh)

Menggunakan Halaman Master Berlapis untuk Bagian Administrasi

Pada titik ini kita telah melihat keuntungan dari halaman master berlapis dan telah melihat cara membuat dan menggunakannya dalam aplikasi ASP.NET. Contoh dalam Langkah 1, 2, dan 3, namun, melibatkan pembuatan halaman master tingkat atas baru, halaman master berlapis baru, dan halaman konten baru. Bagaimana dengan menambahkan halaman master berlapis baru ke situs web dengan halaman master tingkat atas dan halaman konten yang sudah ada?

Mengintegrasikan halaman master berlapis ke situs web yang ada dan mengaitkannya dengan halaman konten yang ada membutuhkan sedikit lebih banyak upaya daripada memulai dari awal. Langkah 4, 5, 6, dan 7 menjelajahi tantangan ini saat kami menambah aplikasi demo kami untuk menyertakan halaman master berlapis baru bernama AdminNested.master yang berisi instruksi untuk administrator dan digunakan oleh halaman ASP.NET di ~/Admin folder.

Mengintegrasikan halaman master berlapis ke dalam aplikasi demo kami memperkenalkan rintangan berikut:

  • Halaman konten yang ~/Admin ada di folder memiliki harapan tertentu dari halaman master mereka. Sebagai permulaan, mereka mengharapkan kontrol ContentPlaceHolder tertentu ada. Selain itu, ~/Admin/AddProduct.aspx halaman dan ~/Admin/Products.aspx memanggil metode publik RefreshRecentProductsGrid halaman master, mengatur propertinya GridMessageText , atau memiliki penanganan aktivitas untuk peristiwanya PricesDoubled . Akibatnya, halaman master berlapis kami harus menyediakan ContentPlaceHolder dan anggota publik yang sama.
  • Dalam tutorial sebelumnya, kami meningkatkan BasePage kelas untuk mengatur Page properti objek MasterPageFile secara dinamis berdasarkan variabel Sesi. Bagaimana cara mendukung halaman master dinamis saat menggunakan halaman master berlapis?

Kedua tantangan ini akan muncul saat kita membangun halaman master berlapis dan menggunakannya dari halaman konten yang ada. Kami akan menyelidiki dan meluaskan masalah ini saat muncul.

Langkah 4: Membuat Halaman Master Berlapis

Tugas pertama kami adalah membuat halaman master berlapis yang akan digunakan oleh halaman di bagian Administrasi. Seperti yang kita lihat di Langkah 2, saat menambahkan halaman master berlapis baru, kita perlu menentukan halaman master induk halaman master berlapis. Tapi kami memiliki dua halaman master tingkat atas: Site.master dan Alternate.master. Ingat bahwa kita membuat Alternate.master dalam tutorial sebelumnya dan menulis kode di BasePage kelas yang mengatur properti objek MasterPageFile Halaman pada runtime menjadi atau Site.master Alternate.master tergantung pada nilai MyMasterPage variabel Sesi.

Bagaimana cara mengonfigurasi halaman master berlapis sehingga menggunakan halaman master tingkat atas yang sesuai? Kami memiliki dua opsi:

  • Buat dua halaman master berlapis, AdminNestedSite.master dan AdminNestedAlternate.master, dan ikat ke halaman Site.master master tingkat atas dan Alternate.master, masing-masing. Di BasePage, lalu, kita akan mengatur Page objek MasterPageFile ke halaman master berlapis yang sesuai.
  • Buat satu halaman master berlapis dan minta halaman konten menggunakan halaman master khusus ini. Kemudian, pada runtime, kita harus mengatur properti halaman MasterPageFile master berlapis ke halaman master tingkat atas yang sesuai pada runtime. (Seperti yang mungkin telah Anda ketahui sekarang, halaman master juga memiliki MasterPageFile properti.)

Mari kita gunakan opsi kedua. Buat satu file halaman master berlapis di ~/Admin folder bernama AdminNested.master. Karena keduanya Site.master dan Alternate.master memiliki serangkaian kontrol ContentPlaceHolder yang sama, tidak masalah halaman master apa yang Anda ikat, meskipun saya mendorong Anda untuk mengikatnya Site.master demi konsistensi.

Tambahkan Halaman Master Berlapis ke Folder ~/Admin.

Gambar 09: Tambahkan Halaman Master Berlapis ke ~/Admin Folder. (Klik untuk melihat gambar ukuran penuh)

Karena halaman master berlapis terikat ke halaman master dengan empat kontrol ContentPlaceHolder, Visual Studio menambahkan empat kontrol Konten ke markup awal file halaman master berlapis baru. Seperti yang kami lakukan di Langkah 2 dan 3, tambahkan kontrol ContentPlaceHolder di setiap kontrol Konten, dengan nama yang sama dengan kontrol ContentPlaceHolder halaman master tingkat atas. Tambahkan juga markup berikut ke kontrol Konten yang sesuai dengan MainContent ContentPlaceHolder:

<div class="instructions"> 
 <b>Administration Instructions:</b>
 <br /> 
 The pages in the Administration section allow you, the Administrator, to 
 add new products and view existing products. 
</div>

Selanjutnya, tentukan instructions kelas CSS dalam Styles.css file CSS dan AlternateStyles.css . Aturan CSS berikut menyebabkan elemen HTML yang ditata dengan instructions kelas ditampilkan dengan warna latar belakang kuning muda dan batas hitam dan solid:

.instructions 
{ 
 padding: 6px; 
 border: dashed 1px black; 
 background-color: #ffb; 
 margin-bottom: 10px; 
}

Karena markup ini telah ditambahkan ke halaman master berlapis, markup ini hanya akan muncul di halaman yang menggunakan halaman master berlapis ini (yaitu, halaman di bagian Administrasi).

Setelah membuat penambahan ini ke halaman master berlapis Anda, markup deklaratifnya akan terlihat mirip dengan yang berikut ini:

<%@ Master Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="AdminNested.master.cs" Inherits="Admin_AdminNested" %> 
 <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> 
 <asp:ContentPlaceHolder ID="head" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content> 
 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server"> 
 <div class="instructions">
 <b>Administration Instructions:</b>
 <br /> 
 The pages in the Administration section allow you, the Administrator, to 
 add new products and view existing products. 
 </div> 
 <asp:ContentPlaceHolder ID="MainContent" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content> 
 <asp:Content ID="Content3" ContentPlaceHolderID="QuickLoginUI" Runat="Server"> 
 <asp:ContentPlaceHolder ID="QuickLoginUI" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content> 
 <asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" Runat="Server"> 
 <asp:ContentPlaceHolder ID="LeftColumnContent" runat="server"> 
 </asp:ContentPlaceHolder>
 </asp:Content>

Perhatikan bahwa setiap kontrol Konten memiliki kontrol ContentPlaceHolder dan bahwa properti kontrol ID ContentPlaceHolder diberi nilai yang sama dengan kontrol ContentPlaceHolder terkait di halaman master tingkat atas. Selain itu, markup khusus bagian Administrasi muncul di MainContent ContentPlaceHolder.

Gambar 10 memperlihatkan AdminNested.master halaman master berlapis saat dilihat melalui Visual Studio's Designer. Anda dapat melihat instruksi di kotak kuning di bagian MainContent atas kontrol Konten.

Halaman Master Berlapis Memperluas Halaman Master Tingkat Atas untuk Menyertakan Instruksi untuk Administrator.

Gambar 10: Halaman Master Berlapis Memperluas Halaman Master Tingkat Atas untuk Menyertakan Instruksi untuk Administrator. (Klik untuk melihat gambar ukuran penuh)

Langkah 5: Memperbarui Halaman Konten yang Ada untuk Menggunakan Halaman Master Berlapis Baru

Setiap kali kita menambahkan halaman konten baru ke bagian Administrasi, kita perlu mengikatnya ke halaman master yang AdminNested.master baru saja kita buat. Tapi bagaimana dengan halaman konten yang ada? Saat ini, semua halaman konten di situs berasal dari BasePage kelas , yang secara terprogram mengatur halaman master halaman konten pada runtime. Ini bukan perilaku yang kita inginkan untuk halaman konten di bagian Administrasi. Sebagai gantinya, kami ingin halaman konten ini selalu menggunakan AdminNested.master halaman. Ini akan menjadi tanggung jawab halaman master berlapis untuk memilih halaman konten tingkat atas yang tepat saat runtime.

Cara terbaik untuk mencapai perilaku yang diinginkan ini adalah dengan membuat kelas halaman dasar kustom baru bernama AdminBasePage yang memperluas BasePage kelas . AdminBasePage kemudian dapat mengambil alih SetMasterPageFile dan mengatur Page objek MasterPageFile ke nilai yang dikodekan secara permanen "~/Admin/AdminNested.master". Dengan cara ini, halaman apa pun yang berasal dari AdminBasePage akan menggunakan AdminNested.master, sedangkan halaman apa pun yang berasal dari BasePage akan mengatur propertinya MasterPageFile secara dinamis ke "~/Site.master" atau "~/Alternate.master" berdasarkan nilai MyMasterPage variabel Sesi.

Mulailah dengan menambahkan file kelas baru ke App_Code folder bernama AdminBasePage.cs. Perluas AdminBasePage BasePage lalu ambil alih SetMasterPageFile metode . Dalam metode tersebut tetapkan MasterPageFile nilai "~/Admin/AdminNested.master". Setelah membuat perubahan ini, file kelas Anda akan terlihat mirip dengan yang berikut ini:

public class AdminBasePage : BasePage 
{ 
    protected override void SetMasterPageFile() 
    { 
        this.MasterPageFile = "~/Admin/AdminNested.master"; 
    } 
}

Kita sekarang harus memiliki halaman konten yang ada di bagian Administrasi yang berasal dari AdminBasePage bukan BasePage. Buka file kelas code-behind untuk setiap halaman konten di ~/Admin folder dan buat perubahan ini. Misalnya, dalam ~/Admin/Default.aspx Anda akan mengubah deklarasi kelas code-behind dari:

public partial class Admin_Default : BasePage

Kepada:

public partial class Admin_Default : AdminBasePage

Gambar 11 menggambarkan bagaimana halaman master tingkat atas (Site.master atau Alternate.master), halaman master berlapis (AdminNested.master), dan halaman konten bagian Administrasi berhubungan satu sama lain.

Halaman Master Berlapis Menentukan Konten Khusus untuk Halaman di Bagian Administrasi

Gambar 11: Halaman Master Berlapis Menentukan Konten Khusus untuk Halaman di Bagian Administrasi (Klik untuk melihat gambar ukuran penuh)

Langkah 6: Mencerminkan Metode dan Properti Publik Halaman Master

Ingat bahwa ~/Admin/AddProduct.aspx halaman dan ~/Admin/Products.aspx berinteraksi secara terprogram dengan halaman master: ~/Admin/AddProduct.aspx memanggil metode publik RefreshRecentProductsGrid halaman master dan mengatur propertinya GridMessageText ; ~/Admin/Products.aspx memiliki penanganan aktivitas untuk peristiwa tersebut PricesDoubled . Dalam tutorial sebelumnya, kami membuat kelas abstrak BaseMasterPage yang mendefinisikan anggota publik ini.

Halaman ~/Admin/AddProduct.aspx dan ~/Admin/Products.aspx mengasumsikan bahwa halaman master mereka berasal dari BaseMasterPage kelas . Halaman tersebut AdminNested.master , bagaimanapun, saat ini memperluas System.Web.UI.MasterPage kelas. Akibatnya, ketika mengunjungi ~/Admin/Products.aspx dilemparkan InvalidCastException dengan pesan: "Tidak dapat mentransmisikan objek jenis 'ASP.admin_adminnested_master' untuk mengetik 'BaseMasterPage'."

Untuk memperbaikinya, kita harus memiliki AdminNested.master perluasan BaseMasterPagekelas code-behind . Perbarui deklarasi kelas di belakang kode halaman master berlapis dari:

public partial class Admin_AdminNested : System.Web.UI.MasterPage

Kepada:

public partial class Admin_AdminNested : BaseMasterPage

Kita belum selesai. BaseMasterPage Karena kelasnya abstrak, kita perlu mengambil alih abstract anggota, RefreshRecentProductsGrid dan GridMessageText. Anggota ini digunakan oleh halaman master tingkat atas untuk memperbarui antarmuka pengguna mereka. (Sebenarnya, hanya halaman master yang Site.master menggunakan metode ini, meskipun kedua halaman master tingkat atas menerapkan metode ini, karena keduanya memperluas BaseMasterPage.)

Meskipun kita perlu menerapkan anggota ini di AdminNested.master, semua implementasi ini perlu dilakukan hanyalah memanggil anggota yang sama di halaman master tingkat atas yang digunakan oleh halaman master berlapis. Misalnya, ketika halaman konten di bagian Administrasi memanggil metode halaman RefreshRecentProductsGrid master berlapis, semua halaman master berlapis perlu dilakukan adalah, pada gilirannyaRefreshRecentProductsGrid, memanggilSite.master, atau Alternate.mastermetode .

Untuk mencapai hal ini, mulailah dengan menambahkan arahan berikut @MasterType ke bagian AdminNested.masteratas :

<%@ MasterType TypeName="BaseMasterPage" %>

Ingat bahwa direktif @MasterType menambahkan properti yang sangat ditik ke kelas code-behind bernama Master. Kemudian ambil alih RefreshRecentProductsGrid anggota dan GridMessageText dan cukup delegasikan panggilan ke Mastermetode yang sesuai:

public partial class Admin_AdminNested : BaseMasterPage 
{ 
    public override void RefreshRecentProductsGrid() 
    { 
        Master.RefreshRecentProductsGrid();
    } 
    public override string GridMessageText
    { 
        get 
        {
            return Master.GridMessageText;
        } 
        set
        { 
            Master.GridMessageText = value; 
        } 
    }
}

Dengan kode ini di tempat, Anda harus dapat mengunjungi dan menggunakan halaman konten di bagian Administrasi. Gambar 12 memperlihatkan ~/Admin/Products.aspx halaman saat ditampilkan melalui browser. Seperti yang Anda lihat, halaman menyertakan kotak Instruksi Administrasi, yang ditentukan di halaman master berlapis.

Halaman Konten di Bagian Administrasi Menyertakan Instruksi di Bagian Atas Setiap Halaman

Gambar 12: Halaman Konten di Bagian Administrasi Menyertakan Instruksi di Bagian Atas Setiap Halaman (Klik untuk melihat gambar ukuran penuh)

Langkah 7: Menggunakan Halaman Master Tingkat Atas yang Sesuai pada Runtime

Meskipun semua halaman konten di bagian Administrasi berfungsi penuh, semuanya menggunakan halaman master tingkat atas yang sama dan mengabaikan halaman master yang dipilih oleh pengguna di ChooseMasterPage.aspx. Perilaku ini disebabkan oleh fakta bahwa halaman master berlapis memiliki propertinya MasterPageFile yang secara statis diatur ke Site.master dalam arahannya <%@ Master %> .

Untuk menggunakan halaman master tingkat atas yang dipilih oleh pengguna akhir, kita perlu mengatur AdminNested.masterproperti 's MasterPageFile ke nilai dalam MyMasterPage variabel Sesi. Karena kami mengatur properti halaman konten' MasterPageFile di BasePage, Anda mungkin berpikir bahwa kami akan mengatur properti halaman MasterPageFile master berlapis di BaseMasterPage atau di AdminNested.masterkelas 's code-behind. Namun, ini tidak akan berfungsi, karena kita harus mengatur MasterPageFile properti pada akhir tahap PreInit. Waktu paling awal yang dapat kita ketuk secara terprogram ke siklus hidup halaman dari halaman master adalah tahap Init (yang terjadi setelah tahap PreInit).

Oleh karena itu, kita perlu mengatur properti halaman MasterPageFile master berlapis dari halaman konten. Satu-satunya halaman konten yang menggunakan AdminNested.master halaman master berasal dari AdminBasePage. Oleh karena itu, kita dapat menempatkan logika ini di sana. Di Langkah 5 kita mengesampingkan SetMasterPageFile metode, mengatur Page properti objek MasterPageFile ke "~/Admin/AdminNested.master". Perbarui SetMasterPageFile untuk juga mengatur properti halaman MasterPageFile master ke hasil yang disimpan dalam Sesi:

public class AdminBasePage : BasePage 
{ 
    protected override void SetMasterPageFile() 
    { 
        this.MasterPageFile = "~/Admin/AdminNested.master"; 
        Page.Master.MasterPageFile = base.GetMasterPageFileFromSession(); 
    } 
}

Metode GetMasterPageFileFromSession , yang kami tambahkan ke BasePage kelas dalam tutorial sebelumnya, mengembalikan jalur file halaman master yang sesuai berdasarkan nilai variabel Sesi.

Dengan perubahan ini di tempat, pilihan halaman master pengguna membawa ke bagian Administrasi. Gambar 13 memperlihatkan halaman yang sama dengan Gambar 12, tetapi setelah pengguna mengubah pilihan halaman master mereka menjadi Alternate.master.

Halaman Administrasi Berlapis Menggunakan Halaman Master Tingkat Atas Yang Dipilih oleh Pengguna

Gambar 13: Halaman Administrasi Berlapis Menggunakan Halaman Master Tingkat Atas Yang Dipilih oleh Pengguna (Klik untuk melihat gambar ukuran penuh)

Ringkasan

Sama seperti bagaimana halaman konten dapat mengikat ke halaman master, dimungkinkan untuk membuat halaman master berlapis dengan memiliki halaman master anak yang mengikat ke halaman master induk. Halaman master anak dapat menentukan kontrol Konten untuk setiap ContentPlaceHolders induknya; kemudian dapat menambahkan kontrol ContentPlaceHolder sendiri (serta markup lain) ke kontrol Konten ini. Halaman master berlapis cukup berguna dalam aplikasi web besar di mana semua halaman berbagi tampilan dan nuansa menyeluruh, namun bagian tertentu dari situs memerlukan penyesuaian unik.

Selamat Pemrograman!

Bacaan lebih lanjut

Untuk informasi selengkapnya tentang topik yang dibahas dalam tutorial ini, lihat sumber daya berikut:

Tentang Penulis

Scott Mitchell, penulis beberapa buku ASP/ASP.NET dan pendiri 4GuysFromRolla.com, telah bekerja dengan teknologi Microsoft Web sejak 1998. Scott bekerja sebagai konsultan, pelatih, dan penulis independen. Buku terbarunya adalah Sams Teach Yourself ASP.NET 3,5 dalam 24 Jam. Scott dapat dijangkau di mitchell@4GuysFromRolla.com atau melalui blognya di http://ScottOnWriting.NET.

Terima kasih khusus untuk

Seri tutorial ini ditinjau oleh banyak peninjau yang bermanfaat. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, menjatuhkan saya baris di mitchell@4GuysFromRolla.com

SebelumnyaBerikutnya