jueves, 7 de julio de 2011

Envio de Email con ASP.NET (Fácil)

En esta entrada explicaré, a través de un ejemplo, lo sencillo que es el envío  de emails con formato HTML a través de ASP.NET. El ejemplo utilizado es el típico formulario "Contactar" disponible en muchas web. Además, se ha añadido una segunda parte que trata los ficheros adjuntos.

Herramientas y tecnologías utilizadas:

  • Visual Studio 2008
  • ASP.NET 3.5
  • VB.NET
  • HTML

Parte 1 - Envío del email

Paso 1: Creación del formulario.


Insertaremos dos TextBox, uno para el asunto y otro para el contenido, este último de tipo multilínea(textarea). Además utilizaremos dos controles de tipo label para mostrar el nombre de los campos.  También es necesario un control de tipo Button para poder enviar el Email.
<div class="formEmail">


     <asp:Literal ID="ltl_resultado" runat="server"></asp:Literal>
    
     <asp:Label ID="lbl_asunto" runat="server" Text="Asunto:"></asp:Label>
     <asp:TextBox ID="txt_asunto" runat="server"></asp:TextBox>

     <asp:Label ID="lbl_mensaje"  runat="server" Text="Mensaje:"></asp:Label>
     <asp:TextBox ID="txt_mensaje" TextMode="MultiLine" runat="server"></asp:TextBox>

     <asp:Button ID="btn_enviar" runat="server" Text="enviar" />

</div>

Paso 2: Cuenta de correo


Para poder enviar emails a través de ASP.NET necesitamos una cuenta de correo electrónico. Normalmente, cuando contratamos un servicio de hosting se suelen inculir un determinado número de cuentas de correo. Por lo tanto, si no dispone de una cuenta de correo, el segundo paso es crearla.

Además de la cuenta de correo necesitará saber cúal es el servidor de correo saliente. Este dato se puede consultar en el panel de control del hosting. En el ejemplo utilizaremos el siguiente servidor SMTP: smtp.prueba.es.

La cuenta de correo que utilizaremos será admin@prueba.es cuyas credenciales son usu y pass.

Paso 3: Programación del evento click del contrl btn_enviar.


A continuación se muestra el código que deberá insertar en el evento click del botón enviar.

Protected Sub btn_enviar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn_enviar.Click

     'booERROR nos servirá para saber si el envío se realizó si problemas

     Dim booERROR As Boolean = True
     'Creamos una instancia de la clase System.Net.Mail.MailMessage que será la encargada de gestionar el envío

     Dim correo As New System.Net.Mail.MailMessage

     Dim Msg As String
     Msg = "<body>" & _
     "<p>Mensaje enviado desde el formulario Contactar</p>" & _
     "<p>" & Me.txt_mensaje.Text & "</p>"
     correo.From = New System.Net.Mail.MailAddress(admin@prueba.es)
     'Especificamos el destinatario.

     correo.To.Add(direccion@destinatario.com)

     correo.Subject = txt_asunto.Text
     correo.IsBodyHtml = True
     correo.Priority = System.Net.Mail.MailPriority.Normal
     correo.Body = Msg


     'Configurar el host y las credenciales

     Dim smtp As New System.Net.Mail.SmtpClient

     smtp.Host = "smtp.prueba.es"
     smtp.Credentials = New System.Net.NetworkCredential("usu", "pass")

     'Si se produce un error booERROR pasará a valer False.
    
     Try
         smtp.Send(correo)
     Catch ex As Exception
         booERROR = False
     End Try
     'Informamos al usuario del resultado

     If booERROR Then
         ltl_resultado.Visible = True
         ltl_resultado.Text = "<p class=""EmailOk"">El mensaje ha sido enviado correctamente"
     Else
         ltl_resultado.Visible = True
         ltl_resultado.Text = "<p class=""EmailKo"">El mensaje no se ha enviado correctamente"
     End If
End Sub



Parte 2 - Envío de fichero adjunto


Si quisieramos enviar ficheros adjuntos al mensaje, deberemos modificar el código siguiendo los siguientes pasos:

Paso 1 Modificar el código del formulario


Agregar el control fileupload para cargar el fichero y un botón para adjuntar al email. Además incluiremos un control de tipo lista para mostrar un listado con los ficheros adjuntados.

<asp:FileUpload ID="fud_adjuntarArchivo" runat="server" />
<asp:Button ID="btn_adjuntar" runat="server" Text="Adjuntar" />

 <asp:BulletedList ID="bll_ListadoFicherosAdjuntos" runat="server">

 </asp:BulletedList>

Paso 2 Almacenar el fichero

Programar el evento click del botón btn_adjuntar.

Protected Sub btn_adjuntar_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn_subir.Click


     If (fud_adjuntarArchivo.HasFile) Then


          Dim fileName As String = Server.HtmlEncode(fud_adjuntarArchivo.FileName)         
          Dim Ruta As String        
          Ruta = "~/ficherosAdjuntos/" & fileName

          'Agregamos el fichero a la lista -------------------------------



          ElementoLista.Text = fileName
          ElementoLista.Value = Ruta
          bll_listadoFicherosAdjuntos.Items.Add(ElementoLista)         

          Dim ElementoLista As New ListItem()         
          '----------------------------------------------------------------

          Me.fud_adjuntarArchivo.SaveAs(Server.MapPath(Ruta))

       End If
 

End Sub     

Paso 3: Modificar el evento enviar


For Each ItemAdjunto As ListItem In bll_listadoFicherosAdjuntos.Items
     correo.Attachments.Add(New System.Net.Mail.Attachment(Server.MapPath(ItemAdjunto.Value)))
Next


Este código se colocará justo después de crear el objero "correo". Es decir:

Dim correo As New System.Net.Mail.MailMessage

For Each ItemAdjunto As ListItem In bll_listadoFicherosAdjuntos.Items
correo.Attachments.Add(New System.Net.Mail.Attachment(Server.MapPath(ItemAdjunto.Value)))
Next


5 comentarios:

  1. Si algún programador tiene dudas con el envío de correos electrónicos en ASP.NET, no duden en plantear sus cuestiones¡¡

    ResponderEliminar
  2. Buenas Tardes
    sabras como enviar imagenes dentros de un html (cuerpo)

    ResponderEliminar
  3. Pues no lo he hecho nunca. Esta tarde lo miro y te paso el código

    ResponderEliminar
  4. Creo que la mejor opción para incluir imagenes en el html, es crearte una carpeta en servidor con las imagenes y referenciarlas desde el código html.

    por ejemplo, supongamos que tu dominio es prueba.es. Pues bien, creas en ese dominio una carpeta, por ejemplo "img", con todas las imagenes. Por último en el código html que mandas en el email pones la ruta en la propiedad scr ="www.pruebas.es/img/nombre_imagen", de la etiqueta imagen

    ResponderEliminar
  5. En el tutorial de la W3C exponen varias formas de incluir imagenes en HTML, por si quieres echarle un vistazo.

    http://www.w3.org/TR/html401/struct/objects.html#edef-IMG

    ResponderEliminar