次の方法で共有

ASP.NET Web ページ (Razor) サイトから電子メールを送信する

  • [アーティクル]

作成者: Tom FitzMacken

この記事では、ASP.NET Web ページ (Razor) を使用するときに Web サイトから電子メール メッセージを送信する方法について説明します。

ここでは、次の内容について学習します。

  • Web サイトから電子メール メッセージを送信する方法。
  • 電子メール メッセージにファイルを添付する方法。

これは、次の記事で紹介した ASP.NET 機能です。

  • WebMail ヘルパー。

チュートリアルで使用するソフトウェアのバージョン

  • ASP.NET Web ページ (Razor) 3

このチュートリアルは、ASP.NET Web ページ 2 にも適用できます。

Web サイトからの電子メール メッセージの送信

Web サイトから電子メールを送信する必要がある理由はさまざまです。 ユーザーに確認メッセージを送信することも、自分自身に通知を送ることもできます (新しいユーザーが登録された場合など)。WebMail ヘルパーでは、簡単に電子メールを送信できます。

WebMail ヘルパーを使用するには、SMTP サーバーにアクセスできる必要があります。 (SMTP は「Simple Mail Transfer Protocol」の略です。)SMTP サーバーは、メッセージを受信者のサーバーにのみ転送する電子メール サーバーです。これは電子メールの送信側です。 Web サイトにホスティング プロバイダーを使用する場合は、電子メールを使用して設定している可能性があり、SMTP サーバー名を伝えることができます。 企業ネットワーク内で作業している場合は、通常、管理者や IT 部門が使用できる SMTP サーバーに関する情報を提供してくれます。 自宅で作業している場合は、SMTP サーバーの名前を伝えてくれる普通の電子メール プロバイダーを使用してテストできる場合があります。 通常、次のものが必要です。

  • SMTP サーバーの名前。
  • ポート番号。 これはほぼ常に 25 です。 ただし、ISP ではポート 587 の使用が必要になる場合があります。 電子メールに Secure Sockets Layer (SSL) を使用している場合は、別のポートが必要になることがあります。 メール プロバイダーを確認してください。
  • 資格情報 (ユーザー名、パスワード)。

この手順では、2 つのページを作成します。 最初のページには、ユーザーがテクニカル サポート フォームに入力しているかのように説明を入力できるフォームがあります。 最初のページは、その情報を 2 ページ目に送信します。 2 ページ目では、コードでユーザーの情報が抽出され、電子メール メッセージが送信されます。 また、問題のレポートが受信されたことを確認するメッセージも表示されます。

[Screenshot shows a message confirming the problem report has been received.]

Note

この例をわかりやすくするために、コードは WebMail ヘルパーを使用するページで直接初期化します。 ただし、実際の Web サイトでは、このような初期化コードをグローバル ファイルに配置して、Web サイト内のすべてのファイルの WebMail ヘルパーを初期化することをお勧めします。 詳細については、ASP.NET Web ページのサイト全体の動作のカスタマイズに関するページを参照してください。

  1. 新しい Web サイトを作成します。

  2. EmailRequest.cshtml という名前の新しいページを追加し、次のマークアップを追加します。

    <!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>

    フォーム要素の action 属性が ProcessRequest.cshtmlに設定されていることに注意してください。 つまり、フォームは現在のページに戻るのではなく、そのページに送信されます。

  3. ProcessRequest.cshtml という名前の新しいページを Web サイトに追加し、次のコードとマークアップを追加します。

    @{
    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>
  <p>Sorry to hear that you are having trouble, <b>@customerName</b>.</p>
    @if(errorMessage == ""){
      <p>An email message has been sent to our customer service
         department regarding the following problem:</p>
      <p><b>@customerRequest</b></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>

    コードでは、ページに送信されたフォーム フィールドの値を取得します。 次に、WebMail ヘルパーの Send メソッドを呼び出して、電子メール メッセージを作成して送信します。 この場合、使用する値は、フォームから送信された値にテキストを連結して構成されます。

    このページのコードは try/catch ブロック内にあります。 何らかの理由で電子メール送信が機能しない場合 (設定が正しくないなど)、catch ブロック内のコードが実行され、発生したエラーに errorMessage 変数が設定されます。 (try/catch ブロックまたは <text> タグの詳細については、「Razor 構文を使用した ASP.NET Web プログラミングの概要」を参照してください)。

    ページの本文で、errorMessage 変数が空 (既定値) の場合、電子メール メッセージが送信されたことを示すメッセージがユーザーに表示されます。 errorMessage 変数が true に設定されている場合、ユーザーはメッセージの送信中に問題が発生したことを示すメッセージを表示します。

    エラー メッセージを表示するページの部分には、追加のテスト (if(debuggingFlag)) があることに注意してください。 これは、電子メールの送信に問題が発生した場合に true に設定できる変数です。 debuggingFlag が true の場合、電子メールの送信に問題が発生した場合は、電子メール メッセージを送信しようとしたときに ASP.NET で報告された内容を示す追加のエラー メッセージが表示されます。 警告として、ASP.NET が電子メール メッセージを送信できないときに報告するエラー メッセージは、一般的なものです。 たとえば、ASP.NET を SMTP サーバーに接続できない場合 (たとえば、サーバー名にエラーが発生した場合など) のエラーは Failure sending mail です。

    Note

    重要 例外オブジェクトからエラーメッセージを受け取ったら（コードの ex）、そのメッセージをユーザーに機械的に渡さないようにしてください。 例外オブジェクトには、多くの場合、ユーザーに表示してはならない情報が含まれている場合が多く、それがセキュリティ脆弱性につながる可能性もあります。 そのため、このコードには、エラー メッセージを表示するスイッチとして使用される変数 debuggingFlag が含まれており、変数は既定で false に設定されています。 電子メールの送信に問題があり、デバッグが必要な場合にのみ、その変数を true に設定する必要があります (そのため、エラー メッセージが表示されます)。 問題を修正したら、debuggingFlag を false に戻します。

    コード内の次の電子メール関連の設定を変更します。

    • your-SMTP-host をアクセス権を持つ SMTP サーバーの名前に設定します。

    • your-user-name-here を SMTP サーバー アカウントのユーザー名に設定します。

    • your-account-password を SMTP サーバー アカウントのパスワードに設定します。

    • your-email-address-here を自分のメール アドレスに設定します。 これは、メッセージの送信元の電子メール アドレスです。 (一部のメール プロバイダーでは、別の From アドレスを指定できないため、ユーザー名を From アドレスとして使用します)。

      ヒント

      電子メール設定の構成

      SMTP サーバーやポート番号などの設定が適切かどうかを確認するのは困難な場合があります。 いくつかのヒントを次に示します。

      • SMTP サーバー名は、多くの場合、smtp.provider.com や smtp.provider.net のようなものです。 ただし、サイトをホスティング プロバイダーに公開する場合、その時点の SMTP サーバー名は localhost である可能性があります。 これは、公開後にサイトがプロバイダーのサーバーで実行されると、アプリケーションの観点から電子メール サーバーがローカルである可能性があるためです。 サーバー名のこの変更は公開プロセスの一環として SMTP サーバー名を変更する必要があることを意味する場合があります。
      • ポート番号は通常 25 です。 ただし、プロバイダーによっては、ポート 587 またはその他のポートを使用する必要があります。
      • 適切な資格情報を使用していることを確認してください。 サイトをホスティング プロバイダーに公開した場合は、プロバイダーが電子メール用として明示的に示した資格情報を使用します。 これらは、公開に使用する資格情報とは異なる場合があります。
      • 資格情報がまったく必要ない場合もあります。 個人用 ISP を使用してメールを送信している場合は、メール プロバイダーが資格情報を既に把握している可能性があります。 公開後、ローカル コンピューターでのテスト時とは異なる資格情報を使用することが必要になる場合があります。
      • 電子メール プロバイダーで暗号化を使用する場合は、WebMail.EnableSsl を true に設定する必要があります。

  4. ブラウザーで EmailRequest.cshtml ページを実行します。 (実行する前に、ファイル ワークスペースでページが選択されていることを確認してください。)

  5. 名前と問題の説明を入力し、[送信] ボタンをクリックします。 ProcessRequest.cshtml ページにリダイレクトされ、メッセージが確認され、電子メール メッセージが送信されます。

    [Screenshot shows the Process Request page.]

電子メールを使用したファイルの送信

電子メール メッセージにファイルを添付して送信することもできます。 この手順では、テキスト ファイルと 2 つの HTML ページを作成します。 テキスト ファイルを電子メールの添付ファイルとして使用します。

  1. Web サイトで、新しいテキスト ファイルを追加し、MyFile.txt という名前を付けます。

  2. 次のテキストをコピーし、ファイルに貼り付けます。

    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.

  3. SendFile.cshtml という名前のページを作成し、次のマークアップを追加します。

    <!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>

  4. ProcessFile.cshtml という名前のページを作成し、次のマークアップを追加します。

    @{
    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>

  5. 例に示すコードで、次のメール関連の設定を変更します。

    • your-SMTP-host をアクセス権を持つ SMTP サーバーの名前に設定します。
    • your-user-name-here を SMTP サーバー アカウントのユーザー名に設定します。
    • your-email-address-here を自分のメール アドレスに設定します。 これは、メッセージの送信元のメール アドレスです。
    • your-account-password を SMTP サーバー アカウントのパスワードに設定します。
    • target-email-address-here を自分のメール アドレスに設定します。 (以前と同様に、通常は他のユーザーにメールを送信しますが、テストの場合は自分自身に送信することもできます。)

  6. ブラウザーで SendFile.cshtml ページを実行します。

  7. 名前、件名、添付するテキスト ファイルの名前 (MyFile.txt) を入力します。

  8. Submit ボタンをクリックします。 以前と同様に、ProcessFile.cshtml ページにリダイレクトされます。このページでは、メッセージが確認され、添付ファイルを含む電子メール メッセージが送信されます。

その他のリソース