Envío de correo electrónico desde un sitio de ASP.NET Web Pages (Razor)

por Tom FitzMacken

En este artículo se explica cómo enviar un mensaje de correo electrónico desde un sitio web al usar ASP.NET Web Pages (Razor).

Temas que se abordarán:

  • Cómo enviar un mensaje de correo electrónico desde su sitio web.
  • Cómo adjuntar un archivo a un mensaje de correo electrónico.

Estas son las características de ASP.NET presentadas en el artículo:

  • El asistente WebMail.

Versiones de software usadas en el tutorial

  • ASP.NET Web Pages (Razor) 3

Este tutorial también sirve para ASP.NET Web Pages 2.

Envío de mensajes de correo electrónico desde su sitio web

Hay muchas razones por las que puede necesitar enviar correos electrónicos desde su sitio web. Puede enviar mensajes de confirmación a los usuarios o enviarse notificaciones a usted (por ejemplo, para notificarse de que un nuevo usuario se haya registrado). El asistente de WebMail facilita hacer estos envíos de correo electrónico.

Para usar el asistente de WebMail, debe tener acceso a un servidor SMTP. (SMTP significa Protocolo simple de transferencia de correo electrónico). Un servidor SMTP es un servidor de correo electrónico que solamente reenvía los mensajes al servidor del destinatario, es el lado saliente del correo electrónico. Si usa un proveedor de hospedaje para su sitio web, probablemente lo configure con el correo electrónico y puede indicarle cuál es el nombre del servidor SMTP. Si trabaja dentro de una red corporativa, un administrador o su departamento de TI normalmente pueden proporcionarle la información sobre un servidor SMTP que puede usar. Si trabaja en casa, puede incluso probar el uso de su proveedor de correo electrónico normal, lo que puede indicarle el nombre de su servidor SMTP. Normalmente, necesita lo siguiente:

  • Nombre del servidor SMTP.
  • Número del puerto. Este es casi siempre 25. Sin embargo, el ISP puede requerir que use el puerto 587. Si usa la capa de sockets seguros (SSL) para el correo electrónico, es posible que necesite un puerto diferente. Consulte con su proveedor de correo electrónico.
  • Credenciales (nombre de usuario y contraseña).

En este procedimiento, creará dos páginas. La primera página tiene un formulario que permite a los usuarios escribir una descripción, como si estuvieran rellenando un formulario de soporte técnico. Esta primera página envía su información a una segunda página. En la segunda página, el código extrae la información del usuario y envía un mensaje de correo electrónico. También muestra un mensaje que confirma que se ha recibido el informe de problemas.

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

Nota:

Para simplificar este ejemplo, el código inicializa el asistente WebMail justo en la página donde se usa. Sin embargo, para los sitios web reales, es mejor colocar código de inicialización como este en un archivo global, de modo que inicialice el asistente de WebMail para todos los archivos de su sitio web. Para obtener más información, consulte Personalización del comportamiento de todo el sitio para ASP.NET Web Pages.

  1. Cree un sitio web.

  2. Agregue una nueva página denominada EmailRequest.cshtml y agregue el marcado siguiente:

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

    Observe que el atributo action del elemento form se ha establecido en ProcessRequest.cshtml. Esto significa que el formulario se enviará a esa página en lugar de volver a la página actual.

  3. Agregue una nueva página denominada ProcessRequest.cshtml al sitio web y agregue el código y el marcado siguientes:

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

    En el código, obtendrá los valores de los campos de formulario que se enviaron a la página. A continuación, llame al método Send del asistente WebMail para crear y enviar el mensaje de correo electrónico. En este caso, los valores que se van a usar se componen de texto que concatena con los valores enviados desde el formulario.

    El código de esta página está dentro de un bloque try/catch. Si por algún motivo el intento de enviar un correo electrónico no funciona (por ejemplo, si la configuración no es correcta), el código del bloque catch se ejecuta y establece la variable errorMessage en el error que se ha producido. (Para obtener más información sobre los bloques de try/catch o la etiqueta <text>, vea Introducción a ASP.NET Web Pages mediante la sintaxis de Razor).

    En el cuerpo de la página, si la variable errorMessage está vacía (valor predeterminado), el usuario ve un mensaje que indica que se ha enviado el mensaje de correo electrónico. Si la variable errorMessage se establece en true, el usuario ve un mensaje que indica que se ha producido un problema al enviar el mensaje.

    Observe que en la parte de la página que muestra un mensaje de error, hay una prueba adicional: if(debuggingFlag). Se trata de una variable que puede establecer en true si tiene problemas para enviar correo electrónico. Cuando debuggingFlag se ha establecido en true, y si hay un problema al enviar correo electrónico, se muestra un mensaje de error adicional que indica lo que ASP.NET notificó cuando intentó enviar el mensaje de correo electrónico. Sin embargo, le avisamos de que los mensajes de error que ASP.NET notifica cuando no se puede enviar un mensaje de correo electrónico pueden ser genéricos. Por ejemplo, si ASP.NET no puede ponerse en contacto con el servidor SMTP (por ejemplo, porque ha producido un error en el nombre del servidor), el error es Failure sending mail.

    Nota:

    Importante: Cuando recibe un mensaje de error de un objeto de excepción (ex en el código), no pase ese mensaje de forma rutinaria a los usuarios. Los objetos de excepción suelen incluir información que los usuarios no deben ver y que incluso puede ser una vulnerabilidad de seguridad. Por eso este código incluye la variable debuggingFlag que se usa como modificador para mostrar el mensaje de error y por qué la variable de forma predeterminada está establecida en false. Debe establecer esa variable en true (y, por lo tanto, mostrar el mensaje de error) solo si tiene un problema con el envío de correo electrónico y necesita depurar. Una vez que haya corregido cualquier problema, vuelva a establecer debuggingFlag en false.

    Modifique la siguiente configuración relacionada con el correo electrónico en el código:

    • Establezca your-SMTP-host como nombre del servidor SMTP al que tiene acceso.

    • Establezca your-user-name-here como nombre de usuario de la cuenta del servidor SMTP.

    • Establezca your-account-password en la contraseña de la cuenta del servidor SMTP.

    • Establezca your-email-address-here en su propia dirección de correo electrónico. Es la dirección de correo electrónico desde la que se envía el mensaje. (Algunos proveedores de correo electrónico no permiten especificar una dirección From diferente y usarán el nombre de usuario como dirección From).

      Sugerencia

      Configuración de correo electrónico

      A veces puede ser difícil asegurarse de que tiene la configuración adecuada para el servidor SMTP, el número de puerto, etc. A continuación se muestran algunas sugerencias:

      • El nombre del servidor SMTP suele ser algo parecido a smtp.provider.com o smtp.provider.net. Sin embargo, si publica el sitio en un proveedor de hospedaje, el nombre del servidor SMTP en ese momento podría ser localhost. Esto pasa porque después de la publicación y de que el sitio se ejecute en el servidor del proveedor, el servidor de correo electrónico podría ser local desde la perspectiva de la aplicación. Este cambio en los nombres de servidor puede significar que tiene que cambiar el nombre del servidor SMTP como parte del proceso de publicación.
      • El número de puerto suele ser 25. Sin embargo, algunos proveedores requieren que use el puerto 587 o algún otro puerto.
      • Asegúrese de usar las credenciales correctas. Si ha publicado el sitio en un proveedor de hospedaje, use las credenciales que el proveedor le haya indicado específicamente para el correo electrónico. Estas pueden ser diferentes de las credenciales que se usan para publicar.
      • A veces no necesita credenciales. Si va a enviar correo electrónico mediante su ISP personal, es posible que el proveedor de correo electrónico ya conozca sus credenciales. Después de publicar, es posible que tenga que usar credenciales diferentes que al probar en el equipo local.
      • Si el proveedor de correo electrónico usa cifrado, establezca WebMail.EnableSsl en true.
  4. Ejecute la página EmailRequest.cshtml en un explorador. (Asegúrese de que la página está seleccionada en el área de trabajo Archivos antes de ejecutarla).

  5. Escriba su nombre y una descripción del problema y, a continuación, haga clic en el botón Enviar. Se le redirige a la página ProcessRequest.cshtml, que confirma el mensaje y que le envía un mensaje de correo electrónico.

    [Screenshot shows the Process Request page.]

Envío de un archivo mediante correo electrónico

También puede enviar archivos adjuntos a mensajes de correo electrónico. En este procedimiento, creará un archivo de texto y dos páginas HTML. Usará el archivo de texto como datos adjuntos de correo electrónico.

  1. En el sitio web, agregue un nuevo archivo de texto y asígnele el nombre MyFile.txt.

  2. Copie el texto siguiente y péguelo en el archivo:

    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. Cree una página denominada SendFile.cshtml y agregue el marcado siguiente:

    <!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. Cree una página denominada ProcessFile.cshtml y agregue el marcado siguiente:

    @{
        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. Modifique la siguiente configuración relacionada con el correo electrónico en el código del ejemplo:

    • Establezca your-SMTP-host en el nombre del servidor SMTP al que tiene acceso.
    • Establezca your-user-name-here como nombre de usuario de la cuenta del servidor SMTP.
    • Establezca your-email-address-here en su propia dirección de correo electrónico. Es la dirección de correo electrónico desde la que se envía el mensaje.
    • Establezca your-account-password en la contraseña de la cuenta del servidor SMTP.
    • Establezca target-email-address-here en su propia dirección de correo electrónico. (Como antes, normalmente enviaría un correo electrónico a otra persona, pero para realizar la prueba puede enviárselo a sí mismo).
  6. Ejecute la página SendFile.cshtml en un explorador.

  7. Escriba el nombre, una línea de asunto y el nombre del archivo de texto que se va a adjuntar (MyFile.txt).

  8. Haga clic en el botón Submit. Como antes, se le redirigirá a la página ProcessFile.cshtml, lo que confirma el mensaje y le envía un mensaje de correo electrónico con el archivo adjunto.

Recursos adicionales