Bagikan melalui

Membuat dan Menggunakan Pembantu di Situs Halaman Web (Razor) ASP.NET

oleh Tom FitzMacken

Artikel ini menjelaskan cara membuat pembantu di situs web ASP.NET Web Pages (Razor). Pembantu adalah komponen yang dapat digunakan kembali yang menyertakan kode dan markup untuk melakukan tugas yang mungkin membosankan atau kompleks.

Yang akan Anda pelajari:

  • Cara membuat dan menggunakan pembantu sederhana.

Ini adalah fitur ASP.NET yang diperkenalkan dalam artikel:

  • Sintaksnya @helper .

Versi perangkat lunak yang digunakan dalam tutorial

  • ASP.NET Web Pages (Razor) 3

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

Gambaran Umum Pembantu

Jika Anda perlu melakukan tugas yang sama pada halaman yang berbeda di situs Anda, Anda bisa menggunakan pembantu. ASP.NET Halaman Web mencakup sejumlah pembantu, dan masih banyak lagi yang dapat Anda unduh dan instal. (Daftar pembantu bawaan di Halaman Web ASP.NET tercantum dalam Referensi Cepat API ASP.NET.) Jika tidak ada pembantu yang ada yang memenuhi kebutuhan Anda, Anda dapat membuat pembantu Anda sendiri.

Pembantu memungkinkan Anda menggunakan blok kode umum di beberapa halaman. Misalkan di halaman Anda sering ingin membuat item catatan yang terpisah dari paragraf normal. Mungkin catatan dibuat sebagai <div> elemen yang ditata sebagai kotak dengan batas. Daripada menambahkan markup yang sama ini ke halaman setiap kali Anda ingin menampilkan catatan, Anda dapat mengemas markup sebagai pembantu. Anda kemudian dapat menyisipkan catatan dengan satu baris kode di mana saja Anda membutuhkannya.

Menggunakan pembantu seperti ini membuat kode di setiap halaman Anda lebih sederhana dan lebih mudah dibaca. Ini juga memudahkan untuk mempertahankan situs Anda, karena jika Anda perlu mengubah tampilan catatan, Anda dapat mengubah markup di satu tempat.

Membuat Pembantu

Prosedur ini menunjukkan kepada Anda cara membuat pembantu yang membuat catatan, seperti yang baru saja dijelaskan. Ini adalah contoh sederhana, tetapi pembantu kustom dapat menyertakan markup dan kode ASP.NET yang Anda butuhkan.

  1. Di folder akar situs web, buat folder bernama App_Code. Ini adalah nama folder yang dipesan di ASP.NET di mana Anda dapat menempatkan kode untuk komponen seperti pembantu.

  2. Di folder App_Code buat file .cshtml baru dan beri nama MyHelpers.cshtml.

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

    @helper MakeNote(string content) {
  <div class="note" 
       style="border: 1px solid black; width: 90%; padding: 5px; margin-left: 15px;">
    <p>
      <strong>Note</strong>&nbsp;&nbsp; @content
    </p>
  </div>
}

    Kode menggunakan @helper sintaks untuk mendeklarasikan pembantu baru bernama MakeNote. Pembantu khusus ini memungkinkan Anda meneruskan parameter bernama content yang dapat berisi kombinasi teks dan markup. Pembantu menyisipkan string ke dalam isi catatan menggunakan @content variabel .

    Perhatikan bahwa file diberi nama MyHelpers.cshtml, tetapi pembantu diberi nama MakeNote. Anda dapat memasukkan beberapa pembantu kustom ke dalam satu file.

  4. Simpan dan tutup file.

Menggunakan Pembantu di Halaman

  1. Di folder akar, buat file kosong baru yang disebut TestHelper.cshtml.

  2. Tambahkan kode berikut ke file:

    <!DOCTYPE html>
  <head>
    <title>Test Helpers Page</title>
  </head>
  <body>
    <p>This is some opening paragraph text.</p>

    <!-- Insert the call to your note helper here. -->
    @MyHelpers.MakeNote("My test note content.")

    <p>This is some following text.</p>
  </body>
</html>

    Untuk memanggil pembantu yang Anda buat, gunakan @ diikuti dengan nama file tempat pembantu berada, titik, lalu nama pembantu. (Jika Anda memiliki beberapa folder di folder App_Code , Anda dapat menggunakan sintaks @FolderName.FileName.HelperName untuk memanggil pembantu Anda dalam tingkat folder berlapis apa pun). Teks yang Anda tambahkan dalam tanda kutip dalam tanda kurung adalah teks yang akan ditampilkan pembantu sebagai bagian dari catatan di halaman web.

  3. Simpan halaman dan jalankan di browser. Pembantu menghasilkan item catatan tepat di mana Anda memanggil pembantu: di antara dua paragraf.

    Cuplikan layar memperlihatkan halaman di browser dan bagaimana markup yang dihasilkan pembantu yang meletakkan kotak di sekitar teks yang ditentukan.

Sumber Daya Tambahan

Menu horizontal sebagai pembantu Razor. Entri blog oleh Mike Pope ini menunjukkan cara membuat menu horizontal sebagai pembantu menggunakan markup, CSS, dan kode.

Memanfaatkan HTML5 di ASP.NET Pembantu Halaman Web untuk WebMatrix dan ASP.NET MVC3. Entri blog oleh Sam Abraham ini menunjukkan pembantu yang merender elemen HTML5 Canvas .

The Difference Between @Helpers and @Functions in WebMatrix. Entri blog oleh Mike Brind ini menguraikan @helper sintaks dan @function sintaksis dan kapan harus menggunakan masing-masing.