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:

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

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

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.tslink

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.cslink

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:

Enjoy!