Los clientes de correo que hay en el mercado tienen muchos servicios, entre ellos recibir o enviar correos.
En este post vas a aprender cómo enviar correos electrónicos utilizando la tecnologia de NetCore y usando el patrón de desarrollo de aplicaciones web Model-View-Controller. Este modelo de desarrollo permite realizar aplicaciones web con C# y separa por capas el código de nuestra aplicación.

Para empezar, vamos a explicar brevemente en que consiste este concepto.
MVC es una propuesta de arquitectura utilizada para dividir el código por capas que interactúan entre ellas para entregar un producto final muy robusto y seguro. Sus capas son:

Model: Estas clases permiten acceder a datos. Funcionan como objetos con propiedades particulares. 

Vistas: Es el código visual que se muestra en el navegador. Este contendrá el HTML y será la parte del Front de nuestra aplicación. 

Controller: Esta capa es la encargada de contener toda la lógica. Enviará datos para que sean mostrados en las vistas y utilizará la información de los Models.  

Requisitos previos

-Utilizaremos el IDE, Visual Studio 2019. Esta herramienta nos permitirá escribir y desarrollar nuestro código siguiendo unos patrones y una metodología más organizada. 

-Necesitaremos un navegador (Vale cualquiera de los más reconocidos del mercado) en el que podremos visualizar e interactuar con nuestra aplicación. 

Desarrollo de la app

Lo primero que haremos será crear un proyecto en Visual Studio Code.

La template que utilizaremos para nuestro proyecto será, como hemos dicho antes, MVC.

Lo demás lo dejamos por defecto y le damos a «create».

Una vez tenemos el proyecto, lo primero que vamos a hacer es crear un controlador llamado CorreosController en la carpeta de Controllers(Para poder navegar entre las carpetas y archivos de nuestro proyecto, sobre la barra superior de la ventana del VS clicamos en View y seleccionamos “Solution Explorer”). 

Lo siguiente que haremos es configuar el controller será el que permitirá mostrar las vistas cuando el usuario se dirija a la ruta que queramos. 

En el controller tendremos un método por defecto. Éste lo que devuelve es una vista.

CorreosController

namespace Correo_Post_Videotutorial_NetCore.Controllers
{
    public class CorreosController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

Sobre la palabra Index hacemos click derecho y le damos a “Add View” y después seleccionamos “Razor View-Empty”. De esta manera crearemos una View.  

La vista la creará dentro de Views/nombre de nuestro Controller 

Abrimos el archivo Index. Sobre él, escribiremos el código HTML con el que el usuario va a interactuar para poder enviar correos. 

En este caso vamos a hacer un formulario en el que haya varios inputs.

Index

<h1>Enviar correos electrónicos</h1>

<form method="post">
    <label>Destinatario: </label>
    <input type="email" class="form-control" name="receptor" placeholder="Ejemplo: 'alguien@correo.com'" required/>
    <br />
    <label>Asunto: </label>
    <input type="text" class="form-control" name="asunto" placeholder="Asunto" required/>
    <br />
    <label>Mensaje:</label>
    <textarea name="texto" class="form-control" placeholder="Escribe tu mensaje"></textarea>
    <br />
    <button type="submit" class="btn btn-success">
        Enviar correo
    </button>
</form>

<h1 style="color:red">@ViewData["MENSAJE"]</h1>

Como vemos, es un formulario que utiliza el método post. De esta manera en el momento en el que el botón haga submit y envíe los datos, estos serán recogidos por el controlador.

Para poder visualizar nuestro formulario hay que añadir a nuestro menú un enlace para acceder a nuestra vista.
Buscamos el archivo _Layout.cshtml en la carpeta Views/Shared/(Este archivo contiene la plantilla sobre la que se muestran las vistas). Aquí encontraremos un HTML en el que habrá un <nav>, y añadiremos lo siguiente:

_Layout.cshtml

 <li class="nav-item">
            <a class="nav-link text-dark" asp-controller="Correos" 
asp-action="Index">Correo</a>
        </li>

En este link, indicamos el controller que se va a llamar y que vista va a mostrar al pulsar.

Este seria el resultado de nuestro formulario.

Escribiremos la dirección del destinatario al que queramos enviar el correo, añadiremos el asunto que le aparecerá en su buzón y luego el mensaje que verá cuando abra el correo.

Lo siguiente que haremos será crear el método que recoja esa información, la procese y nos devuelva otra salida. Sobre nuestro Controller añadimos lo siguiente:

CorreosController

 [HttpPost]
        public IActionResult Index(string receptor, string asunto, string texto)
        {
            return View();
        }

El [HttpPost] que vemos en la parte superior del método, es la función que le indica a la función que está justo debajo que se ejecute después de que se realize el submit. Este método se llamará igual que el anterior y recibirá unos parámetros(Es importante saber que el nombre de estos parámetros deberá ser el mismo que la etiqueta «name» de los input del formulario). Esta vista lo que va a devolver, de momento, es nuestro formulario, y más adelante mostraremos algún otro componente.

El siguiente paso es crear la funcionalidad para poder enviar correos.

Para poder enviar correos será necesario añadir a nuestro proyecto una cuenta de correo y su contraseña, además de unos parámetros según sea nuestra cuenta de correo.

Es importante aclarar que mi correo utilizado es un hotmail, y que por lo tanto su configuración es específica para ese tipo de cuentas.

Para esto nos iremos al archivo appsettings.json y añadiremos lo siguiente:

Startup

"MailSettings": {
    "user": "", //Cuenta de Correo(No lo pongo por seguridad)
    "password": "", //Contraseña(No la pongo por seguridad)
    "host": "smtp.office365.com",
    "port": 25
  }

¡Cuidado al subir el proyecto a GitHub o compartirlo! Este archivo contiene la información de tu cuenta de correo y podría ser utilizada, asique borra lo que hay entre comillas si lo vas a compartir

Después, vamos a utilizar una capa adicional llamada helper, de tal manera que ésta contendrá lógica que será utilizada por el controller y así evitaremos sobrecargar el controller.
Sobre el proyecto vamos a crear una carpeta llamada Helpers y sobre esa carpeta crearemos una clase llamada HelperMail.

Lo primero que vamos a hacer es inyectar las dependencias de la clase IConfiguration:

HelperMail

 private IConfiguration configuration;
        public HelperMail(IConfiguration configuration)
        {
            this.configuration = configuration;
        }

Después crearemos un método para darle una forma a nuestro email.

 private MailMessage ConfigureMail
            (string destinatario, string asunto, string mensaje)
        {
            string from = this.configuration.GetValue<string>("MailSettings:user");
            MailMessage mail = new MailMessage();
            mail.From = new MailAddress(from);
            mail.To.Add(new MailAddress(destinatario));
            mail.Subject = asunto;
            mail.Body = mensaje;
            mail.IsBodyHtml = true;
            return mail;
        }

Éste método recibirá tres parámetros y devolverá un objeto MailMessage. Éste objeto tendrá un emisor, un receptor, un mensaje y un asunto. También añadiremos la posibilidad de que el mensaje enviado tenga etiquetas HTML y las interprete a la hora de enviar el mensaje.

El siguiente método será el que indicará al programa el tipo de protocolo por el que va a enviar el correo.

private void ConfigureSmtp(MailMessage mail)
        {
            string user =
                this.configuration.GetValue<string>("MailSettings:user");
            string password =
                this.configuration.GetValue<string>("MailSettings:password");
            string host =
                this.configuration.GetValue<string>("MailSettings:host");

            SmtpClient client = new SmtpClient();
            client.Port = 587;
            client.EnableSsl = true;
            client.UseDefaultCredentials = false;
            client.Host = host;
            NetworkCredential credentials =
                new NetworkCredential(user, password);
            client.Credentials = credentials;
            client.Send(mail);
        }

Va a recibir un parámetro del tipo MailMessage y no va a devolver nada, ya que este método solo sirve para determinar como va a funcionar el protocolo SMTP(protocolo de envio de correo).

Agregaremos un útimo método que será el que utilice el controller para enviar el mail. Para ello se ayudará de los otros dos métodos.

public void SendMail(string destinatario, string asunto, string mensaje)
        {
            MailMessage mail = this.ConfigureMail(destinatario, asunto, mensaje);
            this.ConfigureSmtp(mail);
        }

Va a recibir los tres parámetros y no devolverá nada, ya que simplemente se ejecutará y hará la acción de enviar el correo al destinatario que hayamos elegido.

Por último añadiremos los using(un using se utiliza para referenciar a paquetes que contienen funciones y que tenenemos instalados en nuestro proyecto) necesarios:

using Microsoft.Extensions.Configuration;
using System.Net;
using System.Net.Mail;

Para que el helper pueda ser utilizado en el proyecto debemos añadirlo en el archivo startup.cs, que es el que se tiene toda la configuración de nuestro proyecto.
Sobre el método ConfigureServices(IServiceCollection services) añadimos:

Startup

services.AddSingleton<IConfiguration>(this.Configuration);
services.AddSingleton<HelperMail>();

Una vez hemos hecho esto volvemos a nuestro controller para añadir toda esta funcionalidad que hemos desarrollado.
Lo primero que haremos será inyectar las depencencias de nuestro helper:

CorreosController

 private HelperMail helpermail; 
public CorreosController(HelperMail helpermail)
        {
            this.helpermail = helpermail;
        }

En el método Index que recibia parámetros y que se ejecutaba después de hacer el post añadimos lo siguiente:

string mensajefinal =
 "<h1>Proyecto Techclub Tajamar(MVC NetCore Correos)<h1/><h4>" + texto + " <h4/>"
                                    ; 
            this.helpermail.SendMail(receptor, asunto, mensajefinal);
            ViewData["MENSAJE"] = "Mensaje enviado a '" + receptor + "'";

Lo primero que tenemos es una variable en la que «maquillaremos» un poco el mensaje que enviamos.
Después se ejecutará el método que creamos en el helper.
Por último, escribimos un mensaje de confirmación que será mostrado una vez se envíe el correo.

Vamos a hacer la prueba del funcionamiento de nuestra aplicación.
Arrancaremos el servidor que viene con Visual Studio para visualizar las aplicaciones. Pulsaremos en el siguiente botón:

En nuestro navegador nos mostrará el home y debemos dirigirnos en el menú a la opción «correo» y nos saldrá nuestro formulario.


Cumplimentamos el formulario y una vez le demos a enviar nos debería salir nuestro mensaje de confirmación.

¡Ya solo queda comprobar tu bandeja de correo!

Conclusion

Nuestra aplicación va a ser capaz de enviar correos a cualquier usuario y esto es solo el inicio de lo que podría ser un cliente de correo o una parte de alguna otra app más grande que por ejemplo genere correos automáticamente al subscribirte a su newsletter. Para eso habría que darle otras servicios como por ejemplo recibir mensajes, enviar archivos o enviar un correo predefinido automáticamente.

Espero que este post te haya servido de ayuda para poder implementar todas estas características a tu aplicación. Dejo el enlace de Github abajo, donde podrás ver todo mi proyecto y por si tienes alguna duda puedes contactar conmigo a través de mi Linkedin.

Autor/a: Diego Sánchez Cañamero
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma 
Centro: Tajamar 
Año académico: 2021-2022 
Código: Proyecto Console
Projecto MVC
Linkedin

This Post Has One Comment

  1. Federico Cuevas Reply

    Disculpa, no entiendo el paso de startup. Dice que hay que añadir ciertas líneas al archivo appsettings.json, pero luego habla del startup como una clase ya creada con toda la configuración del proyecto

Leave a Comment

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.