Bagikan melalui

Membuat Tata Letak Seluruh Situs Menggunakan Halaman Master (VB)

oleh Scott Mitchell

Unduh PDF

Tutorial ini akan menampilkan dasar-dasar halaman master. Yaitu, apa itu halaman master, bagaimana seseorang membuat halaman master, apa itu pemegang tempat konten, bagaimana seseorang membuat halaman ASP.NET yang menggunakan halaman master, bagaimana memodifikasi halaman master secara otomatis tercermin di halaman konten terkait, dan sebagainya.

Pendahuluan

Salah satu atribut situs web yang dirancang dengan baik adalah tata letak halaman di seluruh situs yang konsisten. Ambil situs web www.asp.net, misalnya. Pada saat penulisan ini, setiap halaman memiliki konten yang sama di bagian atas dan bawah halaman. Seperti yang ditunjukkan Gambar 1, bagian paling atas setiap halaman menampilkan bilah abu-abu dengan daftar Komunitas Microsoft. Di bawahnya ada logo situs, daftar bahasa tempat situs telah diterjemahkan, dan bagian inti: Beranda, Mulai, Pelajari, Unduhan, dan sebagainya. Demikian juga, bagian bawah halaman mencakup informasi tentang iklan di www.asp.net, pernyataan hak cipta, dan tautan ke pernyataan privasi.

Situs web www.asp.net Menggunakan Tampilan dan Nuansa yang Konsisten di Semua Halaman

Gambar 01: Situs Web www.asp.net Menggunakan Tampilan dan Nuansa yang Konsisten di Semua Halaman (Klik untuk melihat gambar ukuran penuh)

Atribut lain dari situs yang dirancang dengan baik adalah kemudahan tampilan situs dapat diubah. Gambar 1 menunjukkan beranda www.asp.net per Maret 2008, tetapi antara sekarang dan publikasi tutorial ini, tampilan dan nuansa mungkin telah berubah. Mungkin item menu di bagian atas akan diperluas untuk menyertakan bagian baru untuk kerangka kerja MVC. Atau mungkin desain baru yang radikal dengan warna, font, dan tata letak yang berbeda akan diluncurkan. Menerapkan perubahan tersebut pada seluruh situs harus merupakan proses cepat dan sederhana yang tidak memerlukan modifikasi ribuan halaman web yang membentuk situs.

Membuat templat halaman seluruh situs di ASP.NET dimungkinkan melalui penggunaan halaman master. Singkatnya, halaman master adalah jenis khusus halaman ASP.NET yang menentukan markup yang umum di antara semua halaman konten serta wilayah yang dapat disesuaikan berdasarkan halaman halaman konten demi konten. (Halaman konten adalah halaman ASP.NET yang terikat ke halaman master.) Setiap kali tata letak atau pemformatan halaman master diubah, semua output halaman kontennya juga segera diperbarui, yang membuat penerapan perubahan tampilan di seluruh situs semampu memperbarui dan menyebarkan satu file (yaitu, halaman master).

Ini adalah tutorial pertama dalam serangkaian tutorial yang menjelajahi menggunakan halaman master. Selama rangkaian tutorial ini, kami:

  • Periksa membuat halaman master dan halaman konten terkaitnya,
  • Diskusikan berbagai tips, trik, dan perangkap,
  • Identifikasi jepitan halaman master umum dan jelajahi solusinya,
  • Lihat cara mengakses halaman master dari halaman konten dan sebaliknya,
  • Pelajari cara menentukan halaman master halaman konten saat runtime, dan
  • Topik halaman master tingkat lanjut lainnya.

Tutorial ini diarahkan untuk ringkas dan memberikan instruksi langkah demi langkah dengan banyak cuplikan layar untuk memandu Anda melalui proses secara visual. Setiap tutorial tersedia dalam versi C# dan Visual Basic dan menyertakan unduhan kode lengkap yang digunakan.

Tutorial perdana ini dimulai dengan melihat dasar-dasar halaman master. Kami membahas cara kerja halaman master, melihat membuat halaman master dan halaman konten terkait menggunakan Visual Web Developer, dan melihat bagaimana perubahan pada halaman master segera tercermin di halaman kontennya. Mari kita mulai!

Memahami Cara Kerja Halaman Master

Membangun situs web dengan tata letak halaman seluruh situs yang konsisten mengharuskan setiap halaman web memancarkan markup pemformatan umum selain konten kustomnya. Misalnya, sementara setiap tutorial atau posting forum di www.asp.net memiliki konten unik mereka sendiri, masing-masing halaman ini juga merender serangkaian elemen umum <div> yang menampilkan tautan bagian tingkat atas: Beranda, Memulai, Mempelajari, dan sebagainya.

Ada berbagai teknik untuk membuat halaman web dengan tampilan dan nuansa yang konsisten. Pendekatan naif adalah hanya menyalin dan menempelkan markup tata letak umum ke semua halaman web, tetapi pendekatan ini memiliki sejumlah kelemahan. Untuk permulaan, setiap kali halaman baru dibuat, Anda harus ingat untuk menyalin dan menempelkan konten bersama ke halaman. Operasi penyalinan dan penempelan tersebut sudah matang karena Anda mungkin secara tidak sengaja hanya menyalin subset markup bersama ke halaman baru. Dan untuk mengatasinya, pendekatan ini membuat mengganti penampilan di seluruh situs yang ada dengan yang baru rasa sakit nyata karena setiap halaman di situs harus diedit untuk menggunakan tampilan dan nuansa baru.

Sebelum ASP.NET versi 2.0, pengembang halaman sering menempatkan markup umum di Kontrol Pengguna lalu menambahkan Kontrol Pengguna ini ke masing-masing dan setiap halaman. Pendekatan ini mengharuskan pengembang halaman ingat untuk menambahkan Kontrol Pengguna secara manual ke setiap halaman baru, tetapi diizinkan untuk modifikasi seluruh situs yang lebih mudah karena saat memperbarui markup umum hanya Kontrol Pengguna yang perlu dimodifikasi. Sayangnya, Visual Studio .NET 2002 dan 2003 - versi Visual Studio yang digunakan untuk membuat aplikasi ASP.NET 1.x - Kontrol Pengguna yang dirender dalam tampilan Desain sebagai kotak abu-abu. Akibatnya, pengembang halaman yang menggunakan pendekatan ini tidak menikmati lingkungan waktu desain WYSIWYG.

Kekurangan penggunaan Kontrol Pengguna ditangani dalam ASP.NET versi 2.0 dan Visual Studio 2005 dengan pengenalan halaman master. Halaman master adalah jenis khusus halaman ASP.NET yang menentukan markup seluruh situs dan wilayah tempat halaman konten terkait menentukan markup kustomnya. Seperti yang akan kita lihat di Langkah 1, wilayah ini ditentukan oleh kontrol ContentPlaceHolder. Kontrol ContentPlaceHolder hanya menunjukkan posisi dalam hierarki kontrol halaman master tempat konten kustom dapat disuntikkan oleh halaman konten.

Catatan

Konsep inti dan fungsionalitas halaman master tidak berubah sejak ASP.NET versi 2.0. Namun, Visual Studio 2008 menawarkan dukungan waktu desain untuk halaman master berlapis, fitur yang kurang di Visual Studio 2005. Kita akan melihat menggunakan halaman master berlapis dalam tutorial mendatang.

Gambar 2 memperlihatkan seperti apa halaman master untuk www.asp.net . Perhatikan bahwa halaman master menentukan tata letak seluruh situs umum - markup di bagian atas, bawah, dan kanan setiap halaman - serta ContentPlaceHolder di kiri tengah, tempat konten unik untuk setiap halaman web individual berada.

Halaman Master Menentukan Tata Letak Seluruh Situs dan Wilayah yang Dapat Diedit berdasarkan Halaman Konten menurut Konten

Gambar 02: Halaman Master Menentukan Tata Letak Seluruh Situs dan Wilayah yang Dapat Diedit berdasarkan Halaman Konten-demi-Konten Halaman

Setelah halaman master ditentukan, halaman tersebut dapat terikat ke halaman ASP.NET baru melalui centang kotak centang. Halaman ASP.NET ini - yang disebut halaman konten - sertakan kontrol Konten untuk setiap kontrol ContentPlaceHolder halaman master. Ketika halaman konten dikunjungi melalui browser, mesin ASP.NET membuat hierarki kontrol halaman master dan menyuntikkan hierarki kontrol halaman konten ke tempat yang sesuai. Hierarki kontrol gabungan ini dirender dan HTML yang dihasilkan dikembalikan ke browser pengguna akhir. Akibatnya, halaman konten memancarkan markup umum yang ditentukan di halaman masternya di luar kontrol ContentPlaceHolder dan markup khusus halaman yang ditentukan dalam kontrol Kontennya sendiri. Gambar 3 menggambarkan konsep ini.

Markup Halaman yang Diminta Menyatu ke Halaman Master

Gambar 03: Markup Halaman yang Diminta Menyatu ke Halaman Master (Klik untuk melihat gambar ukuran penuh)

Sekarang setelah kita membahas cara kerja halaman master, mari kita lihat membuat halaman master dan halaman konten terkait menggunakan Visual Web Developer.

Catatan

Untuk menjangkau audiens seluas mungkin, situs web ASP.NET yang kami bangun di seluruh seri tutorial ini akan dibuat menggunakan ASP.NET 3.5 dengan versi gratis Microsoft visual Studio 2008, Visual Web Developer 2008. Jika Anda belum meningkatkan ke ASP.NET 3.5, jangan khawatir - konsep yang dibahas dalam tutorial ini bekerja sama baiknya dengan ASP.NET 2.0 dan Visual Studio 2005. Namun, beberapa aplikasi demo dapat menggunakan fitur baru untuk .NET Framework versi 3.5; ketika fitur khusus 3.5 digunakan, saya menyertakan catatan yang membahas cara menerapkan fungsionalitas serupa di versi 2.0. Perlu diingat bahwa aplikasi demo yang tersedia untuk diunduh dari setiap tutorial menargetkan .NET Framework versi 3.5, yang menghasilkan Web.config file yang mencakup elemen konfigurasi khusus 3,5. Singkat cerita, jika Anda belum menginstal .NET 3.5 di komputer Anda, aplikasi web yang dapat diunduh tidak akan berfungsi tanpa terlebih dahulu menghapus markup khusus 3.5 dari Web.config. Lihat Web.config File untuk informasi selengkapnya tentang topik ini.

Langkah 1: Membuat Halaman Master

Sebelum kita dapat menjelajahi membuat dan menggunakan halaman master dan konten, pertama-tama kita memerlukan situs web ASP.NET. Mulailah dengan membuat situs web ASP.NET berbasis sistem file baru. Untuk menyelesaikan ini, luncurkan Visual Web Developer lalu masuk ke menu File dan pilih Situs Web Baru, menampilkan kotak dialog Situs Web Baru (lihat Gambar 4). Pilih templat situs web ASP.NET, atur daftar drop-down Lokasi ke Sistem File, pilih folder untuk menempatkan situs web, dan atur bahasa ke Visual Basic. Ini akan membuat situs web baru dengan Default.aspx halaman ASP.NET, App_Data folder, dan Web.config file.

Catatan

Visual Studio mendukung dua mode manajemen proyek: Proyek Situs Web dan Proyek Aplikasi Web. Proyek Situs Web tidak memiliki file proyek, sedangkan Proyek Aplikasi Web meniru arsitektur proyek di Visual Studio .NET 2002/2003 - mereka menyertakan file proyek dan mengkompilasi kode sumber proyek ke dalam satu rakitan, yang ditempatkan dalam /bin folder. Visual Studio 2005 awalnya hanya mendukung Proyek Situs Web, meskipun model Proyek Aplikasi Web diperkenalkan kembali dengan Paket Layanan 1; Visual Studio 2008 menawarkan kedua model proyek. Visual Web Developer 2005 dan 2008 edisi, namun, hanya mendukung Proyek Situs Web. Saya menggunakan model Proyek Situs Web untuk demo saya dalam seri tutorial ini. Jika Anda menggunakan edisi non-Ekspres dan ingin menggunakan model Proyek Aplikasi Web sebagai gantinya, jangan ragu untuk melakukannya tetapi ketahuilah bahwa mungkin ada beberapa perbedaan antara apa yang Anda lihat di layar Anda dan langkah-langkah yang harus Anda ambil versus cuplikan layar yang ditampilkan dan instruksi yang diberikan dalam tutorial ini.

Membuat Situs Web Berbasis Sistem File Baru

Gambar 04: Buat Situs Web Berbasis Sistem File Baru (Klik untuk melihat gambar ukuran penuh)

Selanjutnya, tambahkan halaman master ke situs di direktori akar dengan mengklik kanan nama Proyek, memilih Tambahkan Item Baru, dan pilih templat Halaman Master. Perhatikan bahwa halaman master diakhir dengan ekstensi .master. Beri nama halaman Site.master master baru ini dan klik Tambahkan.

Menambahkan Halaman Master Bernama Site.master ke Situs Web

Gambar 05: Tambahkan Halaman Master Bernama Site.master ke Situs Web (Klik untuk melihat gambar ukuran penuh)

Menambahkan file halaman master baru melalui Visual Web Developer membuat halaman master dengan markup deklaratif berikut:

<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>
<!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>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
 
 </asp:ContentPlaceHolder>
 </div>
 </form>
</body>
</html>

Baris pertama dalam markup deklaratif adalah arahan@Master. Arahannya @Master mirip dengan arahan @Page yang muncul di halaman ASP.NET. Ini mendefinisikan bahasa sisi server (VB) dan informasi tentang lokasi dan warisan kelas code-behind halaman master.

DOCTYPE Markup deklaratif halaman dan muncul di bawah arahan@Master. Halaman ini menyertakan HTML statis bersama dengan empat kontrol sisi server:

  • Formulir Web ( <form runat="server">) - karena semua halaman ASP.NET biasanya memiliki Formulir Web - dan karena halaman master mungkin menyertakan kontrol Web yang harus muncul dalam Formulir Web - pastikan untuk menambahkan Formulir Web ke halaman master Anda (daripada menambahkan Formulir Web ke setiap halaman konten).
  • Kontrol ContentPlaceHolder bernama ContentPlaceHolder1 - kontrol ContentPlaceHolder ini muncul dalam Formulir Web dan berfungsi sebagai wilayah untuk antarmuka pengguna halaman konten.
  • Elemen sisi <head> server - <head> elemen memiliki runat="server" atribut , membuatnya dapat diakses melalui kode sisi server. Elemen diimplementasikan <head> dengan cara ini sehingga judul halaman dan markup terkait lainnya <head>dapat ditambahkan atau disesuaikan secara terprogram. Misalnya, mengatur properti halaman Title ASP.NET mengubah elemen yang <title> dirender oleh <head> kontrol server.
  • Kontrol ContentPlaceHolder bernama head - kontrol ContentPlaceHolder ini muncul dalam <head> kontrol server dan dapat digunakan untuk menambahkan konten secara deklaratif ke <head> elemen .

Markup deklaratif halaman master default ini berfungsi sebagai titik awal untuk merancang halaman master Anda sendiri. Jangan ragu untuk mengedit HTML atau menambahkan kontrol Web tambahan atau ContentPlaceHolders ke halaman master.

Catatan

Saat merancang halaman master, pastikan bahwa halaman master berisi Formulir Web dan setidaknya satu kontrol ContentPlaceHolder muncul dalam Formulir Web ini.

Membuat Tata Letak Situs Sederhana

Mari kita perluas Site.mastermarkup deklaratif default untuk membuat tata letak situs di mana semua halaman berbagi: header umum; kolom kiri dengan navigasi, berita, dan konten seluruh situs lainnya; dan footer yang menampilkan ikon "Didukung oleh Microsoft ASP.NET". Gambar 6 memperlihatkan hasil akhir halaman master saat salah satu halaman kontennya dilihat melalui browser. Wilayah lingkaran merah di Gambar 6 khusus untuk halaman yang dikunjungi (Default.aspx); konten lain ditentukan di halaman master dan karenanya konsisten di semua halaman konten.

Halaman Master Menentukan Markup untuk Bagian Atas, Kiri, dan Bawah

Gambar 06: Halaman Master Menentukan Markup untuk Bagian Atas, Kiri, dan Bawah (Klik untuk melihat gambar ukuran penuh)

Untuk mencapai tata letak situs yang diperlihatkan di Gambar 6, mulailah dengan memperbarui Site.master halaman master sehingga berisi markup deklaratif berikut:

<%@ Master Language="VB" CodeFile="Site.master.vb" Inherits="Site" %>
<!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>Untitled Page</title>
 <asp:ContentPlaceHolder id="head" runat="server">
 </asp:ContentPlaceHolder>
 <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
 <form id="form1" runat="server">
 <div id="topContent">
 <a href="Default.aspx">Master Pages Tutorials</a>
 </div>
 
 <div id="mainContent">
 <asp:ContentPlaceHolder id="MainContent" runat="server">
 </asp:ContentPlaceHolder>
 </div>
 
 <div id="leftContent">
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 </div>
 
 <div id="footerContent">
 <img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
 </div>
 </form>
  </body>
</html>

Tata letak halaman master didefinisikan menggunakan serangkaian <div> elemen HTML. topContent <div> berisi markup yang muncul di bagian atas setiap halaman, sementara mainContent, leftContent, dan footerContent <div> digunakan untuk menampilkan konten halaman, kolom kiri, dan ikon "Didukung oleh Microsoft ASP.NET", masing-masing. Selain menambahkan elemen-elemen ini <div> , saya juga mengganti nama ID properti kontrol ContentPlaceHolder utama dari ContentPlaceHolder1 menjadi MainContent.

Aturan pemformatan dan tata letak untuk elemen bermakna <div> ini dieja dalam file Styles.cssCascading Stylesheet (CSS), yang ditentukan melalui <link> elemen di elemen halaman <head> master. Berbagai aturan ini menentukan tampilan dan nuansa setiap <div> elemen yang disebutkan di atas. Misalnya, topContent <div> elemen, yang menampilkan teks dan tautan "Tutorial Halaman Master", memiliki aturan pemformatan yang ditentukan sebagai Styles.css berikut:

#topContent {
 text-align: right;
 background-color: #600;
 color: White;
 font-size: x-large;
 text-decoration: none;
 font-weight: bold;
 padding: 10px;
 height: 50px;
}

Jika Anda mengikuti di komputer, Anda harus mengunduh kode yang menyertai tutorial ini dan menambahkan file ke Styles.css proyek Anda. Demikian pula, Anda juga perlu membuat folder bernama Images dan menyalin ikon "Didukung oleh Microsoft ASP.NET" dari situs web demo yang diunduh ke proyek Anda.

Catatan

Diskusi tentang CSS dan pemformatan halaman web berada di luar cakupan artikel ini. Untuk informasi selengkapnya tentang CSS, lihat Tutorial CSS di W3Schools.com. Saya juga mendorong Anda untuk mengunduh kode yang menyertai tutorial ini dan bermain dengan pengaturan CSS di Styles.css untuk melihat efek aturan pemformatan yang berbeda.

Membuat Halaman Master Menggunakan Templat Desain yang Sudah Ada

Selama bertahun-tahun saya telah membangun sejumlah aplikasi web ASP.NET untuk perusahaan kecil hingga menengah. Beberapa klien saya memiliki tata letak situs yang sudah ada yang ingin mereka gunakan; yang lain mempekerjakan desainer grafis yang kompeten. Beberapa mempercayakan saya untuk merancang tata letak situs web. Seperti yang Anda tahu oleh Gambar 6, menugaskan programmer untuk merancang tata letak situs web biasanya sebijak meminta akuntan Anda melakukan operasi jantung terbuka sementara dokter Anda melakukan pajak Anda.

Untungnya, ada banyak situs web yang menawarkan templat desain HTML gratis - Google mengembalikan lebih dari enam juta hasil untuk istilah pencarian "templat situs web gratis." Salah satu favorit saya adalah OpenDesigns.org. Setelah Anda menemukan templat situs web yang Anda suka, tambahkan file dan gambar CSS ke proyek situs web Anda dan integrasikan HTML templat ke halaman master Anda.

Catatan

Microsoft juga menawarkan sejumlah Templat Kit Mulai Desain ASP.NET gratis yang terintegrasi ke dalam kotak dialog Situs Web Baru di Visual Studio.

Langkah 2: Membuat Halaman Konten Terkait

Dengan halaman master dibuat, kami siap untuk mulai membuat halaman ASP.NET yang terikat ke halaman master. Halaman tersebut disebut sebagai halaman konten.

Mari kita tambahkan halaman ASP.NET baru ke proyek dan ikat ke Site.master halaman master. Klik kanan pada nama proyek di Penjelajah Solusi dan pilih opsi Tambahkan Item Baru. Pilih templat Formulir Web, masukkan nama About.aspx, lalu centang kotak centang "Pilih halaman master" seperti yang diperlihatkan dalam Gambar 7. Melakukannya akan menampilkan kotak dialog Pilih Halaman Master (lihat Gambar 8) dari mana Anda bisa memilih halaman master untuk digunakan.

Catatan

Jika Anda membuat situs web ASP.NET menggunakan model Proyek Aplikasi Web alih-alih model Proyek Situs Web, Anda tidak akan melihat kotak centang "Pilih halaman master" dalam kotak dialog Tambahkan Item Baru yang diperlihatkan di Gambar 7. Untuk membuat halaman konten saat menggunakan model Proyek Aplikasi Web, Anda harus memilih templat Formulir Konten Web, bukan templat Formulir Web. Setelah memilih templat Formulir Konten Web dan mengklik Tambahkan, kotak dialog Pilih Halaman Master yang sama yang diperlihatkan di Gambar 8 akan muncul.

Tambahkan Halaman Konten Baru

Gambar 07: Tambahkan Halaman Konten Baru (Klik untuk melihat gambar ukuran penuh)

Pilih Halaman Master Site.master

Gambar 08: Pilih Site.master Halaman Master (Klik untuk melihat gambar ukuran penuh)

Seperti yang ditunjukkan oleh markup deklaratif berikut, halaman konten baru berisi @Page arahan yang menunjuk kembali ke halaman masternya dan kontrol Konten untuk setiap kontrol ContentPlaceHolder halaman master.

<%@ Page Language="VB" MasterPageFile="~/Site.master" AutoEventWireup="false" CodeFile="About.aspx.vb" Inherits="About" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>

Catatan

Di bagian "Membuat Tata Letak Situs Sederhana" di Langkah 1 Saya mengganti namanya ContentPlaceHolder1 menjadi MainContent. Jika Anda tidak mengganti nama kontrol ID ContentPlaceHolder ini dengan cara yang sama, markup deklaratif halaman konten Anda akan sedikit berbeda dari markup yang ditunjukkan di atas. Yaitu, kontrol ContentPlaceHolderID Konten kedua akan mencerminkan ID kontrol ContentPlaceHolder yang sesuai di halaman master Anda.

Saat merender halaman konten, mesin ASP.NET harus menyatukan kontrol Konten halaman dengan kontrol ContentPlaceHolder halaman masternya. Mesin ASP.NET menentukan halaman master halaman konten dari @Page atribut direktif MasterPageFile . Seperti yang ditunjukkan markup di atas, halaman konten ini terikat ke ~/Site.master.

Karena halaman master memiliki dua kontrol ContentPlaceHolder - head dan MainContent - Visual Web Developer menghasilkan dua kontrol Konten. Setiap kontrol Konten mereferensikan ContentPlaceHolder tertentu melalui propertinya ContentPlaceHolderID .

Di mana halaman master bersinar di atas teknik templat seluruh situs sebelumnya adalah dengan dukungan waktu desain mereka. Gambar 9 memperlihatkan About.aspx halaman konten saat dilihat melalui tampilan Desain Pengembang Visual Web. Perhatikan bahwa saat konten halaman master terlihat, konten tersebut berwarna abu-abu dan tidak dapat dimodifikasi. Kontrol Konten yang sesuai dengan ContentPlaceHolders halaman master dapat diedit. Dan sama seperti halaman ASP.NET lainnya, Anda dapat membuat antarmuka halaman konten dengan menambahkan kontrol Web melalui tampilan Sumber atau Desain.

Tampilan Desain Halaman Konten Menampilkan Konten Halaman Khusus dan Halaman Master

Gambar 09: Tampilan Desain Halaman Konten Menampilkan Konten Halaman Khusus dan Halaman Master (Klik untuk melihat gambar ukuran penuh)

Menambahkan Markup dan Kontrol Web ke Halaman Isi

Luangkan waktu sejenak untuk membuat beberapa konten untuk halaman.About.aspx Seperti yang Anda lihat di Gambar 10, saya memasukkan judul "Tentang Penulis" dan beberapa paragraf teks, tetapi jangan ragu untuk menambahkan kontrol Web juga. Setelah membuat antarmuka ini, kunjungi About.aspx halaman melalui browser.

Kunjungi Halaman About.aspx Melalui Browser

Gambar 10: Kunjungi About.aspx Halaman Melalui Browser (Klik untuk melihat gambar ukuran penuh)

Penting untuk dipahami bahwa halaman konten yang diminta dan halaman master terkait menyatu dan dirender secara keseluruhan di server web. Browser pengguna akhir kemudian dikirim html yang dihasilkan dan menyatu. Untuk memverifikasi ini, lihat HTML yang diterima oleh browser dengan masuk ke menu Tampilan dan memilih Sumber. Perhatikan bahwa tidak ada bingkai atau teknik khusus lainnya untuk menampilkan dua halaman web yang berbeda dalam satu jendela.

Mengikat Halaman Master ke Halaman ASP.NET yang Sudah Ada

Seperti yang kita lihat dalam langkah ini, menambahkan halaman konten baru ke aplikasi web ASP.NET semampu memeriksa kotak centang "Pilih halaman master" dan memilih halaman master. Sayangnya, mengonversi halaman ASP.NET yang ada menjadi halaman master tidak semampunya.

Untuk mengikat halaman master ke halaman ASP.NET yang sudah ada, Anda perlu melakukan langkah-langkah berikut:

  1. MasterPageFile Tambahkan atribut ke arahan halaman @Page ASP.NET, arahkan ke halaman master yang sesuai.
  2. Tambahkan kontrol Konten untuk setiap ContentPlaceHolders di halaman master.
  3. Potong dan tempel konten halaman ASP.NET yang ada secara selektif ke kontrol Konten yang sesuai. Saya mengatakan "selektif" di sini karena halaman ASP.NET kemungkinan berisi markup yang sudah diekspresikan oleh halaman master, seperti DOCTYPE, <html> elemen, dan Formulir Web.

Untuk petunjuk langkah demi langkah tentang proses ini bersama dengan cuplikan layar, lihat tutorial Menggunakan Halaman Master dan Navigasi Situs Scott Guthrie. Bagian "Perbarui Default.aspx dan DataSample.aspx untuk menggunakan Halaman Master" merinci langkah-langkah ini.

Karena jauh lebih mudah untuk membuat halaman konten baru daripada mengonversi halaman ASP.NET yang ada menjadi halaman konten, saya sarankan setiap kali Anda membuat situs web ASP.NET baru, tambahkan halaman master ke situs. Ikat semua halaman ASP.NET baru ke halaman master ini. Jangan khawatir jika halaman master awal sangat sederhana atau biasa; Anda dapat memperbarui halaman master nanti.

Catatan

Saat membuat aplikasi ASP.NET baru, Pengembang Web Visual menambahkan Default.aspx halaman yang tidak terikat ke halaman master. Jika Anda ingin berlatih mengonversi halaman ASP.NET yang ada menjadi halaman konten, lanjutkan dan lakukan dengan Default.aspx. Atau, Anda dapat menghapus Default.aspx lalu menambahkannya kembali, tetapi kali ini mencentang kotak centang "Pilih halaman master".

Langkah 3: Memperbarui Markup Halaman Master

Salah satu manfaat utama halaman master adalah bahwa satu halaman master dapat digunakan untuk menentukan tata letak keseluruhan untuk banyak halaman di situs. Oleh karena itu, memperbarui tampilan dan nuansa situs memerlukan pembaruan satu file - halaman master.

Untuk mengilustrasikan perilaku ini, mari kita perbarui halaman master kita untuk menyertakan tanggal saat ini di bagian atas kolom kiri. Tambahkan Label bernama DateDisplay ke leftContent <div>.

<div id="leftContent">
 <p>
 <asp:Label ID="DateDisplay" runat="server"></asp:Label>
 </p>
 
 <h3>Lessons</h3>    
 <ul>
 <li>TODO</li>
 </ul>
 <h3>News</h3>    
 <ul>
 <li>TODO</li>
 </ul>
</div>

Selanjutnya, buat Page_Load penanganan aktivitas untuk halaman master dan tambahkan kode berikut:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
 DateDisplay.Text = DateTime.Now.ToString("dddd, MMMM dd")
End Sub

Kode di atas mengatur properti Label Text ke tanggal dan waktu saat ini yang diformat sebagai hari dalam seminggu, nama bulan, dan hari dua digit (lihat Gambar 11). Dengan perubahan ini, kunjungi kembali salah satu halaman konten Anda. Seperti yang ditunjukkan Gambar 11, markup yang dihasilkan segera diperbarui untuk menyertakan perubahan ke halaman master.

Perubahan pada Halaman Master Tercermin Saat Menampilkan Halaman Konten

Gambar 11: Perubahan pada Halaman Master Tercermin Saat Menampilkan Halaman Konten (Klik untuk melihat gambar ukuran penuh)

Catatan

Seperti yang diilustrasikan contoh ini, halaman master mungkin berisi kontrol Web sisi server, kode, dan penanganan aktivitas.

Ringkasan

Halaman master memungkinkan pengembang ASP.NET merancang tata letak seluruh situs yang konsisten yang mudah diperbarui. Membuat halaman master dan halaman konten terkait sesederh membuat halaman ASP.NET standar, karena Pengembang Web Visual menawarkan dukungan waktu desain yang kaya.

Contoh halaman master yang kami buat dalam tutorial ini memiliki dua kontrol ContentPlaceHolder, head dan MainContent. Namun, kami hanya menentukan markup untuk kontrol MainContent ContentPlaceHolder di halaman konten kami. Dalam tutorial berikutnya kita melihat menggunakan beberapa kontrol Konten di halaman konten. Kita juga melihat cara menentukan markup default untuk kontrol Konten dalam halaman master, serta cara beralih antara menggunakan markup default yang ditentukan di halaman master dan menyediakan markup kustom dari halaman konten.

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

Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, drop saya baris di mitchell@4GuysFromRolla.com.

SebelumnyaBerikutnya