Membuat Tata Letak Halaman dengan Tampilkan Halaman Master (C#)

2023-07-13

Dalam tutorial ini, Anda mempelajari cara membuat tata letak halaman umum untuk beberapa halaman di aplikasi Anda dengan memanfaatkan halaman master tampilan. Anda dapat menggunakan halaman master tampilan, misalnya, untuk menentukan tata letak halaman dua kolom dan menggunakan tata letak dua kolom untuk semua halaman di aplikasi web Anda.

Membuat Tata Letak Halaman dengan Tampilkan Halaman Master

Dalam tutorial ini, Anda mempelajari cara membuat tata letak halaman umum untuk beberapa halaman di aplikasi Anda dengan memanfaatkan halaman master tampilan. Anda dapat menggunakan halaman master tampilan, misalnya, untuk menentukan tata letak halaman dua kolom dan menggunakan tata letak dua kolom untuk semua halaman di aplikasi web Anda.

Anda juga dapat memanfaatkan halaman master tampilan untuk berbagi konten umum di beberapa halaman di aplikasi Anda. Misalnya, Anda dapat menempatkan logo situs web Anda, tautan navigasi, dan iklan banner di halaman master tampilan. Dengan begitu, setiap halaman dalam aplikasi Anda akan menampilkan konten ini secara otomatis.

Dalam tutorial ini, Anda mempelajari cara membuat halaman master tampilan baru dan membuat halaman konten tampilan baru berdasarkan halaman master.

Membuat Halaman Master Tampilan

Mari kita mulai dengan membuat halaman master tampilan yang menentukan tata letak dua kolom. Anda menambahkan halaman master tampilan baru ke proyek MVC dengan mengklik kanan folder Views\Shared, memilih opsi menu Tambahkan, Item Baru, dan memilih templat Halaman Master Tampilan MVC (lihat Gambar 1).

Gambar 01: Menambahkan halaman master tampilan (Klik untuk melihat gambar ukuran penuh)

Anda dapat membuat lebih dari satu halaman master tampilan dalam aplikasi. Setiap halaman master tampilan dapat menentukan tata letak halaman yang berbeda. Misalnya, Anda mungkin ingin halaman tertentu memiliki tata letak dua kolom dan halaman lain memiliki tata letak tiga kolom.

Halaman master tampilan terlihat sangat mirip dengan tampilan MVC ASP.NET standar. Namun, tidak seperti tampilan normal, halaman master tampilan berisi satu atau beberapa <asp:ContentPlaceHolder> tag. Tag <contentplaceholder> digunakan untuk menandai area halaman master yang dapat ditimpa di halaman konten individual.

Misalnya, halaman master tampilan di Daftar 1 menentukan tata letak dua kolom. Ini berisi dua <contentplaceholder> tag. Satu <ContentPlaceHolder> untuk setiap kolom.

Daftar 1 – Views\Shared\Site.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="MvcApplication1.Views.Shared.Main" %>
<!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 id="Head1" runat="server">
     <title></title>

     <style type="text/css">

     html
     {
           background-color:gray;
     }

     .column
     {
          float:left;
          width:300px;
          border:solid 1px black;
          margin-right:10px;
          padding:5px;
          background-color:white;

          min-height:500px;
     }

     </style>

     <asp:ContentPlaceHolder ID="head" runat="server">
     </asp:ContentPlaceHolder>
</head>
<body>

     <h1>My Website</h1>

     <div class="column">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
          </asp:ContentPlaceHolder>
     </div>
     <div class="column">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
          </asp:ContentPlaceHolder>
     </div>

</body>
</html>

Isi halaman master tampilan di Daftar 1 berisi dua <div> tag yang sesuai dengan dua kolom. Kelas kolom Lembar Gaya Berskala diterapkan ke kedua <div> tag. Kelas ini didefinisikan dalam lembar gaya yang dideklarasikan di bagian atas halaman master. Anda bisa mempratinjau bagaimana halaman master tampilan akan dirender dengan beralih ke tampilan Desain. Klik tab Desain di kiri bawah editor kode sumber (lihat Gambar 2).

Gambar 02: Mempratinjau halaman master di perancang (Klik untuk melihat gambar ukuran penuh)

Membuat Halaman Konten Tampilan

Setelah Anda membuat halaman master tampilan, Anda bisa membuat satu atau beberapa halaman konten tampilan berdasarkan halaman master tampilan. Misalnya, Anda dapat membuat halaman konten tampilan Indeks untuk pengontrol Beranda dengan mengklik kanan folder Views\Home, memilih Tambahkan, Item Baru, memilih templat Halaman Konten Tampilan MVC , memasukkan nama Index.aspx, dan mengklik tombol Tambahkan (lihat Gambar 3).

Gambar 03: Menambahkan halaman konten tampilan (Klik untuk melihat gambar ukuran penuh)

Setelah Anda mengklik tombol Tambahkan, dialog baru muncul yang memungkinkan Anda memilih halaman master tampilan untuk dikaitkan dengan halaman konten tampilan (lihat Gambar 4). Anda bisa menavigasi ke halaman master tampilan Site.master yang kami buat di bagian sebelumnya.

Gambar 04: Memilih halaman master (Klik untuk melihat gambar ukuran penuh)

Setelah Anda membuat halaman konten tampilan baru berdasarkan halaman Site.master, Anda mendapatkan file di Daftar 2.

Daftar 2 – Views\Home\Index.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
</asp:Content>

Perhatikan bahwa tampilan ini berisi <asp:Content> tag yang sesuai dengan setiap <asp:ContentPlaceHolder> tag di halaman master tampilan. Setiap <asp:Content> tag menyertakan atribut ContentPlaceHolderID yang menunjuk ke atribut tertentu <asp:ContentPlaceHolder> yang ditimpanya.

Perhatikan, selain itu, bahwa halaman tampilan konten di Daftar 2 tidak berisi tag HTML pembukaan dan penutupan normal. Misalnya, tidak berisi pembukaan dan penutupan <html> atau <head> tag. Semua tag pembuka dan penutup normal terkandung dalam halaman master tampilan.

Konten apa pun yang ingin Anda tampilkan di halaman konten tampilan harus ditempatkan di dalam <asp:Content> tag. Jika Anda menempatkan HTML atau konten lain di luar tag ini, maka Anda akan mendapatkan kesalahan ketika Anda mencoba melihat halaman.

Anda tidak perlu mengambil alih setiap <asp:ContentPlaceHolder> tag dari halaman master di halaman tampilan konten. Anda hanya perlu mengambil <asp:ContentPlaceHolder> alih tag saat ingin mengganti tag dengan konten tertentu.

Misalnya, tampilan Indeks yang dimodifikasi di Daftar 3 hanya berisi dua <asp:Content> tag. <asp:Content> Masing-masing tag menyertakan beberapa teks.

Daftar 3 – Views\Home\Index.aspx (modified)

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcApplication1.Views.Home.Index" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

     <h1>Content in first column!</h1>

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">

     <h1>Content in second column!</h1>

</asp:Content>

Saat tampilan di Daftar 3 diminta, tampilan akan merender halaman di Gambar 5. Perhatikan bahwa tampilan merender halaman dengan dua kolom. Perhatikan, selain itu, bahwa konten dari halaman konten tampilan digabungkan dengan konten dari halaman master tampilan

Gambar 05: Halaman konten tampilan Indeks (Klik untuk melihat gambar ukuran penuh)

Mengubah Tampilan Isi Halaman Master

Salah satu masalah yang Anda temui hampir segera ketika bekerja dengan halaman master tampilan adalah masalah memodifikasi konten halaman master tampilan ketika halaman konten tampilan yang berbeda diminta. Misalnya, Anda ingin setiap halaman di aplikasi web Anda memiliki judul yang unik. Namun, judul dinyatakan dalam halaman master tampilan dan bukan di halaman tampilkan konten. Jadi, bagaimana Anda mengkustomisasi judul halaman untuk setiap halaman konten tampilan?

Ada dua cara agar Anda dapat mengubah judul yang ditampilkan oleh halaman konten tampilan. Pertama, Anda dapat menetapkan judul halaman ke atribut judul direktif yang <%@ page %> dideklarasikan di bagian atas halaman konten tampilan. Misalnya, jika Anda ingin menetapkan judul halaman "Situs Web Super Hebat" ke tampilan Indeks, maka Anda dapat menyertakan direktif berikut di bagian atas tampilan Indeks:

<%@ page title="Super Great Website" language="C#" masterpagefile="~/Views/Shared/Site.Master"
            autoeventwireup="true" codebehind="Index.aspx.cs" inherits="MvcApplication1.Views.Home.Index"%>

Saat tampilan Indeks dirender ke browser, judul yang diinginkan muncul di bilah judul browser:

Ada satu persyaratan penting yang harus dipenuhi halaman tampilan master agar atribut judul berfungsi. Halaman master tampilan harus berisi <head runat="server"> tag alih-alih tag normal <head> untuk header-nya. <head> Jika tag tidak menyertakan atribut runat="server" maka judul tidak akan muncul. Halaman master tampilan default menyertakan tag yang diperlukan <head runat="server"> .

Pendekatan alternatif untuk memodifikasi konten halaman master dari halaman konten tampilan individual adalah dengan membungkus wilayah yang ingin Anda ubah dalam <asp:ContentPlaceHolder> tag. Misalnya, bayangkan Anda ingin mengubah tidak hanya judul, tetapi juga tag meta, yang dirender oleh halaman tampilan master. Halaman tampilan master di Daftar 4 berisi <asp:ContentPlaceHolder> tag dalam tagnya <head> .

Daftar 4 – Views\Shared\Site2.master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site2.Master.cs" Inherits="MvcApplication1.Views.Shared.Site2" %>
<!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>

     <asp:ContentPlaceHolder ID="head" runat="server">
          <title>Please change my title</title>
          <meta name="description" content="Please provide a description" />
          <meta name="keywords" content="keyword1,keyword2" />
     </asp:ContentPlaceHolder>
</head>
<body>
     <div>

          <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

          </asp:ContentPlaceHolder>
     </div>
</body>
</html>

Perhatikan bahwa <asp:ContentPlaceHolder> tag di Daftar 4 menyertakan konten default: judul default dan tag meta default. Jika Anda tidak mengambil alih tag ini <asp:ContentPlaceHolder> di halaman konten tampilan individual, maka konten default akan ditampilkan.

Halaman tampilan konten di Daftar 5 mengambil alih <asp:ContentPlaceHolder> tag untuk menampilkan judul kustom dan tag meta kustom.

Daftar 5 – Views\Home\Index2.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site2.Master" AutoEventWireup="true" CodeBehind="Index2.aspx.cs" Inherits="MvcApplication1.Views.Home.Index2" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
     <title>The Index2 Page</title>
     <meta name="description" content="Description of Index2 page" />
     <meta name="keywords" content="asp.net,mvc,cool,groovy" />    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

     Just some content in the body of the page.

</asp:Content>

Ringkasan

Tutorial ini memberi Anda pengantar dasar untuk melihat halaman master dan melihat halaman konten. Anda mempelajari cara membuat halaman master tampilan baru dan membuat halaman konten tampilan berdasarkan halaman tersebut. Kami juga memeriksa bagaimana Anda dapat mengubah konten halaman master tampilan dari halaman konten tampilan tertentu.

Sebelumnya Berikutnya

Bagikan melalui

Membuat Tata Letak Halaman dengan Tampilkan Halaman Master (C#)