Bagikan melalui

Membuat Tata Letak yang Konsisten di Situs Halaman Web (Razor) ASP.NET

oleh Tom FitzMacken

Artikel ini menjelaskan bagaimana Anda dapat menggunakan halaman tata letak di situs web ASP.NET Web Pages (Razor) untuk membuat blok konten yang dapat digunakan kembali (seperti header dan footer) dan untuk membuat tampilan yang konsisten untuk semua halaman di situs.

Yang akan Anda pelajari:

  • Cara membuat blok konten yang dapat digunakan kembali seperti header dan footer.
  • Cara membuat tampilan yang konsisten untuk semua halaman di situs Anda menggunakan tata letak.
  • Cara meneruskan data pada durasi ke halaman tata letak.

Ini adalah fitur ASP.NET yang diperkenalkan dalam artikel:

  • Blok konten, yang merupakan file yang berisi konten berformat HTML untuk disisipkan dalam beberapa halaman.
  • Halaman tata letak, yang merupakan halaman yang berisi konten berformat HTML yang dapat dibagikan oleh halaman di situs web.
  • Metode RenderPage, RenderBody, dan RenderSection , yang memberi tahu ASP.NET tempat menyisipkan elemen halaman.
  • PageData Kamus yang memungkinkan Anda berbagi data antara blok konten dan halaman tata letak.

Versi perangkat lunak yang digunakan dalam tutorial

  • ASP.NET Web Pages (Razor) 3

Tutorial ini juga berfungsi dengan ASP.NET Web Pages 2.

Tentang Halaman Tata Letak

Banyak situs web memiliki konten yang ditampilkan di setiap halaman, seperti header dan footer, atau kotak yang memberi tahu pengguna bahwa mereka masuk. ASP.NET memungkinkan Anda membuat file terpisah dengan blok konten yang dapat berisi teks, markup, dan kode, seperti halaman web biasa. Anda kemudian dapat menyisipkan blok isi di halaman lain di situs tempat Anda ingin informasi tersebut muncul. Dengan begitu Anda tidak perlu menyalin dan menempelkan konten yang sama ke setiap halaman. Membuat konten umum seperti ini juga memudahkan untuk memperbarui situs Anda. Jika Anda perlu mengubah konten, Anda hanya dapat memperbarui satu file, dan perubahan kemudian tercermin di mana-mana konten telah disisipkan.

Diagram berikut menunjukkan cara kerja blok konten. Saat browser meminta halaman dari server web, ASP.NET menyisipkan blok konten pada titik di mana RenderPage metode dipanggil di halaman utama. Halaman selesai (digabungkan) kemudian dikirim ke browser.

Diagram konseptual memperlihatkan bagaimana metode RenderPage menyisipkan halaman yang direferensikan ke halaman saat ini.

Dalam prosedur ini, Anda akan membuat halaman yang mereferensikan dua blok konten (header dan footer) yang terletak di file terpisah. Anda dapat menggunakan blok konten yang sama ini di halaman mana pun di situs Anda. Setelah selesai, Anda akan mendapatkan halaman seperti ini:

Cuplikan layar memperlihatkan halaman di browser yang dihasilkan dari menjalankan halaman yang menyertakan panggilan ke metode RenderPage.

  1. Di folder akar situs web Anda, buat file bernama Index.cshtml.

  2. Ganti markup yang sudah ada dengan yang berikut ini:

    <!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

  </body>
</html>

  3. Di folder akar, buat folder bernama Bersama.

    Catatan

    Adalah praktik umum untuk menyimpan file yang dibagikan di antara halaman web dalam folder bernama Bersama.

  4. Di folder Bersama , buat file bernama _Header.cshtml.

  5. Ganti konten yang sudah ada dengan yang berikut ini:

    <div class="header">This is header text.</div>

    Perhatikan bahwa nama file adalah _Header.cshtml, dengan garis bawah (_) sebagai awalan. ASP.NET tidak akan mengirim halaman ke browser jika namanya dimulai dengan garis bawah. Ini mencegah orang meminta (secara tidak sengaja atau sebaliknya) halaman ini secara langsung. Ada baiknya menggunakan garis bawah untuk memberi nama halaman yang memiliki blok konten di dalamnya, karena Anda tidak benar-benar ingin pengguna dapat meminta halaman-halaman ini — halaman tersebut benar-benar ada untuk disisipkan ke halaman lain.

  6. Di folder Bersama , buat file bernama _Footer.cshtml dan ganti konten dengan yang berikut ini:

    <div class="footer">&copy; 2012 Contoso Pharmaceuticals. All rights reserved.
</div>

  7. Di halaman Index.cshtml , tambahkan dua panggilan ke metode , seperti yang RenderPage ditunjukkan di sini:

    <!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

    @RenderPage("~/Shared/_Header.cshtml")

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

    @RenderPage("~/Shared/_Footer.cshtml")

  </body>
</html>

    Ini memperlihatkan cara menyisipkan blok konten ke halaman web. Anda memanggil RenderPage metode dan meneruskannya nama file yang kontennya ingin Anda sisipkan pada saat itu. Di sini, Anda menyisipkan konten file _Header.cshtml dan _Footer.cshtml ke dalam file Index.cshtml .

  8. Jalankan halaman Index.cshtml di browser. (Di WebMatrix, di ruang kerja File , klik kanan file lalu pilih Luncurkan di browser.)

  9. Di browser, lihat sumber halaman. (Misalnya, di Internet Explorer, klik kanan halaman lalu klik Tampilkan Sumber.)

    Ini memungkinkan Anda melihat markup halaman web yang dikirim ke browser, yang menggabungkan markup halaman indeks dengan blok konten. Contoh berikut menunjukkan sumber halaman yang dirender untuk Index.cshtml. Panggilan ke RenderPage yang Anda sisipkan ke index.cshtml telah diganti dengan konten aktual file header dan footer.

    <!DOCTYPE html>
<html>
  <head>
    <title>Main Page</title>
  </head>
  <body>

  <div class="header">
    This is header text.
  </div>

    <h1>Index Page Content</h1>
    <p>This is the content of the main page.</p>

  <div class="footer">
    &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
  </div>

  </body>
</html>

Membuat Tampilan yang Konsisten Menggunakan Halaman Tata Letak

Sejauh ini Anda telah melihat bahwa mudah untuk menyertakan konten yang sama di beberapa halaman. Pendekatan yang lebih terstruktur untuk membuat pencarian situs yang konsisten adalah dengan menggunakan halaman tata letak. Halaman tata letak menentukan struktur halaman web, tetapi tidak berisi konten aktual apa pun. Setelah membuat halaman tata letak, Anda bisa membuat halaman web yang berisi konten lalu menautkannya ke halaman tata letak. Ketika halaman ini ditampilkan, halaman tersebut akan diformat sesuai dengan halaman tata letak. (Dalam pengertian ini, halaman tata letak bertindak sebagai semacam templat untuk konten yang ditentukan di halaman lain.)

Halaman tata letak sama seperti halaman HTML apa pun, kecuali bahwa halaman tersebut berisi panggilan ke RenderBody metode . Posisi RenderBody metode di halaman tata letak menentukan di mana informasi dari halaman konten akan disertakan.

Diagram berikut menunjukkan bagaimana halaman konten dan halaman tata letak digabungkan pada durasi untuk menghasilkan halaman web yang sudah selesai. Browser meminta halaman konten. Halaman konten memiliki kode di dalamnya yang menentukan halaman tata letak yang akan digunakan untuk struktur halaman. Di halaman tata letak, konten disisipkan pada titik di mana RenderBody metode dipanggil. Blok konten juga dapat dimasukkan ke dalam halaman tata letak dengan memanggil RenderPage metode , seperti yang Anda lakukan di bagian sebelumnya. Ketika halaman web selesai, halaman web dikirim ke browser.

Cuplikan layar memperlihatkan halaman di browser yang dihasilkan dari menjalankan halaman yang menyertakan panggilan ke metode RenderBody.

Prosedur berikut ini memperlihatkan cara membuat halaman tata letak dan menautkan halaman konten ke dalamnya.

  1. Di folder Bersama situs web Anda, buat file bernama _Layout1.cshtml.

  2. Ganti konten yang sudah ada dengan yang berikut ini:

    <!DOCTYPE html>
<html>
  <head>
    <title>Structured Content </title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    @RenderPage("~/Shared/_Header2.cshtml")
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

    Anda menggunakan metode di RenderPage halaman tata letak untuk menyisipkan blok konten. Halaman tata letak hanya dapat berisi satu panggilan ke RenderBody metode .

  3. Di folder Bersama , buat file bernama _Header2.cshtml dan ganti konten yang sudah ada dengan yang berikut ini:

    <div id="header">Creating a Consistent Look</div>

  4. Di folder akar, buat folder baru dan beri nama Gaya.

  5. Di folder Gaya , buat file bernama Site.css dan tambahkan definisi gaya berikut:

    h1 {
    border-bottom: 3px solid #cc9900;
    font: 2.75em/1.75em Georgia, serif;
    color: #996600;
}

ul {
    list-style-type: none;
}

body {
    margin: 0;
    padding: 1em;
    background-color: #ffffff;
    font: 75%/1.75em "Trebuchet MS", Verdana, sans-serif;
    color: #006600;
}

#list {
    margin: 1em 0 7em -3em;
    padding: 1em 0 0 0;
    background-color: #ffffff;
    color: #996600;
    width: 25%;
    float: left;
}

#header, #footer {
    margin: 0;
    padding: 0;
    color: #996600;
}

    Definisi gaya ini hanya ada di sini untuk menunjukkan bagaimana lembar gaya dapat digunakan dengan halaman tata letak. Jika mau, Anda dapat menentukan gaya Anda sendiri untuk elemen-elemen ini.

  6. Di folder akar, buat file bernama Content1.cshtml dan ganti konten yang ada dengan yang berikut ini:

    @{
    Layout = "~/Shared/_Layout1.cshtml";
}

<h1> Structured Content </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

    Ini adalah halaman yang akan menggunakan halaman tata letak. Blok kode di bagian atas halaman menunjukkan halaman tata letak mana yang akan digunakan untuk memformat konten ini.

  7. Jalankan Content1.cshtml di browser. Halaman yang dirender menggunakan format dan lembar gaya yang ditentukan dalam _Layout1.cshtml dan teks (konten) yang ditentukan dalam Content1.cshtml.

    [Cuplikan layar menunjukkan menjalankan Content 1 dot CSHTML di browser.]

    Anda dapat mengulangi langkah 6 untuk membuat halaman konten tambahan yang kemudian dapat berbagi halaman tata letak yang sama.

    Catatan

    Anda bisa menyetel situs Anda sehingga Anda bisa secara otomatis menggunakan halaman tata letak yang sama untuk semua halaman konten dalam folder. Untuk detailnya, lihat Menyesuaikan Perilaku Site-Wide untuk Halaman Web ASP.NET.

Mendesain Halaman Tata Letak yang Memiliki Beberapa Bagian Konten

Halaman konten dapat memiliki beberapa bagian, yang berguna jika Anda ingin menggunakan tata letak yang memiliki beberapa area dengan konten yang dapat diganti. Di halaman konten, Anda memberi nama unik pada setiap bagian. (Bagian default dibiarkan tidak disebutkan namanya.) Di halaman tata letak, Anda menambahkan RenderBody metode untuk menentukan di mana bagian yang tidak disebutkan namanya (default) akan muncul. Anda kemudian menambahkan metode terpisah RenderSection untuk merender bagian bernama satu per satu.

Diagram berikut menunjukkan cara ASP.NET menangani konten yang dibagi menjadi beberapa bagian. Setiap bagian bernama terkandung dalam blok bagian di halaman konten. (Mereka diberi nama Header dan List dalam contoh.) Kerangka kerja menyisipkan bagian konten ke halaman tata letak pada titik di mana RenderSection metode dipanggil. Bagian tanpa nama (default) disisipkan pada titik di mana RenderBody metode dipanggil, seperti yang Anda lihat sebelumnya.

Diagram konseptual memperlihatkan bagaimana metode RenderSection menyisipkan bagian referensi ke halaman saat ini.

Prosedur ini memperlihatkan cara membuat halaman konten yang memiliki beberapa bagian konten dan cara merendernya menggunakan halaman tata letak yang mendukung beberapa bagian konten.

  1. Di folder Bersama , buat file bernama _Layout2.cshtml.

  2. Ganti konten yang sudah ada dengan yang berikut ini:

    <!DOCTYPE html>
<html>
  <head>
    <title>Multisection Content</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
    <div id="list">
      @RenderSection("list")
    </div>
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      &copy; 2012 Contoso Pharmaceuticals. All rights reserved.
    </div>
  </body>
</html>

    Anda menggunakan RenderSection metode untuk merender bagian header dan daftar.

  3. Di folder akar, buat file bernama Content2.cshtml dan ganti konten yang ada dengan yang berikut ini:

    @{
    Layout = "~/Shared/_Layout2.cshtml";
}

@section header {
    <div id="header">
        Creating a Consistent Look
    </div>
}

@section list {
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Consecte</li>
        <li>Eiusmod</li>
        <li>Tempor</li>
        <li>Incididu</li>
    </ul>
}

<h1>Multisection Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

    Halaman konten ini berisi blok kode di bagian atas halaman. Setiap bagian bernama terkandung dalam blok bagian. Halaman lainnya berisi bagian konten default (tidak disebutkan namanya).

  4. Jalankan Content2.cshtml di browser.

    Cuplikan layar memperlihatkan halaman di browser yang dihasilkan dari menjalankan halaman yang menyertakan panggilan ke metode RenderSection.

Membuat Bagian Konten Opsional

Biasanya, bagian yang Anda buat di halaman konten harus cocok dengan bagian yang ditentukan di halaman tata letak. Anda bisa mendapatkan kesalahan jika salah satu hal berikut ini terjadi:

  • Halaman konten berisi bagian yang tidak memiliki bagian terkait di halaman tata letak.
  • Halaman tata letak berisi bagian yang tidak ada kontennya.
  • Halaman tata letak menyertakan panggilan metode yang mencoba merender bagian yang sama lebih dari sekali.

Namun, Anda dapat mengganti perilaku ini untuk bagian bernama dengan mendeklarasikan bagian menjadi opsional di halaman tata letak. Ini memungkinkan Anda menentukan beberapa halaman konten yang dapat berbagi halaman tata letak tetapi mungkin atau mungkin tidak memiliki konten untuk bagian tertentu.

  1. Buka Content2.cshtml dan hapus bagian berikut:

    @section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

  2. Simpan halaman lalu jalankan di browser. Pesan kesalahan ditampilkan, karena halaman konten tidak menyediakan konten untuk bagian yang ditentukan di halaman tata letak, yaitu bagian header.

    Cuplikan layar yang memperlihatkan kesalahan yang terjadi jika Anda menjalankan halaman yang memanggil metode RenderSection tetapi bagian terkait tidak disediakan.

  3. Di folder Bersama , buka halaman _Layout2.cshtml dan ganti baris ini:

    @RenderSection("header")

    dengan kode berikut:

    @RenderSection("header", required: false)

    Sebagai alternatif, Anda dapat mengganti baris kode sebelumnya dengan blok kode berikut, yang menghasilkan hasil yang sama:

    @if (IsSectionDefined("header")) {
    @RenderSection("header")
}

  4. Jalankan halaman Content2.cshtml di browser lagi. (Jika Anda masih membuka halaman ini di browser, Anda dapat merefreshnya.) Kali ini halaman ditampilkan tanpa kesalahan, meskipun tidak memiliki header.

Meneruskan Data ke Halaman Tata Letak

Anda mungkin memiliki data yang ditentukan di halaman konten yang perlu Anda rujuk di halaman tata letak. Jika demikian, Anda perlu meneruskan data dari halaman konten ke halaman tata letak. Misalnya, Anda mungkin ingin menampilkan status masuk pengguna, atau Anda mungkin ingin menampilkan atau menyembunyikan area konten berdasarkan input pengguna.

Untuk meneruskan data dari halaman konten ke halaman tata letak, Anda bisa memasukkan nilai ke PageData dalam properti halaman konten. Properti PageData adalah kumpulan pasangan nama/nilai yang menyimpan data yang ingin Anda lewati di antara halaman. Di halaman tata letak, Anda kemudian dapat membaca nilai dari PageData properti .

Berikut adalah diagram lain. Yang ini memperlihatkan bagaimana ASP.NET bisa menggunakan PageData properti untuk meneruskan nilai dari halaman konten ke halaman tata letak. Saat ASP.NET mulai membangun halaman web, halaman web akan PageData membuat koleksi. Di halaman konten, Anda menulis kode untuk memasukkan data ke PageData dalam koleksi. Nilai dalam PageData koleksi juga dapat diakses oleh bagian lain di halaman konten atau dengan blok konten tambahan.

Diagram konseptual yang memperlihatkan bagaimana halaman konten dapat mengisi kamus PageData dan meneruskan informasi tersebut ke halaman tata letak.

Prosedur berikut ini memperlihatkan cara meneruskan data dari halaman konten ke halaman tata letak. Saat halaman berjalan, halaman akan menampilkan tombol yang memungkinkan pengguna menyembunyikan atau menampilkan daftar yang ditentukan di halaman tata letak. Saat pengguna mengklik tombol , tombol tersebut menetapkan nilai true/false (Boolean) di PageData properti . Halaman tata letak membaca nilai tersebut, dan jika salah, menyembunyikan daftar. Nilai juga digunakan di halaman konten untuk menentukan apakah akan menampilkan tombol Sembunyikan Daftar atau tombol Perlihatkan Daftar .

[Cuplikan layar memperlihatkan halaman Meneruskan Data.]

  1. Di folder akar, buat file bernama Content3.cshtml dan ganti konten yang ada dengan yang berikut ini:

    @{
    Layout = "~/Shared/_Layout3.cshtml";

    PageData["Title"] = "Passing Data";
    PageData["ShowList"] = true;

    if (IsPost) {
        if (Request.Form["list"] == "off") {
            PageData["ShowList"] = false;
        }
    }
}

@section header {
  <div id="header">
    Creating a Consistent Look
  </div>
}

<h1>@PageData["Title"]</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.</p>

@if (PageData["ShowList"] == true) {
    <form method="post" action="">
      <input type="hidden" name="list" value="off" />
      <input type="submit" value="Hide List" />
    </form>
}
else {
    <form method="post" action="">
      <input type="hidden" name="list" value="on" />
      <input type="submit" value="Show List" />
    </form>
}

    Kode menyimpan dua bagian data di PageData properti — judul halaman web dan benar atau salah untuk menentukan apakah akan menampilkan daftar.

    Perhatikan bahwa ASP.NET memungkinkan Anda memasukkan markup HTML ke halaman secara kondisional menggunakan blok kode. Misalnya, if/else blok dalam isi halaman menentukan formulir mana yang akan ditampilkan tergantung pada apakah PageData["ShowList"] diatur ke true.

  2. Di folder Bersama , buat file bernama _Layout3.cshtml dan ganti konten yang ada dengan yang berikut ini:

    <!DOCTYPE html>
<html>
  <head>
    <title>@PageData["Title"]</title>
    <link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      @RenderSection("header")
    </div>
      @if (PageData["ShowList"] == true) {
          <div id="list">
            @RenderPage("~/Shared/_List.cshtml")
          </div>
      }
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
      <p>&copy; 2012 Contoso Pharmaceuticals. All rights reserved.</p>
    </div>
  </body>
</html>

    Halaman tata letak menyertakan ekspresi dalam <title> elemen yang mendapatkan nilai judul dari PageData properti . Ini juga menggunakan ShowList nilai PageData properti untuk menentukan apakah akan menampilkan blok konten daftar.

  3. Di folder Bersama , buat file bernama _List.cshtml dan ganti konten yang sudah ada dengan yang berikut ini:

    <ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Consecte</li>
  <li>Eiusmod</li>
  <li>Tempor</li>
  <li>Incididu</li>
</ul>

  4. Jalankan halaman Content3.cshtml di browser. Halaman ditampilkan dengan daftar yang terlihat di sisi kiri halaman dan tombol Sembunyikan Daftar di bagian bawah.

    Cuplikan layar memperlihatkan halaman yang menyertakan daftar dan tombol yang berbunyi 'Sembunyikan Daftar'.

  5. Klik Sembunyikan Daftar. Daftar menghilang dan tombol berubah menjadi Perlihatkan Daftar.

    Cuplikan layar memperlihatkan halaman yang tidak menyertakan daftar dan tombol yang berbunyi 'Tampilkan Daftar'.

  6. Klik tombol Perlihatkan Daftar , dan daftar ditampilkan lagi.

Sumber Daya Tambahan

Menyesuaikan Perilaku Site-Wide untuk Halaman Web ASP.NET