This example leverages the Mailkit library to send an email using our native Blazor Report Viewer.
The Send Email button in the Viewer’s toolbar opens the Send Email dialog (DxPopup).You can specify the recipient list, subject, attachment, and body within the dialog. Click the Send button to send the report with the specified settings:
Example of email output:
The example handles the CustomizeToolbar event to add a Send Email button to the Blazor Report Viewer's Toolbar. The code snippet below locates the Export To command and adds the new button next to it:
void OnCustomizeToolbar(ToolbarModel toolbarModel) {
toolbarModel.AllItems.Insert(toolbarModel.AllItems.FindIndex(i => i.Id == ToolbarItemId.ExportTo), new ToolbarItem() {
IconCssClass = "mail-icon",
Text = "Send Email",
AdaptiveText = "Send Email",
AdaptivePriority = 1,
Click = (args) => {
IsPopupVisible = ValidateEditingFields();
return Task.CompletedTask;
}
});
}Clicking the newly added button opens a DxPopup used to specify email options: recipients, subject, and body. The pop-up form uses the following components:
- DxTagBox allows users to select individual recipients and build a list.
- DxTextBox allows users to specify email subject and attachment file name.
- DxComboBox allows users to select attachment format.
- DxHtmlEditor allows users to specify the mail body.
For DxPopup configuration, refer to the following file: ReportViewer.razor.
The DxToastProvider component displays data validation notifications to users.
For DxToastProvider configuration, refer to the following file: ReportViewer.razor.
Important
This example specifies credentials for SMTP server authentication. In production projects, you should always use secrets to store sensitive information. Remember, always follow security best-practices to protect the integrity of your app.
Clicking the Send button in the Send Email window triggers the server-side EmailService.SendEmailAsync method. This method exports a report (to the specified format) and emails the generated report based upon specified settings.
MailKitEmailService uses the MailKit library. You can configure the SendEmailAsync method to connect to your SMTP server of choice.
Register the service in the Program.cs file:
builder.Services.AddScoped<IEmailService, MailKitEmailService>();You can use MailDev to test your application during development.
Refer to the files below for more information:
- EmailService.cs implements email send related logic.
- ReportViewer.razor contains code that handles user inputs and uses the
EmailService.
The example implements two levels of validation:
- When a user clicks the Send Email button in the Blazor Report Viewer's Toolbar, the Send Email dialog opens only if all editing fields are filled.
- When a user clicks the Send button in the Send Email dialog, the email is sent only when all the required fields are populated.
The DxToastProvider component displays validation notifications to users.
Refer to the files below to learn more about validation logic used in this example: