Menyesuaikan Perilaku Site-Wide untuk Situs Halaman Web (Razor) ASP.NET

2023-07-13

Artikel ini menjelaskan cara membuat pengaturan sisi situs untuk halaman di situs web ASP.NET Web Pages (Razor).

Yang akan Anda pelajari:

Cara menjalankan kode yang memungkinkan Anda mengatur nilai (nilai global atau pengaturan pembantu) untuk semua halaman dalam situs.

Cara menjalankan kode yang memungkinkan Anda mengatur nilai untuk semua halaman dalam folder.

Cara menjalankan kode sebelum dan sesudah halaman dimuat.

Cara mengirim kesalahan ke halaman kesalahan pusat.

Cara menambahkan autentikasi ke semua halaman dalam folder.

Versi perangkat lunak yang digunakan dalam tutorial

Halaman Web ASP.NET (Razor) 2

WebMatrix 3

Pustaka Pembantu Web ASP.NET (paket NuGet)

Tutorial ini juga berfungsi dengan ASP.NET Web Pages 3 dan Visual Studio 2013 (atau Visual Studio Express 2013 for Web), kecuali Anda tidak dapat menggunakan Pustaka ASP.NET Web Helpers.

Menambahkan Kode Startup Situs Web untuk Halaman Web ASP.NET

Untuk sebagian besar kode yang Anda tulis di halaman web ASP.NET, halaman individual dapat berisi semua kode yang diperlukan untuk halaman tersebut. Misalnya, jika halaman mengirim pesan email, dimungkinkan untuk meletakkan semua kode untuk operasi tersebut dalam satu halaman. Ini dapat mencakup kode untuk menginisialisasi pengaturan untuk mengirim email (yaitu, untuk server SMTP) dan untuk mengirim pesan email.

Namun, dalam beberapa situasi, Anda mungkin ingin menjalankan beberapa kode sebelum halaman mana pun di situs berjalan. Ini berguna untuk mengatur nilai yang dapat digunakan di mana saja di situs (disebut sebagai nilai global.) Misalnya, beberapa pembantu mengharuskan Anda memberikan nilai seperti pengaturan email atau kunci akun. Sangat berguna untuk menyimpan pengaturan ini dalam nilai global.

Anda dapat melakukan ini dengan membuat halaman bernama _AppStart.cshtml di akar situs. Jika halaman ini ada, halaman berjalan pertama kali halaman mana pun di situs diminta. Oleh karena itu, ini adalah tempat yang baik untuk menjalankan kode untuk menetapkan nilai global. (Karena _AppStart.cshtml memiliki awalan garis bawah, ASP.NET tidak akan mengirim halaman ke browser meskipun pengguna memintanya secara langsung.)

Diagram berikut menunjukkan cara kerja halaman _AppStart.cshtml . Ketika permintaan masuk untuk halaman, dan jika ini adalah permintaan pertama untuk halaman mana pun di situs, ASP.NET terlebih dahulu memeriksa apakah halaman _AppStart.cshtml ada. Jika demikian, kode apa pun di halaman _AppStart.cshtml berjalan, lalu halaman yang diminta berjalan.

[Gambar menunjukkan cara kerja App Star dot CSHTML.]

Mengatur Nilai Global untuk Situs Web Anda

Di folder akar situs web WebMatrix, buat file bernama _AppStart.cshtml. File harus berada di akar situs.
Ganti konten yang sudah ada dengan yang berikut ini:
```
@{
  AppState["customAppName"] = "Application Name";
}
```
Kode ini menyimpan nilai dalam AppState kamus, yang secara otomatis tersedia untuk semua halaman di situs. Perhatikan bahwa file _AppStart.cshtml tidak memiliki markup di dalamnya. Halaman akan menjalankan kode lalu mengalihkan ke halaman yang awalnya diminta.

Catatan

Berhati-hatilah saat Anda memasukkan kode ke dalam file _AppStart.cshtml . Jika terjadi kesalahan dalam kode dalam file _AppStart.cshtml , situs web tidak akan dimulai.
Di folder akar, buat halaman baru bernama AppName.cshtml.

Ganti markup dan kode default dengan yang berikut ini:

<!DOCTYPE html>
<html>
    <head>
        <title>Show Application Name</title>
    </head>
    <body>
        <h1>@AppState["customAppName"]</h1>
    </body>
</html>

Kode ini mengekstrak nilai dari AppState objek yang Anda tetapkan di halaman _AppStart.cshtml .

Jalankan halaman AppName.cshtml di browser. (Pastikan halaman dipilih di ruang kerja File sebelum Anda menjalankannya.) Halaman menampilkan nilai global.

Mengatur Nilai untuk Pembantu

Penggunaan yang baik untuk file _AppStart.cshtml adalah mengatur nilai untuk pembantu yang Anda gunakan di situs Anda dan yang harus diinisialisasi. Contoh umumnya adalah pengaturan email untuk pembantu WebMail dan kunci privat dan publik untuk pembantu ReCaptcha . Dalam kasus seperti ini, Anda dapat mengatur nilai sekali di _AppStart.cshtml lalu nilai tersebut sudah diatur untuk semua halaman di situs Anda.

Prosedur ini memperlihatkan kepada Anda cara mengatur WebMail pengaturan secara global. (Untuk informasi selengkapnya tentang menggunakan pembantuWebMail, lihat Menambahkan Email ke Situs Halaman Web ASP.NET.)

Tambahkan Pustaka Pembantu Web ASP.NET ke situs web Anda seperti yang dijelaskan dalam Menginstal Pembantu di Situs Halaman Web ASP.NET, jika Anda belum menambahkannya.
Jika Anda belum memiliki file _AppStart.cshtml , di folder akar situs web buat file bernama _AppStart.cshtml.
Tambahkan pengaturan berikut WebMail ke file _AppStart.cshtml :
```
@{
     // Initialize WebMail helper
     WebMail.SmtpServer = "your-SMTP-host";
     WebMail.SmtpPort = 25;
     WebMail.UserName = "your-user-name-here";
     WebMail.Password = "your-account-password";
     WebMail.From = "your-email-address-here";
}
```
Ubah pengaturan terkait email berikut dalam kode:
- Atur your-SMTP-host ke nama server SMTP yang dapat Anda akses.
- Atur your-user-name-here ke nama pengguna untuk akun server SMTP Anda.
- Atur your-account-password ke kata sandi untuk akun server SMTP Anda.
- Atur your-email-address-here ke alamat email Anda sendiri. Ini adalah alamat email tempat pesan dikirim. (Beberapa penyedia email tidak mengizinkan Anda menentukan alamat yang berbeda From dan akan menggunakan nama pengguna Anda sebagai From alamat.)
  
  Untuk informasi selengkapnya tentang pengaturan SMTP, lihat Mengonfigurasi Pengaturan Email dalam artikel Mengirim Email dari Situs Halaman Web (Razor) ASP.NET dan Masalah dengan Mengirim Email di Panduan Pemecahan Masalah Halaman Web (Razor) ASP.NET.
Simpan file _AppStart.cshtml dan tutup.
Di folder akar situs web, buat halaman baru bernama TestEmail.cshtml.

Ganti konten yang sudah ada dengan yang berikut ini:

@{
    var message = "";
    try{
        if(IsPost){
            WebMail.Send(
                to: Request.Form["emailAddress"],
                subject: Request.Form["emailSubject"],
                body:Request.Form["emailBody"]
           );
           message = "Email sent!";
        }
    }
    catch(Exception ex){
        message = "Email could not be sent!";
    }
}
<!DOCTYPE html>
<html lang="en">
  <head>
     <meta charset="utf-8" />
     <title>Test Email</title>
  </head>
  <body>
    <h1>Test Email</h1>
    <form method="post">
      <p>
        <label for="emailAddress">Email address:</label>
        <input type="text" name="emailAddress" />
      </p>
      <p>
        <label for="emailSubject">Subject:</label>
        <input type="text" name="emailSubject" />
      </p>
      <p>
        <label for="emailBody">Text to send:</label><br/>
        <textarea name="emailBody" rows="6"></textarea>
      </p>
    <p><input type="submit" value="Send!" /></p>
    @if(IsPost){
        <p>@message</p>
    }
    </form>
  </body>
</html>

Jalankan halaman TestEmail.cshtml di browser.
Isi bidang untuk mengirimi diri Anda pesan email lalu klik Kirim.
Periksa email Anda untuk memastikan Anda mendapatkan pesan.

Bagian penting dari contoh ini adalah bahwa pengaturan yang biasanya tidak Anda ubah — seperti nama server SMTP dan kredensial email Anda — diatur dalam file _AppStart.cshtml . Dengan begitu Anda tidak perlu mengaturnya lagi di setiap halaman tempat Anda mengirim email. (Meskipun jika karena alasan tertentu Anda perlu mengubah pengaturan tersebut, Anda dapat mengaturnya satu per satu di halaman.) Di halaman, Anda hanya mengatur nilai yang biasanya berubah setiap kali, seperti penerima dan isi pesan email.

Menjalankan Kode Sebelum dan Sesudah File dalam Folder

Sama seperti Anda dapat menggunakan _AppStart.cshtml untuk menulis kode sebelum halaman di situs berjalan, Anda dapat menulis kode yang berjalan sebelum (dan sesudah) halaman apa pun dalam folder tertentu berjalan. Ini berguna untuk hal-hal seperti mengatur halaman tata letak yang sama untuk semua halaman dalam folder, atau untuk memeriksa apakah pengguna masuk sebelum menjalankan halaman di folder.

Untuk halaman di folder tertentu, Anda dapat membuat kode dalam file bernama _PageStart.cshtml. Diagram berikut menunjukkan cara kerja halaman _PageStart.cshtml . Saat permintaan masuk untuk halaman, ASP.NET terlebih dahulu memeriksa halaman _AppStart.cshtml dan menjalankannya. Kemudian ASP.NET memeriksa apakah ada halaman _PageStart.cshtml , dan jika demikian, jalankan itu. Kemudian menjalankan halaman yang diminta.

Di dalam halaman _PageStart.cshtml , Anda dapat menentukan di mana selama pemrosesan, Anda ingin halaman yang diminta dijalankan dengan menyertakan RunPage metode . Ini memungkinkan Anda menjalankan kode sebelum halaman yang diminta berjalan dan kemudian lagi setelahnya. Jika Anda tidak menyertakan RunPage, semua kode dalam _PageStart.cshtml berjalan, lalu halaman yang diminta berjalan secara otomatis.

[Gambar menunjukkan bagaimana halaman yang diminta akan berjalan secara otomatis.]

ASP.NET memungkinkan Anda membuat hierarki file _PageStart.cshtml . Anda dapat meletakkan file _PageStart.cshtml di akar situs dan di subfolder apa pun. Ketika halaman diminta, file _PageStart.cshtml di tingkat paling atas (terdekat dengan akar situs) berjalan, diikuti oleh file _PageStart.cshtml di subfolder berikutnya, dan seterusnya di bawah struktur subfolder hingga permintaan mencapai folder yang berisi halaman yang diminta. Setelah semua file _PageStart.cshtml yang berlaku telah berjalan, halaman yang diminta berjalan.

Misalnya, Anda mungkin memiliki kombinasi file _PageStart.cshtml dan file Default.cshtml berikut:

@* ~/_PageStart.cshtml *@
@{
  PageData["Color1"] = "Red";
  PageData["Color2"] = "Blue";
}

@* ~/myfolder/_PageStart.cshtml *@
@{
  PageData["Color2"] = "Yellow";
  PageData["Color3"] = "Green";
}

@* ~/myfolder/default.cshtml *@
@PageData["Color1"]
<br/>
@PageData["Color2"]
<br/>
@PageData["Color3"]

Saat Menjalankan /myfolder/default.cshtml, Anda akan melihat hal berikut:

Red

Yellow

Green

Menjalankan Kode Inisialisasi untuk Semua Halaman dalam Folder

Penggunaan yang baik untuk file _PageStart.cshtml adalah menginisialisasi halaman tata letak yang sama untuk semua file dalam satu folder.

Di folder akar, buat folder baru bernama InitPages.

Di folder InitPages situs web Anda, buat file bernama _PageStart.cshtml dan ganti markup dan kode default dengan yang berikut ini:

@{
    // Sets the layout page for all pages in the folder.
    Layout = "~/Shared/_Layout1.cshtml";

    // Sets a variable available to all pages in the folder.
    PageData["MyBackground"] = "Yellow";
}

Di akar situs web, buat folder bernama Bersama.

Di folder Bersama , buat file bernama _Layout1.cshtml dan ganti markup dan kode default dengan yang berikut ini:

@{
  var backgroundColor = PageData["MyBackground"];
}
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link type="text/css" href="/Styles/Site.css" rel="stylesheet" />
</head>
<body>
  <div id="header">
    Using the _PageStart.cshtml file
  </div>
  <div id="main" style="background-color:@backgroundColor">
    @RenderBody()
  </div>
<div id="footer">
  &copy; 2012 Contoso. All rights reserved
</div>
</body>
</html>

Di folder InitPages , buat file bernama Content1.cshtml dan ganti konten yang ada dengan yang berikut ini:
```
<p>This is content page 1.</p>
```
Di folder InitPages , buat file lain bernama Content2.cshtml dan ganti markup default dengan yang berikut ini:
```
<p>This is content page 2.</p>
```
Jalankan Content1.cshtml di browser.

Saat halaman Content1.cshtml berjalan, file _PageStart.cshtml diatur Layout dan juga diatur PageData["MyBackground"] ke warna. Di Content1.cshtml, tata letak dan warna diterapkan.
Tampilkan Content2.cshtml di browser.

Tata letaknya sama, karena kedua halaman menggunakan halaman tata letak dan warna yang sama seperti yang diinisialisasi di _PageStart.cshtml.

Menggunakan _PageStart.cshtml untuk Menangani Kesalahan

Penggunaan lain yang baik untuk file _PageStart.cshtml adalah membuat cara untuk menangani kesalahan pemrograman (pengecualian) yang mungkin terjadi di halaman .cshtml dalam folder. Contoh ini menunjukkan kepada Anda salah satu cara untuk melakukan ini.

Di folder akar, buat folder bernama InitCatch.
Di folder InitCatch situs web Anda, buat file bernama _PageStart.cshtml dan ganti markup dan kode yang ada dengan yang berikut ini:
```
@{
    try
    {
        RunPage();
    }
    catch (Exception ex)
    {
        Response.Redirect("~/Error.cshtml?source=" +
            HttpUtility.UrlEncode(Request.AppRelativeCurrentExecutionFilePath));
    }
}
```
Dalam kode ini, Anda mencoba menjalankan halaman yang diminta secara eksplisit dengan memanggil metode di RunPage dalam try blok. Jika ada kesalahan pemrograman yang terjadi di halaman yang diminta, kode di dalam catch blok berjalan. Dalam hal ini, kode mengalihkan ke halaman (Error.cshtml) dan meneruskan nama file yang mengalami kesalahan sebagai bagian dari URL. (Anda akan segera membuat halaman.)
Di folder InitCatch situs web Anda, buat file bernama Exception.cshtml dan ganti markup dan kode yang ada dengan yang berikut ini:
```
@{
    var db = Database.Open("invalidDatabaseFile");
}
```
Untuk tujuan contoh ini, apa yang Anda lakukan di halaman ini sengaja membuat kesalahan dengan mencoba membuka file database yang tidak ada.

Di folder akar, buat file bernama Error.cshtml dan ganti markup dan kode yang ada dengan yang berikut ini:

<!DOCTYPE html>
<html>
    <head>
        <title>Error Page</title>
    </head>
    <body>
<h1>Error report</h1>
<p>An error occurred while running the following file: @Request["source"]</p>
    </body>
</html>

Di halaman ini, ekspresi @Request["source"] mendapatkan nilai dari URL dan menampilkannya.

Di toolbar, klik Simpan.
Jalankan Exception.cshtml di browser.

Karena kesalahan terjadi di Exception.cshtml, halaman _PageStart.cshtml mengalihkan ke file Error.cshtml , yang menampilkan pesan.

Untuk informasi selengkapnya tentang pengecualian, lihat Pengantar Pemrograman Halaman Web ASP.NET Menggunakan Sintaks Razor.

Menggunakan _PageStart.cshtml untuk Membatasi Akses Folder

Anda juga dapat menggunakan file _PageStart.cshtml untuk membatasi akses ke semua file dalam folder.

Di WebMatrix, buat situs web baru menggunakan opsi Situs Dari Templat .
Dari templat yang tersedia, pilih Situs Pemula.
Di folder akar, buat folder bernama AuthenticatedContent.
Di folder AuthenticatedContent , buat file bernama _PageStart.cshtml dan ganti markup dan kode yang ada dengan yang berikut ini:
```
@{
    Response.CacheControl = "no-cache";
    if (!WebSecurity.IsAuthenticated) {
        var returnUrl = "~/Account/Login?ReturnUrl=" + Request.Url.LocalPath;
        Response.Redirect(returnUrl);
    }
}
```
Kode dimulai dengan mencegah semua file dalam folder di-cache. (Ini diperlukan untuk skenario seperti komputer publik, di mana Anda tidak ingin halaman cache satu pengguna tersedia untuk pengguna berikutnya.) Selanjutnya, kode menentukan apakah pengguna telah masuk ke situs sebelum mereka dapat melihat salah satu halaman di folder. Jika pengguna tidak masuk, kode akan dialihkan ke halaman masuk. Halaman masuk dapat mengembalikan pengguna ke halaman yang awalnya diminta jika Anda menyertakan nilai string kueri bernama ReturnUrl.
Buat halaman baru di folder AuthenticatedContent bernama Page.cshtml.

Ganti markup default dengan yang berikut ini:

@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Authenticated Content";
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    Thank you for authenticating!
  </body>
</html>

Jalankan Page.cshtml di browser. Kode mengarahkan Anda ke halaman masuk. Anda harus mendaftar sebelum masuk. Setelah mendaftar dan masuk, Anda dapat menavigasi ke halaman dan melihat kontennya.

Sumber Daya Tambahan

Pengantar Pemrograman Halaman Web ASP.NET Menggunakan Sintaks Razor

Bagikan melalui