Send an email with Angular, .NET Core and Radzen

This blog post demonstrates how to invoke POST request from an Angular 5 application to .NET Core 2.x Web API controller and send an email using System.Net.Mail.SmtpClient.

1.Create new Radzen application with .NET Core 2.x server-side project, add new empty page and set new mailMessage property on Page Load event to empty object: send-email1.png send-email2.png send-email3.png

2.Design your email form using Rows and Columns and set mailMessage respective property on every input component change: send-email4.png

3.Add new Button component at the end of the email form and execute (<any>this).sendEmail(this.mailMessage) on Button Click event send-email5.png

4.Run the application to generate Angular and .NET Core apps and add the following code to client/send-email.component.ts and server/SendMailController.cs similar to Invoke custom server-side method article:

client/send-email.component.ts

import { Component, Injector } from '@angular/core';
import { SendEmailGenerated } from './send-email-generated.component';

// Import HttpClient and HttpParams which are needed to make HTTP calls.
import { HttpClient, HttpHeaders } from '@angular/common/http';
// Import the environment to get the server URL
import { environment } from '../../environments/environment';

@Component({
  selector: 'send-email',
  templateUrl: './send-email.component.html'
})
export class SendEmailComponent extends SendEmailGenerated {
  constructor(injector: Injector, private http: HttpClient) {
    super(injector);
  }

  sendEmail(mailMessage: any) {
    let headers = new HttpHeaders();

    headers = headers.set('Accept', 'application/json');

    if (mailMessage) {
      headers = headers.set('Content-Type', 'application/json');
    }

    this.http.post(`http://localhost:5000/api/mail/sendmail`, mailMessage, {
      headers
    }).subscribe(result => {
      console.log("Email sent!");
    });

  }
}

server/SendMailController.cs

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace Sample.Controllers
{
    public class Email
    {
        public string To { get; set; }
        public string Cc { get; set; }
        public string Subject { get; set; }
        public string Text { get; set; }
    }

    [Route("api/[controller]/[action]")]
    public class MailController : Controller
    {
        [HttpPost]
        public async Task<IActionResult> SendMail([FromBody]Email email)
        {
            var client = new System.Net.Mail.SmtpClient("smtp.example.com", 111);
            client.UseDefaultCredentials = false;
            client.EnableSsl = true;

            client.Credentials = new System.Net.NetworkCredential("yourusername", "yourpassword");

            var mailMessage = new System.Net.Mail.MailMessage();
            mailMessage.From = new System.Net.Mail.MailAddress("youremail@example.com");

            mailMessage.To.Add(email.To);

            if (!string.IsNullOrEmpty(email.Cc))
            {
                mailMessage.CC.Add(email.Cc);
            }

            mailMessage.Body = email.Text;

            mailMessage.Subject = email.Subject;

            mailMessage.BodyEncoding = System.Text.Encoding.UTF8;
            mailMessage.SubjectEncoding = System.Text.Encoding.UTF8;

            await client.SendMailAsync(mailMessage);

            return Ok();
        }
    }
}

5.Run the application, compose your email and send it: send-email6.png

Enjoy!

by Vladimir Enchev

Connect to Google Drive using Angular, REST services, OAuth and Radzen

This blog post demonstrates how to create an Angular app with Radzen that will access Google Drive using OAuth authorization!
Read more