Envoi de Email à partir d’un site pages Web ASP.NET (Razor)

par Tom FitzMacken

Cet article explique comment envoyer un e-mail à partir d’un site web lorsque vous utilisez pages Web ASP.NET (Razor).

Ce que vous allez apprendre :

  • Comment envoyer un e-mail à partir de votre site web.
  • Comment joindre un fichier à un message électronique.

Il s’agit de la ASP.NET fonctionnalité introduite dans l’article :

  • L’assistance WebMail .

Versions logicielles utilisées dans le tutoriel

  • pages Web ASP.NET (Razor) 3

Ce tutoriel fonctionne également avec pages Web ASP.NET 2.

Envoi de messages Email à partir de votre site web

Il existe toutes sortes de raisons pour lesquelles vous devrez peut-être envoyer des e-mails à partir de votre site web. Vous pouvez envoyer des messages de confirmation aux utilisateurs, ou vous pouvez vous envoyer des notifications (par exemple, qu’un nouvel utilisateur s’est inscrit).) L’assistance WebMail vous permet d’envoyer facilement des e-mails.

Pour utiliser l’assistance WebMail , vous devez avoir accès à un serveur SMTP. (SMTP signifie Simple Mail Transfer Protocol.) Un serveur SMTP est un serveur de messagerie qui transfère uniquement les messages au serveur du destinataire, c’est-à-dire le côté sortant de l’e-mail. Si vous utilisez un fournisseur d’hébergement pour votre site web, il vous configure probablement avec l’e-mail et il peut vous indiquer le nom de votre serveur SMTP. Si vous travaillez à l’intérieur d’un réseau d’entreprise, un administrateur ou votre service informatique peut généralement vous fournir les informations sur un serveur SMTP que vous pouvez utiliser. Si vous travaillez à la maison, vous pourriez même être en mesure de tester à l’aide de votre fournisseur de messagerie ordinaire, qui peut vous indiquer le nom de son serveur SMTP. Vous avez généralement besoin des éléments suivants :

  • Nom du serveur SMTP.
  • Numéro de port. C’est presque toujours 25. Toutefois, votre FAI peut vous demander d’utiliser le port 587. Si vous utilisez ssl (Secure Sockets Layer) pour la messagerie, vous aurez peut-être besoin d’un autre port. Vérifiez auprès de votre fournisseur de messagerie.
  • Informations d’identification (nom d’utilisateur, mot de passe).

Dans cette procédure, vous créez deux pages. La première page contient un formulaire qui permet aux utilisateurs d’entrer une description, comme s’ils remplissaient un formulaire de support technique. La première page envoie ses informations à une deuxième page. Dans la deuxième page, le code extrait les informations de l’utilisateur et envoie un e-mail. Il affiche également un message confirmant que le rapport de problème a été reçu.

[Capture d’écran montrant un message confirmant que le rapport de problème a été reçu.]

Notes

Pour que cet exemple reste simple, le code initialise l’assistance WebMail directement dans la page où vous l’utilisez. Toutefois, pour les sites web réels, il est préférable de placer du code d’initialisation comme celui-ci dans un fichier global, afin d’initialiser l’assistance WebMail pour tous les fichiers de votre site web. Pour plus d’informations, consultez Personnalisation du comportement Site-Wide pour pages Web ASP.NET.

  1. Créez un site web.

  2. Ajoutez une nouvelle page nommée EmailRequest.cshtml et ajoutez le balisage suivant :

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

    Notez que l’attribut action de l’élément form a été défini sur ProcessRequest.cshtml. Cela signifie que le formulaire sera envoyé à cette page au lieu de revenir à la page active.

  3. Ajoutez une nouvelle page nommée ProcessRequest.cshtml au site web et ajoutez le code et le balisage suivants :

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

    Dans le code, vous obtenez les valeurs des champs de formulaire qui ont été soumis à la page. Vous appelez ensuite la méthode de Send l’assistance WebMail pour créer et envoyer le message électronique. Dans ce cas, les valeurs à utiliser sont constituées de texte que vous concatènez avec les valeurs qui ont été envoyées à partir du formulaire.

    Le code de cette page se trouve à l’intérieur d’un try/catch bloc. Si, pour une raison quelconque, la tentative d’envoi d’un e-mail ne fonctionne pas (par exemple, les paramètres ne sont pas corrects), le code du catch bloc s’exécute et définit la errorMessage variable sur l’erreur qui s’est produite. (Pour plus d’informations sur try/catch les blocs ou la <text> balise, consultez Présentation de la programmation pages Web ASP.NET à l’aide de la syntaxe Razor.)

    Dans le corps de la page, si la errorMessage variable est vide (valeur par défaut), l’utilisateur voit un message indiquant que le message électronique a été envoyé. Si la variable a la errorMessage valeur true, l’utilisateur voit un message indiquant qu’il y a eu un problème lors de l’envoi du message.

    Notez que dans la partie de la page qui affiche un message d’erreur, il existe un test supplémentaire : if(debuggingFlag). Il s’agit d’une variable que vous pouvez définir sur true si vous rencontrez des difficultés pour envoyer des e-mails. Quand debuggingFlag est true et s’il y a un problème d’envoi d’e-mail, un message d’erreur supplémentaire s’affiche qui indique tout ce que ASP.NET a signalé lorsqu’il a essayé d’envoyer le message électronique. Avertissement juste, cependant : les messages d’erreur que ASP.NET signale lorsqu’il ne peut pas envoyer de message électronique peuvent être génériques. Par exemple, si ASP.NET ne pouvez pas contacter le serveur SMTP (par exemple, parce que vous avez commis une erreur dans le nom du serveur), l’erreur est Failure sending mail.

    Notes

    Important Lorsque vous obtenez un message d’erreur à partir d’un objet d’exception (ex dans le code), ne transmettez pas systématiquement ce message aux utilisateurs. Les objets d’exception incluent souvent des informations que les utilisateurs ne doivent pas voir et qui peuvent même être une vulnérabilité de sécurité. C’est pourquoi ce code inclut la variable debuggingFlag utilisée comme commutateur pour afficher le message d’erreur et pourquoi la variable est définie par défaut sur false. Vous devez définir cette variable sur true (et donc afficher le message d’erreur) uniquement si vous rencontrez un problème avec l’envoi d’e-mails et que vous devez déboguer. Une fois que vous avez résolu tous les problèmes, revenez debuggingFlag à false.

    Modifiez les paramètres liés à l’e-mail suivants dans le code :

    • Définissez your-SMTP-host sur le nom du serveur SMTP auquel vous avez accès.

    • Définissez your-user-name-here sur le nom d’utilisateur de votre compte de serveur SMTP.

    • Définissez your-account-password sur le mot de passe de votre compte de serveur SMTP.

    • Définissez your-email-address-here votre propre adresse e-mail. Il s’agit de l’adresse e-mail à partir de laquelle le message est envoyé. (Certains fournisseurs de messagerie ne vous permettent pas de spécifier une autre From adresse et utilisent votre nom d’utilisateur comme From adresse.)

      Conseil

      Configuration des paramètres de Email

      Il peut parfois être difficile de s’assurer que vous disposez des paramètres appropriés pour le serveur SMTP, le numéro de port, etc. Voici quelques conseils :

      • Le nom du serveur SMTP est souvent quelque chose comme smtp.provider.com ou smtp.provider.net. Toutefois, si vous publiez votre site sur un fournisseur d’hébergement, le nom du serveur SMTP à ce stade peut être localhost. En effet, une fois que vous avez publié et que votre site s’exécute sur le serveur du fournisseur, le serveur de messagerie peut être local du point de vue de votre application. Cette modification des noms de serveurs peut signifier que vous devez modifier le nom du serveur SMTP dans le cadre de votre processus de publication.
      • Le numéro de port est généralement 25. Toutefois, certains fournisseurs vous obligent à utiliser le port 587 ou un autre port.
      • Veillez à utiliser les informations d’identification appropriées. Si vous avez publié votre site auprès d’un fournisseur d’hébergement, utilisez les informations d’identification que le fournisseur a spécifiquement indiquées pour l’e-mail. Celles-ci peuvent être différentes des informations d’identification que vous utilisez pour publier.
      • Parfois, vous n’avez pas besoin d’informations d’identification. Si vous envoyez des e-mails à l’aide de votre fournisseur de services Internet personnel, votre fournisseur de messagerie peut déjà connaître vos informations d’identification. Après la publication, vous devrez peut-être utiliser des informations d’identification différentes de celles du test sur votre ordinateur local.
      • Si votre fournisseur de messagerie utilise le chiffrement, vous devez définir sur WebMail.EnableSsltrue.
  4. Exécutez la page EmailRequest.cshtml dans un navigateur. (Vérifiez que la page est sélectionnée dans l’espace de travail Fichiers avant de l’exécuter.)

  5. Entrez votre nom et une description du problème, puis cliquez sur le bouton Envoyer . Vous êtes redirigé vers la page ProcessRequest.cshtml , qui confirme votre message et vous envoie un e-mail.

    [Capture d’écran montrant la page Requête de processus.]

Envoi d’un fichier à l’aide de Email

Vous pouvez également envoyer des fichiers joints à des messages électroniques. Dans cette procédure, vous créez un fichier texte et deux pages HTML. Vous allez utiliser le fichier texte comme pièce jointe d’un e-mail.

  1. Dans le site web, ajoutez un nouveau fichier texte et nommez-leMyFile.txt.

  2. Copiez le texte suivant et collez-le dans le fichier :

    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. Créez une page nommée SendFile.cshtml et ajoutez le balisage suivant :

    <!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. Créez une page nommée ProcessFile.cshtml et ajoutez le balisage suivant :

    @{
        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. Modifiez les paramètres liés à l’e-mail suivants dans le code à partir de l’exemple :

    • Définissez your-SMTP-host sur le nom d’un serveur SMTP auquel vous avez accès.
    • Définissez your-user-name-here sur le nom d’utilisateur de votre compte de serveur SMTP.
    • Définissez your-email-address-here votre propre adresse e-mail. Il s’agit de l’adresse e-mail à partir de laquelle le message est envoyé.
    • Définissez your-account-password sur le mot de passe de votre compte de serveur SMTP.
    • Définissez target-email-address-here votre propre adresse e-mail. (Comme avant, vous envoyiez normalement un e-mail à quelqu’un d’autre, mais pour les tests, vous pouvez l’envoyer à vous-même.)
  6. Exécutez la page SendFile.cshtml dans un navigateur.

  7. Entrez votre nom, une ligne d’objet et le nom du fichier texte à joindre (MyFile.txt).

  8. Cliquez sur le bouton Submit. Comme précédemment, vous êtes redirigé vers la page ProcessFile.cshtml , qui confirme votre message et qui vous envoie un e-mail avec le fichier joint.

Ressources supplémentaires