Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
oleh Scott Mitchell
Memeriksa cara menambahkan beberapa tempat penampung konten ke halaman master serta cara menentukan konten default di tempat penampung konten.
Pendahuluan
Dalam tutorial sebelumnya, kami memeriksa bagaimana halaman master memungkinkan pengembang ASP.NET untuk membuat tata letak seluruh situs yang konsisten. Halaman master menentukan markup yang umum untuk semua halaman konten dan wilayahnya yang dapat disesuaikan berdasarkan halaman demi halaman. Dalam tutorial sebelumnya kami membuat halaman master sederhana (Site.master) dan dua halaman konten (Default.aspx dan About.aspx). Halaman master kami terdiri dari dua ContentPlaceHolders bernama head dan MainContent, yang masing-masing terletak di <head> elemen dan Formulir Web. Sementara halaman konten masing-masing memiliki dua kontrol Konten, kami hanya menentukan markup untuk yang sesuai dengan MainContent.
Sebagaimana dibuktikan oleh dua kontrol ContentPlaceHolder di Site.master, halaman master mungkin berisi beberapa ContentPlaceHolders. Terlebih lagi, halaman master dapat menentukan markup default untuk kontrol ContentPlaceHolder. Halaman konten, kemudian, dapat secara opsional menentukan markupnya sendiri atau menggunakan markup default. Dalam tutorial ini kita melihat menggunakan beberapa kontrol konten di halaman master dan melihat cara menentukan markup default dalam kontrol ContentPlaceHolder.
Langkah 1: Menambahkan Kontrol ContentPlaceHolder Tambahan ke Halaman Master
Banyak desain situs web berisi beberapa area di layar yang disesuaikan berdasarkan halaman demi halaman. Site.master, halaman master yang kita buat dalam tutorial sebelumnya, berisi satu ContentPlaceHolder dalam Formulir Web bernama MainContent. Secara khusus, ContentPlaceHolder ini terletak di mainContent <div> dalam elemen .
Gambar 1 ditampilkan Default.aspx saat dilihat melalui browser. Wilayah yang dilingkari dengan warna merah adalah markup khusus halaman yang MainContentsesuai dengan .
Gambar 01: Wilayah Yang Dilingkari Memperlihatkan Area yang Saat Ini Dapat Disesuaikan pada Basis Halaman demi Halaman (Klik untuk melihat gambar ukuran penuh)
Bayangkan bahwa selain wilayah yang ditampilkan di Gambar 1, kita juga perlu menambahkan item khusus halaman ke kolom kiri di bawah bagian Pelajaran dan Berita. Untuk mencapai hal ini, kami menambahkan kontrol ContentPlaceHolder lain ke halaman master. Untuk mengikutinya, buka Site.master halaman master di Visual Web Developer lalu seret kontrol ContentPlaceHolder dari Kotak Alat ke perancang setelah bagian Berita. Atur ContentPlaceHolder ID ke LeftColumnContent.
Gambar 02: Tambahkan Kontrol ContentPlaceHolder ke Kolom Kiri Halaman Master (Klik untuk melihat gambar ukuran penuh)
Dengan penambahan LeftColumnContent ContentPlaceHolder ke halaman master, kita dapat menentukan konten untuk wilayah ini berdasarkan halaman demi halaman dengan menyertakan kontrol Konten di halaman yang ContentPlaceHolderID diatur ke LeftColumnContent. Kami memeriksa proses ini di Langkah 2.
Langkah 2: Menentukan Konten untuk ContentPlaceHolder Baru di Halaman Konten
Saat menambahkan halaman konten baru ke situs web, Pengembang Web Visual secara otomatis membuat kontrol Konten di halaman untuk setiap ContentPlaceHolder di halaman master yang dipilih. Setelah menambahkan LeftColumnContent ContentPlaceHolder ke halaman master kami di Langkah 1, halaman ASP.NET baru sekarang akan memiliki tiga kontrol Konten.
Untuk mengilustrasikan ini, tambahkan halaman konten baru ke direktori akar bernama MultipleContentPlaceHolders.aspx yang terikat ke Site.master halaman master. Pengembang Web Visual membuat halaman ini dengan markup deklaratif berikut:
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="MultipleContentPlaceHolders.aspx.cs" Inherits="MultipleContentPlaceHolders" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
</asp:Content>
Masukkan beberapa konten ke dalam kontrol Konten yang mereferensikan MainContent ContentPlaceHolders (Content2). Selanjutnya, tambahkan markup berikut ke Content3 kontrol Konten (yang mereferensikan LeftColumnContent ContentPlaceHolder):
<h3>Page-Specific Content</h3>
<ul>
<li>This content is defined in the content page.</li>
<li>The master page has two regions in the Web Form that are editable on a
page-by-page basis.</li>
</ul>
Setelah menambahkan markup ini, kunjungi halaman melalui browser. Seperti yang ditunjukkan Gambar 3, markup yang ditempatkan di Content3 kontrol Konten ditampilkan di kolom kiri di bawah bagian Berita (dilingkari dengan warna merah). Markup yang ditempatkan Content2 ditampilkan di bagian kanan halaman (dilingkari dengan warna biru).
Gambar 03: Kolom Kiri Sekarang Menyertakan Konten Khusus Halaman di bawah Bagian Berita (Klik untuk melihat gambar ukuran penuh)
Menentukan Isi di Halaman Isi yang Ada
Membuat halaman konten baru secara otomatis menggabungkan kontrol ContentPlaceHolder yang kami tambahkan di Langkah 1. Tetapi dua halaman konten kami yang sudah ada - About.aspx dan Default.aspx - tidak memiliki kontrol Konten untuk LeftColumnContent ContentPlaceHolder. Untuk menentukan konten untuk ContentPlaceHolder ini di dua halaman yang ada ini, kita perlu menambahkan kontrol Konten sendiri.
Tidak seperti kebanyakan kontrol web ASP.NET, Kotak Alat Pengembang Web Visual tidak menyertakan item kontrol Konten. Kita dapat mengetikkan markup deklaratif kontrol Konten secara manual ke dalam tampilan Sumber, tetapi pendekatan yang lebih mudah dan lebih cepat adalah menggunakan tampilan Desain. About.aspx Buka halaman dan beralih ke tampilan Desain. Seperti yang diilustrasikan Gambar 4, LeftColumnContent ContentPlaceHolder muncul di tampilan Desain; jika Anda mengarahkan mouse ke atasnya, judul yang ditampilkan berbunyi: "LeftColumnContent (Master)." Penyertaan "Master" dalam judul menunjukkan bahwa tidak ada kontrol Konten yang ditentukan di halaman untuk ContentPlaceHolder ini. Jika ada kontrol Konten untuk ContentPlaceHolder, seperti dalam kasus untuk MainContent, judul akan berbunyi: "ContentPlaceHolderID (Kustom)."
Untuk menambahkan kontrol Konten untuk LeftColumnContent ContentPlaceHolder ke About.aspx, perluas tag pintar ContentPlaceHolder dan klik tautan Buat Konten Kustom.
Gambar 04: Tampilan Desain untuk About.aspx Menampilkan LeftColumnContent ContentPlaceHolder (Klik untuk melihat gambar ukuran penuh)
Mengklik tautan Buat Konten Kustom menghasilkan kontrol Konten yang diperlukan di halaman dan mengatur propertinya ContentPlaceHolderID ke ContentPlaceHolder ID. Misalnya, mengklik tautan Buat Konten Kustom untuk LeftColumnContent wilayah dalam About.aspx menambahkan markup deklaratif berikut ke halaman:
<asp:Content ID="Content3" runat="server" contentplaceholderid="LeftColumnContent">
</asp:Content>
Menghilangkan Kontrol Konten
ASP.NET tidak mengharuskan semua halaman konten menyertakan kontrol Konten untuk masing-masing dan setiap ContentPlaceHolder yang ditentukan di halaman master. Jika kontrol Konten dihilangkan, mesin ASP.NET menggunakan markup yang ditentukan dalam ContentPlaceHolder di halaman master. Markup ini disebut sebagai konten default ContentPlaceHolder dan berguna dalam skenario di mana konten untuk beberapa wilayah umum di antara sebagian besar halaman, tetapi perlu disesuaikan untuk sejumlah kecil halaman. Langkah 3 menjelajahi menentukan konten default di halaman master.
Saat ini, Default.aspx berisi dua kontrol Konten untuk head dan MainContent ContentPlaceHolders; tidak memiliki kontrol Konten untuk LeftColumnContent. Akibatnya, ketika Default.aspx dirender LeftColumnContent konten default ContentPlaceHolder digunakan. Karena kita belum menentukan konten default apa pun untuk ContentPlaceHolder ini, efek bersihnya adalah tidak ada markup yang dikeluarkan untuk wilayah ini. Untuk memverifikasi perilaku ini, kunjungi Default.aspx melalui browser. Seperti yang ditunjukkan Gambar 5, tidak ada markup yang dipancarkan di kolom kiri di bawah bagian Berita.
Gambar 05: Tidak Ada Konten yang Dirender untuk LeftColumnContent ContentPlaceHolder (Klik untuk melihat gambar ukuran penuh)
Langkah 3: Menentukan Konten Default di Halaman Master
Beberapa desain situs web mencakup wilayah yang kontennya sama untuk semua halaman di situs kecuali untuk satu atau dua pengecualian. Pertimbangkan situs web yang mendukung akun pengguna. Situs seperti itu memerlukan halaman masuk di mana pengunjung dapat memasukkan kredensial mereka untuk masuk ke situs. Untuk mempercepat proses masuk, perancang situs web mungkin menyertakan kotak teks nama pengguna dan kata sandi di sudut kiri atas setiap halaman untuk memungkinkan pengguna masuk tanpa harus secara eksplisit mengunjungi halaman masuk. Meskipun kotak teks nama pengguna dan kata sandi ini berguna di sebagian besar halaman, mereka berlebihan di halaman masuk, yang sudah berisi kotak teks untuk kredensial pengguna.
Untuk menerapkan desain ini, Anda dapat membuat kontrol ContentPlaceHolder di sudut kiri atas halaman master. Setiap halaman yang diperlukan untuk menampilkan kotak teks nama pengguna dan kata sandi di sudut kiri atasnya akan membuat kontrol Konten untuk ContentPlaceHolder ini dan menambahkan antarmuka yang diperlukan. Halaman masuk, di sisi lain, akan menghilangkan penambahan kontrol Konten untuk ContentPlaceHolder ini atau akan membuat kontrol Konten tanpa markup yang ditentukan. Kelemahan dari pendekatan ini adalah kita harus ingat untuk menambahkan kotak teks nama pengguna dan kata sandi ke setiap halaman yang kita tambahkan ke situs (kecuali untuk halaman masuk). Ini meminta masalah. Kami mungkin lupa menambahkan kotak teks ini ke halaman atau dua atau, lebih buruk, kami mungkin tidak menerapkan antarmuka dengan benar (mungkin hanya menambahkan satu kotak teks, bukan dua).
Solusi yang lebih baik adalah menentukan kotak teks nama pengguna dan kata sandi sebagai konten default ContentPlaceHolder. Dengan demikian, kita hanya perlu mengambil alih konten default ini di beberapa halaman yang tidak menampilkan kotak teks nama pengguna dan kata sandi (halaman login, misalnya). Untuk mengilustrasikan menentukan konten default untuk kontrol ContentPlaceHolder, mari kita terapkan skenario yang baru saja dibahas.
Catatan
Sisa tutorial ini memperbarui situs web kami untuk menyertakan antarmuka masuk di kolom kiri untuk semua halaman tetapi halaman masuk. Namun, tutorial ini tidak memeriksa cara mengonfigurasi situs web untuk mendukung akun pengguna. Untuk informasi selengkapnya tentang topik ini, lihat tutorial Autentikasi, Otorisasi, Akun Pengguna, dan Peran saya.
Menambahkan ContentPlaceHolder dan Menentukan Konten Defaultnya
Site.master Buka halaman master dan tambahkan markup berikut ke kolom kiri antara bagian DateDisplay Label dan Pelajaran:
<asp:ContentPlaceHolder ID="QuickLoginUI" runat="server">
<asp:Login ID="QuickLogin" runat="server"
TitleText="<h3>Sign In</h3>"
FailureAction="RedirectToLoginPage">
</asp:Login>
</asp:ContentPlaceHolder>
Setelah menambahkan markup ini, tampilan Desain halaman master Anda akan terlihat mirip dengan Gambar 6.
Gambar 06: Halaman Master Menyertakan Kontrol Masuk (Klik untuk melihat gambar ukuran penuh)
ContentPlaceHolder ini, QuickLoginUI, memiliki kontrol Web Masuk sebagai konten defaultnya. Kontrol Masuk menampilkan antarmuka pengguna yang meminta nama pengguna dan kata sandi mereka bersama dengan tombol Masuk. Setelah mengklik tombol Masuk, kontrol Masuk secara internal memvalidasi kredensial pengguna terhadap API Keanggotaan. Untuk menggunakan kontrol Masuk ini dalam praktiknya, Maka, Anda perlu mengonfigurasi situs Anda untuk menggunakan Keanggotaan. Topik ini berada di luar cakupan tutorial ini; lihat tutorial Autentikasi, Otorisasi, Akun Pengguna, dan Peran saya untuk informasi selengkapnya tentang membangun aplikasi web yang mendukung akun pengguna.
Jangan ragu untuk menyesuaikan perilaku atau tampilan kontrol Login. Saya telah menetapkan dua propertinya: TitleText dan FailureAction. Nilai TitleText properti, yang default ke "Masuk", ditampilkan di bagian atas antarmuka pengguna kontrol. Saya telah mengatur properti ini sehingga menampilkan teks "Masuk" sebagai <h3> elemen. Properti FailureAction menunjukkan apa yang harus dilakukan jika kredensial pengguna tidak valid. Ini default ke nilai Refresh, yang meninggalkan pengguna di halaman yang sama dan menampilkan pesan kegagalan dalam kontrol Masuk. Saya telah mengubahnya menjadi RedirectToLoginPage, yang mengirim pengguna ke halaman masuk jika terjadi kredensial yang tidak valid. Saya lebih suka mengirim pengguna ke halaman masuk ketika pengguna mencoba masuk dari beberapa halaman lain, tetapi gagal, karena halaman masuk dapat berisi instruksi dan opsi tambahan yang tidak akan mudah masuk ke kolom kiri. Misalnya, halaman masuk mungkin menyertakan opsi untuk mengambil kata sandi yang terlupakan atau untuk membuat akun baru.
Membuat Halaman Masuk dan Mengganti Konten Default
Dengan halaman master selesai, langkah kami selanjutnya adalah membuat halaman masuk. Tambahkan halaman ASP.NET ke direktori akar situs Anda bernama Login.aspx, yang mengikatnya ke Site.master halaman master. Melakukannya akan membuat halaman dengan empat kontrol Konten, satu untuk setiap ContentPlaceHolders yang ditentukan dalam Site.master.
Tambahkan kontrol Masuk ke MainContent kontrol Konten. Demikian juga, jangan ragu untuk menambahkan konten apa pun ke wilayah tersebut LeftColumnContent . Namun, pastikan untuk membiarkan kontrol Konten untuk QuickLoginUI ContentPlaceHolder kosong. Ini akan memastikan bahwa kontrol Masuk tidak muncul di kolom kiri halaman masuk.
Setelah menentukan konten untuk MainContent wilayah dan LeftColumnContent , markup deklaratif halaman masuk Anda akan terlihat mirip dengan yang berikut ini:
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<h2>
Sign In</h2>
<p>
<asp:Login ID="Login1" runat="server" TitleText="">
</asp:Login>
</p>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="QuickLoginUI" Runat="Server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="LeftColumnContent" Runat="Server">
<h3>Sign In Tasks</h3>
<ul>
<li>Create a New Account</li>
<li>Recover Forgotten Password</li>
</ul>
<p>TODO: Turn the above text into links...</p>
</asp:Content>
Gambar 7 memperlihatkan halaman ini saat dilihat melalui browser. Karena halaman ini menentukan kontrol Konten untuk QuickLoginUI ContentPlaceHolder, halaman ini akan mengambil alih konten default yang ditentukan di halaman master. Efek bersihnya adalah bahwa kontrol Masuk yang ditampilkan dalam tampilan Desain halaman master (lihat Gambar 6) tidak dirender di halaman ini.
Gambar 07: Halaman Masuk Menekan QuickLoginUI Konten Default ContentPlaceHolder (Klik untuk melihat gambar ukuran penuh)
Menggunakan Konten Default di Halaman Baru
Kami ingin menampilkan kontrol Masuk di kolom kiri untuk semua halaman kecuali halaman Masuk. Untuk mencapai hal ini, semua halaman konten kecuali untuk halaman masuk harus menghilangkan kontrol Konten untuk QuickLoginUI ContentPlaceHolder. Dengan menghilangkan kontrol Konten, konten default ContentPlaceHolder akan digunakan sebagai gantinya.
Halaman konten kami yang ada - Default.aspx, , About.aspxdan MultipleContentPlaceHolders.aspx - tidak menyertakan kontrol QuickLoginUI Konten karena dibuat sebelum kami menambahkan kontrol ContentPlaceHolder ke halaman master. Oleh karena itu, halaman yang ada ini tidak perlu diperbarui. Namun, halaman baru yang ditambahkan ke situs web menyertakan kontrol Konten untuk QuickLoginUI ContentPlaceHolder, secara default. Oleh karena itu, kita harus ingat untuk menghapus kontrol Konten ini setiap kali kita menambahkan halaman konten baru (kecuali kita ingin mengambil alih konten default ContentPlaceHolder, seperti dalam kasus halaman login).
Untuk menghapus kontrol Konten, Anda dapat menghapus markup deklaratifnya secara manual dari tampilan Sumber atau, dari tampilan Desain, pilih tautan Default ke Konten Master dari tag pintarnya. Salah satu pendekatan menghapus kontrol Konten dari halaman dan menghasilkan efek bersih yang sama.
Gambar 8 ditampilkan Default.aspx saat dilihat melalui browser. Ingat bahwa Default.aspx hanya memiliki dua kontrol Konten yang ditentukan dalam markup deklaratifnya - satu untuk head dan satu untuk MainContent. Akibatnya, konten default untuk LeftColumnContent dan QuickLoginUI ContentPlaceHolders ditampilkan.
Gambar 08: Konten Default untuk LeftColumnContent dan QuickLoginUI ContentPlaceHolders ditampilkan (Klik untuk melihat gambar ukuran penuh)
Ringkasan
Model halaman master ASP.NET memungkinkan jumlah ContentPlaceHolders secara arbitrer di halaman master. Terlebih lagi, ContentPlaceHolders menyertakan konten default, yang dipancarkan jika tidak ada kontrol Konten yang sesuai di halaman konten. Dalam tutorial ini kita melihat cara menyertakan kontrol ContentPlaceHolder tambahan di halaman master dan cara menentukan kontrol Konten untuk ContentPlaceHolder baru ini di halaman ASP.NET baru dan yang sudah ada. Kami juga melihat menentukan konten default dalam ContentPlaceHolder, yang berguna dalam skenario di mana hanya sebagian kecil halaman yang perlu menyesuaikan konten standar di wilayah tertentu.
Dalam tutorial berikutnya kita akan memeriksa head ContentPlaceHolder secara lebih rinci, melihat cara menentukan judul, tag meta, dan header HTML lainnya secara deklaratif dan terprogram berdasarkan halaman demi halaman.
Selamat Pemrograman!
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. Peninjau prospek untuk tutorial ini adalah Suchi Banerjee. Tertarik untuk meninjau artikel MSDN saya yang akan datang? Jika demikian, drop saya baris di mitchell@4GuysFromRolla.com.