Blazor Wasm sending mail throw exception System.PlatformNotSupportedException: System.Net.Dns:GetHostByName is not supported on this platform

Question

I'm trying to send an email from a Blazor WASM app but I'm getting this exception

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Message could not be sent. System.Net.Mail.SmtpException: Message could not be sent. ---> System.PlatformNotSupportedException: System.Net.Dns:GetHostByName is not supported on this platform. at System.Net.Sockets.TcpClient..ctor (System.String hostname, System.Int32 port) <0x44e7108 + 0x000aa> in :0 at System.Net.Mail.SmtpClient.SendInternal (System.Net.Mail.MailMessage message) <0x44e6a78 + 0x00016> in :0 at System.Net.Mail.SmtpClient.Send (System.Net.Mail.MailMessage message) <0x44e19c0 + 0x000c4> in :0 --- End of inner exception stack trace --- at System.Net.Mail.SmtpClient.Send (System.Net.Mail.MailMessage message) <0x44e19c0 + 0x000ee> in :0 at MusicSellingApp.Client.Pages.ArtistProfile.SendMail () [0x000a3] in C:\Users\ismailghedamsi\Source\Repos\MusicSellingPlatformVeille\MusicSellingApp\Client\Pages\ArtistProfile.razor:33 at MusicSellingApp.Client.Pages.ArtistProfile.OnInitializedAsync () [0x0000f] in C:\Users\ismailghedamsi\Source\Repos\MusicSellingPlatformVeille\MusicSellingApp\Client\Pages\ArtistProfile.razor:38 at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync () <0x3f6d608 + 0x0013a> in :0

This is my razor file

@page "/artistProfile"
@inject ILocalStorageService storageService
@using System.Net.Mail
<h2>@(artist == null)</h2>
<UserInfoComponent User="@artist" />

@code{
    Artist artist;

    public void SendMail()
    {
        try
        {
            using (MailMessage mail = new MailMessage())
            {
                mail.From = new MailAddress("[email protected]");
                mail.To.Add("[email protected]");
                mail.Subject = "Sending mail";
                mail.Body = "<h2>this is a mail body</h2>";
                mail.IsBodyHtml = true;
                using (SmtpClient smtp = new SmtpClient("smtp.gmail.com", 587))
                {
                    smtp.Credentials = new System.Net.NetworkCredential("[email protected]", "mypassword");
                    smtp.EnableSsl = true;
                    smtp.Send(mail);
                }
            }
        }
        catch (Exception)
        {
            throw;
        }
    }
    protected override async Task OnInitializedAsync()
    {
        SendMail();
        artist = await storageService.GetItemAsync<Artist>("loggedUser");
    }

}

The same c# code is working on a console app

Answer 1

Even though Blazor (wasm) can run C# code direct on the browser, it's limited by the browser capabilities, send an e-mail is not something the browser can do. In this cases generally what happens is that a PlatformNotSupportedException is throw or you'll get a warning on visual studio CA1416: Validate platform compatibility. The alternative in this case would be call a server API that sends the e-mail.

Answer 2

@Guilherme's answer is mostly correct in that Blazor (WASM) cannot use classes like SmtpClient, which are not supported on the browser platform. However, that is not the entire story. There is a workaround that can be used for very basic email needs that leverages the old-school technique of using "mailto:" anchor links combined with injecting the IJSRuntime.

Let me provide some sample code in case it helps the next developer that comes across this post. Just keep in mind this technique uses the querystring and the MAILTO function has a limit of around 2000 characters. Exceeding this limit may prevent the message from being opened in the user's default mail app.

From a button click or other trigger, invoke a function in your view model (or c# code):

protected void SendLocalEmail(string toEmailAddress, string subject, string body)
{
    JsRuntime.InvokeAsync<object>("blazorExtensions.SendLocalEmail",
      new object[] { toEmailAddress, subject, body });
}

Then, in your wwwroot folder, you should have a corresponding .js file (i.e. GlobalFunctions.js) that contains the corresponding JavaScript SendLocalEmail() function such as:

window.blazorExtensions = {
  SendLocalEmail: function (mailto, subject, body) {
    var link = document.createElement('a');
    var uri = "mailto:" + mailto + "?";
    if (!isEmpty(subject)) {
        uri = uri + "subject=" + subject;
    }

    if (!isEmpty(body)) {
        if (!isEmpty(subject)) { // We already appended one querystring parameter, add the '&' separator
            uri = uri + "&"
        }

        uri = uri + "body=" + body;
    }

    uri = encodeURI(uri);
    uri = uri.substring(0, 2000); // Avoid exceeding querystring limits.
    console.log('Clicking SendLocalEmail link:', uri);

    link.href = uri;
    document.body.appendChild(link); // Needed for Firefox
    link.click();
    document.body.removeChild(link);
  }
};

function isEmpty(str) {
  return (!str || str.length === 0);
}

Finally, be sure you include a reference to your .js file in the index.html file (also in the wwwroot folder):

<script src="GlobalFunctions.js"></script>

I place the above script reference below this line:

<script>navigator.serviceWorker.register('service-worker.js');</script>