Mengirim Email dari Situs Halaman Web (Razor) ASP.NET

2023-07-13

Artikel ini menjelaskan cara mengirim pesan email dari situs web saat Anda menggunakan ASP.NET Web Pages (Razor).

Yang akan Anda pelajari:

Cara mengirim pesan email dari situs web Anda.

Cara melampirkan file ke pesan email.

Ini adalah fitur ASP.NET yang diperkenalkan dalam artikel:

Pembantu WebMail .

Versi perangkat lunak yang digunakan dalam tutorial

ASP.NET Web Pages (Razor) 3

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

Mengirim Pesan Email dari Situs Web Anda

Ada berbagai alasan mengapa Anda mungkin perlu mengirim email dari situs web Anda. Anda dapat mengirim pesan konfirmasi kepada pengguna, atau Anda dapat mengirim pemberitahuan ke diri Anda sendiri (misalnya, bahwa pengguna baru telah mendaftar.) Pembantu WebMail memudahkan Anda untuk mengirim email.

Untuk menggunakan pembantu WebMail , Anda harus memiliki akses ke server SMTP. (SMTP adalah singkatan dari Simple Mail Transfer Protocol.) Server SMTP adalah server email yang hanya meneruskan pesan ke server penerima — ini adalah sisi keluar email. Jika Anda menggunakan penyedia hosting untuk situs web Anda, mereka mungkin menyiapkan Anda dengan email dan mereka dapat memberi tahu Anda apa nama server SMTP Anda. Jika Anda bekerja di dalam jaringan perusahaan, administrator atau departemen IT Anda biasanya dapat memberi Anda informasi tentang server SMTP yang dapat Anda gunakan. Jika Anda bekerja di rumah, Anda bahkan mungkin dapat menguji menggunakan penyedia email biasa Anda, yang dapat memberi tahu Anda nama server SMTP mereka. Anda biasanya membutuhkan:

Nama server SMTP.
Nomor port. Ini hampir selalu 25. Namun, ISP Anda mungkin mengharuskan Anda untuk menggunakan port 587. Jika Anda menggunakan lapisan soket aman (SSL) untuk email, Anda mungkin memerlukan port yang berbeda. Tanyakan kepada penyedia email Anda.
Kredensial (nama pengguna, kata sandi).

Dalam prosedur ini, Anda membuat dua halaman. Halaman pertama memiliki formulir yang memungkinkan pengguna memasukkan deskripsi, seolah-olah mereka mengisi formulir dukungan teknis. Halaman pertama mengirimkan informasinya ke halaman kedua. Di halaman kedua, kode mengekstrak informasi pengguna dan mengirim pesan email. Ini juga menampilkan pesan yang mengonfirmasi bahwa laporan masalah telah diterima.

[Cuplikan layar memperlihatkan pesan yang mengonfirmasi laporan masalah telah diterima.]

Catatan

Agar contoh ini tetap sederhana, kode menginisialisasi pembantu WebMail tepat di halaman tempat Anda menggunakannya. Namun, untuk situs web nyata, lebih baik menempatkan kode inisialisasi seperti ini dalam file global, sehingga Anda menginisialisasi pembantu WebMail untuk semua file di situs web Anda. Untuk informasi selengkapnya, lihat Menyesuaikan Perilaku Site-Wide untuk Halaman Web ASP.NET.

Buat situs web baru.

Tambahkan halaman baru bernama EmailRequest.cshtml dan tambahkan markup berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Request for Assistance</title>
</head>
<body>
  <h2>Submit Email Request for Assistance</h2>
  <form method="post" action="ProcessRequest.cshtml">
    <div>
        Your name:
        <input type="text" name="customerName" />
    </div>

    <div>
        Your email address:
        <input type="text" name="customerEmail" />
    </div>

    <div>
        Details about your problem: <br />
        <textarea name="customerRequest" cols="45" rows="4"></textarea>
    </div>

    <div>
        <input type="submit" value="Submit" />
    </div>
  </form>
</body>
</html>

Perhatikan bahwa action atribut elemen formulir telah diatur ke ProcessRequest.cshtml. Ini berarti bahwa formulir akan dikirimkan ke halaman tersebut alih-alih kembali ke halaman saat ini.

Tambahkan halaman baru bernama ProcessRequest.cshtml ke situs web dan tambahkan kode dan markup berikut:
```
@{
 var customerName = Request["customerName"];
 var customerEmail = Request["customerEmail"]; 
 var customerRequest = Request["customerRequest"];
 var errorMessage = "";
 var debuggingFlag = false;
 try {
 // 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";

 // Send email
 WebMail.Send(to: customerEmail,
 subject: "Help request from - " + customerName,
 body: customerRequest
 );
 }
 catch (Exception ex ) {
 errorMessage = ex.Message;
 }
}
<!DOCTYPE html>
<html>
<head>
 <title>Request for Assistance</title>
</head>
<body>
 Sorry to hear that you are having trouble, @customerName.
 @if(errorMessage == ""){
 An email message has been sent to our customer service
 department regarding the following problem:
 @customerRequest
 }
 else{
 The email was not sent.
 Please check that the code in the ProcessRequest page has 
 correct settings for the SMTP server name, a user name, 
 a password, and a "from" address.
 
 if(debuggingFlag){
 The following error was reported:
 @errorMessage
 }
 }
</body>
</html>
```
Dalam kode, Anda mendapatkan nilai bidang formulir yang dikirimkan ke halaman. Anda kemudian memanggil metode pembantu WebMailSend untuk membuat dan mengirim pesan email. Dalam hal ini, nilai yang akan digunakan terdiri dari teks yang Anda menggabungkan dengan nilai yang dikirimkan dari formulir.

Kode untuk halaman ini berada di dalam try/catch blok. Jika karena alasan apa pun upaya untuk mengirim email tidak berfungsi (misalnya, pengaturan tidak benar), kode di catch blok berjalan dan mengatur errorMessage variabel ke kesalahan yang telah terjadi. (Untuk informasi selengkapnya tentang try/catch blokir atau <text> tag, lihat Pengantar ASP.NET Pemrograman Halaman Web Menggunakan Sintaks Razor.)

Di isi halaman, jika errorMessage variabel kosong (default), pengguna melihat pesan bahwa pesan email telah dikirim. errorMessage Jika variabel diatur ke true, pengguna akan melihat pesan bahwa ada masalah saat mengirim pesan.

Perhatikan bahwa di bagian halaman yang menampilkan pesan kesalahan, ada pengujian tambahan: if(debuggingFlag). Ini adalah variabel yang dapat Anda atur ke true jika Anda mengalami masalah saat mengirim email. Jika debuggingFlag benar, dan jika ada masalah saat mengirim email, pesan kesalahan tambahan ditampilkan yang menunjukkan apa pun yang ASP.NET laporkan saat mencoba mengirim pesan email. Namun, peringatan wajar: pesan kesalahan yang ASP.NET laporkan saat tidak dapat mengirim pesan email dapat bersifat umum. Misalnya, jika ASP.NET tidak dapat menghubungi server SMTP (misalnya, karena Anda membuat kesalahan dalam nama server), kesalahannya adalah Failure sending mail.

Catatan

Penting Ketika Anda mendapatkan pesan kesalahan dari objek pengecualian (ex dalam kode), jangan secara rutin meneruskan pesan tersebut kepada pengguna. Objek pengecualian sering menyertakan informasi yang tidak boleh dilihat pengguna dan itu bahkan bisa menjadi kerentanan keamanan. Itulah sebabnya kode ini menyertakan variabel debuggingFlag yang digunakan sebagai sakelar untuk menampilkan pesan kesalahan, dan mengapa variabel secara default diatur ke false. Anda harus mengatur variabel tersebut ke true (dan karena itu menampilkan pesan kesalahan) hanya jika Anda mengalami masalah dengan pengiriman email dan Anda perlu men-debug. Setelah Anda memperbaiki masalah apa pun, atur debuggingFlag kembali ke false.

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.)
 Tip
 
 Mengonfigurasi Pengaturan Email
 
 Ini bisa menjadi tantangan kadang-kadang untuk memastikan Anda memiliki pengaturan yang tepat untuk server SMTP, nomor port, dan sebagainya. Berikut adalah beberapa tips:
 - Nama server SMTP seringkali seperti smtp.provider.com atau smtp.provider.net. Namun, jika Anda menerbitkan situs Anda ke penyedia hosting, nama server SMTP pada saat itu mungkin localhost. Ini karena setelah Anda menerbitkan dan situs Anda berjalan di server penyedia, server email mungkin lokal dari perspektif aplikasi Anda. Perubahan nama server ini mungkin berarti Anda harus mengubah nama server SMTP sebagai bagian dari proses penerbitan Anda.
 - Nomor port biasanya 25. Namun, beberapa penyedia mengharuskan Anda untuk menggunakan port 587 atau beberapa port lainnya.
 - Pastikan Anda menggunakan kredensial yang tepat. Jika Anda telah menerbitkan situs Anda ke penyedia hosting, gunakan kredensial yang secara khusus ditunjukkan penyedia adalah untuk email. Ini mungkin berbeda dari kredensial yang Anda gunakan untuk menerbitkan.
 - Terkadang Anda tidak memerlukan kredensial sama sekali. Jika Anda mengirim email menggunakan ISP pribadi, penyedia email Anda mungkin sudah mengetahui kredensial Anda. Setelah menerbitkan, Anda mungkin perlu menggunakan kredensial yang berbeda dari saat menguji di komputer lokal Anda.
 - Jika penyedia email Anda menggunakan enkripsi, Anda harus mengatur WebMail.EnableSsl ke true.
Jalankan halaman EmailRequest.cshtml di browser. (Pastikan halaman dipilih di ruang kerja File sebelum Anda menjalankannya.)
Masukkan nama Anda dan deskripsi masalah, lalu klik tombol Kirim . Anda dialihkan ke halaman ProcessRequest.cshtml , yang mengonfirmasi pesan Anda dan yang mengirimi Anda pesan email.

Mengirim File Menggunakan Email

Anda juga dapat mengirim file yang dilampirkan ke pesan email. Dalam prosedur ini, Anda membuat file teks dan dua halaman HTML. Anda akan menggunakan file teks sebagai lampiran email.

Di situs web, tambahkan file teks baru dan beri nama MyFile.txt.
Salin teks berikut dan tempelkan dalam file:

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.

Buat halaman bernama SendFile.cshtml dan tambahkan markup berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Attach File</title>
</head>
<body>
  <h2>Submit Email with Attachment</h2>
  <form method="post" action="ProcessFile.cshtml">
    <div>
        Your name:
        <input type="text" name="customerName" />
    </div>

    <div>
        Your email address:
        <input type="text" name="customerEmail" />
    </div>

    <div>
        Subject line: <br />
        <input type="text" size= 30 name="subjectLine" />
    </div>

    <div>
        File to attach: <br />
        <input type="text" size=60 name="fileAttachment" />
    </div>

    <div>
        <input type="submit" value="Submit" />
    </div>
  </form>
</body>
</html>

Buat halaman bernama ProcessFile.cshtml dan tambahkan markup berikut:

@{
    var customerName = Request["customerName"];
    var customerEmail = Request["customerEmail"]; 
    var customerRequest = Request["customerRequest"];
    var subjectLine = Request["subjectLine"];
    var fileAttachment = Request["fileAttachment"];
    var errorMessage = "";
    var debuggingFlag = false;

    try {
        // 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";

        // Create array containing file name
        var filesList = new string [] { fileAttachment };

        // Attach file and send email
        WebMail.Send(to: customerEmail,
            subject: subjectLine,
            body: "File attached. <br />From: " + customerName,
            filesToAttach: filesList);
    }
    catch (Exception ex ) {
        errorMessage = ex.Message;
    }
}
<!DOCTYPE html>
<html>
<head>
    <title>Request for Assistance</title>
</head>
<body>
  <p>Sorry to hear that you are having trouble, <b>@customerName</b>.</p>
    @if(errorMessage == ""){
        <p><b>@customerName</b>, thank you for your interest.</p>
        <p>An email message has been sent to our customer service
           department with the <b>@fileAttachment</b> file attached.</p>
    }
    else{
        <p><b>The email was <em>not</em> sent.</b></p>
        <p>Please check that the code in the ProcessRequest page has 
           correct settings for the SMTP server name, a user name, 
           a password, and a "from" address.
        </p>
        if(debuggingFlag){
            <p>The following error was reported:</p>
            <p><em>@errorMessage</em></p>
        }
    }
</body>
</html>

Ubah pengaturan terkait email berikut dalam kode dari contoh:
- 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-email-address-here ke alamat email Anda sendiri. Ini adalah alamat email tempat pesan dikirim.
- Atur your-account-password ke kata sandi untuk akun server SMTP Anda.
- Atur target-email-address-here ke alamat email Anda sendiri. (Seperti sebelumnya, Anda biasanya akan mengirim email ke orang lain, tetapi untuk pengujian, Anda dapat mengirimkannya ke diri Anda sendiri.)
Jalankan halaman SendFile.cshtml di browser.
Masukkan nama Anda, baris subjek, dan nama file teks yang akan dilampirkan (MyFile.txt).
Klik tombol Submit. Seperti sebelumnya, Anda dialihkan ke halaman ProcessFile.cshtml , yang mengonfirmasi pesan Anda dan yang mengirimi Anda pesan email dengan file terlampir.

Bagikan melalui

Mengirim Email dari Situs Halaman Web (Razor) ASP.NET

Versi perangkat lunak yang digunakan dalam tutorial

Mengirim Pesan Email dari Situs Web Anda

Mengonfigurasi Pengaturan Email

Mengirim File Menggunakan Email

Sumber Daya Tambahan

Saran dan Komentar

Sumber Daya Tambahan: