Menu

Envío de correo electrónico con ASP.NET

27 febrero, 2016 - Arte y creatividad, Diseño & ASP.NET, Tecnología
Envío de correo electrónico con ASP.NET

Envío de correo electrónico con ASP.NET

Al igual que en anteriores artículos, esta sección de Diseño & ASP.NET, pretende conjugar ambos “mundos“, a fin de dotar de la mejor presencia posible los interfaces de usuario.

Para dar ese “plus” de diseño a nuestros programas, hemos elegido el framework Bootstrap, que como sabes fue puesto en escena por Twitter, y que creemos, cumple a la perfección con todos los requisitos para diseñar con profesionalidad y adaptación a diferentes dispositivos (“diseño responsive”).

En este artículo en concreto, vamos a tratar una nueva funcionalidad: Envío de correo electrónico con ASP.NET, mediante la librería System.Net.Mail, sin necesidad de utilizar programas de terceros como ASPEmail.

 

Vamos por partes…

Como puedes ver en la imagen siguiente, el interfaz para la funcionalidad Envío de correo electrónico con ASP.NET, es muy sencillo y se compone de varios controles de servidor asp:Labelasp:TextBoxasp:LinkButton. Recordarás de post anteriores, que para maquetar un botón que contiene un icono, no utililzamos el clásico asp:Button, sino que lo sustituimos por asp:LinkButton.

Estos controles se encuentran dentro de un panel bootstrap (<div class=”panel panel-success”>) y como es obvio, permite introducir los destinatarios del correo electrónico, incluidos los de copia y copia oculta; el asunto del mensaje y el contenido o cuerpo.

Por último, y fuera del panel, hay un botón para enviar el mensaje.

 

Envío de correo electrónico con ASP.NET

Hemos dividido la composición del interfaz en 5 zonas a destacar:

1.- Mensaje de información; 2.- Destinatarios del mensaje (Para, CC y Bcc); 3.- Botones para pasar una dirección de email a la lista general; 4.- Lista general de destinatarios; y 5.- Botón para enviar el Email.

Como el interfaz, la funcionalidad es muy sencilla, y se basa en introducir destinatarios en su correspondientes campos de texto (2) para, con copia y/o con copia oculta. Al pulsar el botón de su derecha (3), el programa validará el formato del email y mostrará un mensaje de error (1) si no es correcto. En caso contrario, el destinatario pasará a la lista general de destinatarios a la derecha del botón (4).

Por último, al pulsar el botón de Enviar Email (5), el programa chequeará las listas de destinatarios y mostrará un mensaje de error en caso de que no haya ninguno. También comprobará que el mensaje tiene contenido. Para ello, creamos un array por cada lista general de destinatarios (para, con copia y/o con copia oculta) -siempre y cuando tengan contenido-. Al pulsar sobre el botón de enviar el email, se añadirán cada uno de los destinatarios al correo mediante los métodos To.AddCC.Add, y Bcc.Add. Se mostrará un mensaje de confirmación javascript: OnClientClick=”return confirm(‘¿Seguro que quiere mandar el mensaje?’);”. Finalmente, si todo está OK, el mensaje de asp:lblInfo mostrará: “Envío correcto”.

Cuando veas el CodeBehind, comprobarás que según necesitemos un mensaje de “error” o de “OK”, utilizaremos las clase bootstrap label label-danger o label label-sucess, para mostrar el fondo del mensaje en rojo o en verde, respectivamente.

A continuación, vamos con el diseño de la web

CodeBehind

Load

 

Clase RegexUtilities para validar el fomato de las direcciones email

 

Enviar el eMail

 

Pulsar el botón para pasar el destinatario introducido a la lista general (para)

 

Pulsar el botón para pasar el destinatario introducido a la lista general (CC)

 

Pulsar el botón para pasar el destinatario introducido a la lista general (Bcc)

 

Para generar el código, hemos importado las siguientes librerías: System.Text.RegularExpressions; System.Globalization; System.Collections.Generic; y System.Net.Mail

Y recuerda incluir en el fichero de configuración Web.config las siguientes líneas (cambia los datos según tu propia configuración)…

 

 

Como siempre, te dejamos el ejemplo para que puedas toquetear y probar todo lo que hemos visto en este post. ¡Espero que te haya gustado!

Ir al Ejemplo 4

Hasta la próxima.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *