Menu

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

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

Envió de correo electrónico con ASP.NET, Bootstrap y JQuery

El mes pasado, publicamos un post que enseñaba como programar el envío de correos electrónicos con ASP.NET y maquetado con Bootstrap, y hoy volvemos con otro artículo, en el cual, mejoramos un poco la anterior interfaz de usuario, a fin de dotarla de mayor funcionalidad.

 

Envío de correo electrónico Mejorado

La base del diseño y el maquetado Bootstrap, así como la funcionalidad, son prácticamente iguales que el anterior ejemplo, si bien, hemos optimizado la introducción de las direcciones de correo electrónico en los campos de texto “Para”, “CC” y “Bcc”, usando un autocompletador tipo GOOGLE (punto 1), de forma que según se vayan tecleando caracteres sobre dichos campos, se irán mostrando las coincidencias encontradas en una fuente de datos. Para llegar a cabo esta funcionalidad, hemos usado el widgets Autocomplete del famoso framework jQuery User Interface. Podríamos haber optado también por el control AutoCompleteExtender de AJAX Control Toolkit, pero nos pareció interesante mostrarte la inclusión de utilidades ajenas a ASP.NET.

Envío de correo electrónico Mejorado

Como fuente de datos para éste y posteriores ejemplos, hemos creado y posteriormente añadido una tabla a la B.D. SQL “Northwind“, ya utilizada en ejemplos anterioresEvidentemente los datos contenidos en esta tabla se han rellenado mediante un generador aleatorio, por lo tanto ficticios. No obstante, y al margen del autocompletador, siempre puedes optar por añadir emails auténticos de forma manual.

En este interfaz mejorado, hemos incluido, un editor de código HTML (punto 2) por si el usuario quisiera mandar por correo electrónico un contenido enriquecido (con textos de diferentes colores, tamaños de fuente de letra, sangrías, etc). Este editor permite, mediante botones en una barra de herramientas, crear contenido HTML sencillo con suma facilidad, incluso para aquellos que no controlen el lenguaje de etiquetas.

Para materializar el editor, hemos utilizado el control de servidor HtmlEditorExtender de AJAX Control Toolkit,

Hemos incorporado también 2 controles de servidor CheckBox. El primero (punto 2), para elegir entre un envío de email con contenido enriquecido HTML del cuerpo, o envío estándar con texto plano.

Envío de correo electrónico Mejorado

 

Cuando está seleccionado (checked) el campo para elegir el Cuerpo HTML, se muestra automáticamente la barra de herramientas con los botones del editor, y desaparece cuando se quita la selección del campo. El contenido de este campo, hará que el cuerpo del correo se envíe finalmente en formato HTML o no.

Envío de correo electrónico Mejorado

 

El segundo control CheckBox, (punto 5), ofrecerá la posibilidad de solicitar un acuse de recibo cuando esté seleccionado.

Envío de correo electrónico Mejorado

 

También, se ha incorporado la prioridad en el envío, con tres opciones: baja, normal y alta (punto 3).

Envío de correo electrónico Mejorado

 

Y por último, hemos añadido la funcionalidad de gestionar ficheros adjuntos (punto 4). Esta utilidad, permite seleccionar ficheros que serán incluidos en una lista visible. Cualquiera de los ficheros seleccionados, pueden ser eliminados de la lista antes de enviarse el email, pulsando sobre el cuadrado rojo. Para materializar esta funcionalidad, utillizamos el plugin Multiple File Selection de JQuery.

 

Envío de correo electrónico Mejorado

Antes de mostrarte el código fuente, te recuerdo que gran parte de la funcionalidad, no ha cambiado respecto del ejemplo anterior, por lo tanto, para no alargar demasiado este post, te mostraremos solo las novedades. Por eso, te aconsejamos que leas primero, si no lo has hecho ya, el Ejemplo 4, pues es la base de partida de éste.

Como has podido comprobar, hemos incluido un par de plugins de jQuery en el ejemplo, para que veas la grandes ventajas que nos puede ofrecer los frameworks externos en nuestros programas de ASP.NET. No olvides incorporar los ficheros jquery.min.jsjquery.MultiFile.js y la siguiente función entre las etiquetas <head>…</head>, para el autocompletador:

Esta función BindControls(), adapta la funcionalidad de “autocompletar” a los campos CPH_Cuerpo_txtPara, CPH_Cuerpo_txtCC y CPH_Cuerpo_txtBcc, que como habrás comprobado, son los campos HTML que dan como resultado, los controles de servidor textBox: txtPara, txtCC y txtBcc, una vez compilados. Toma la información de la BD a través de la función ShowEmail del Servicio Web y le indicamos que tiene que introducir un mínimo de 2 caracteres para que funcione.

WebService:

 

Capa de diseño:

Y ahora vamos con la capa de negocio. Para ello, solo te mostraremos aquellas funciones que hayan cambiado respecto del ejemplo anterior, por lo tanto, si no lo has hecho ya, te aconsejo que lo leas antes de continuar.

Enviar el mensaje

 

CheckBox para utillizar el editor HTML

el control editor de texto HTML está disponible cuando el CheckBox está seleccionado…

 

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 5

Hasta la próxima.

2 pensamientos sobre “Envío de correo electrónico con ASP.NET mejorado

Jose

No teneis el proyecto para poder descargarlo? gracias

Respuesta
    UsrBlogSiiNet

    Hola Jose, no tenemos un repositorio con los fuentes, pero con el código que te mostramos en este post, debes tener suficiente información para poder correr el ejemplo en tu propio proyecto. No obstante, si tienes algún problema, cuéntanoslo y te ayudaremos a resolverlo.

    Respuesta

Deja un comentario

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