Blazor Scheduler에서 이벤트에 대한 e-메일 및 알림을 보내는 방법

69325 단어 webdevcsharpblazordotnet
SyncfusionBlazor Scheduler은 사용자가 시간을 효율적으로 관리할 수 있도록 도와주는 기능이 모두 갖추어진 달력 구성 요소입니다.편집기 팝업 창, 드래그, 크기 조정 등을 통해 데이트를 재배치하는 데 도움이 된다.
Blazor 스케줄러는 프로젝트에 참여한 모든 사람에게 이메일과 알림 알림을 보낼 수 있습니다.이 블로그에서는 Blazor 스케줄러 애플리케이션에서 e-메일 및 알림 설정을 구성하는 방법에 대해 설명합니다.
우리 시작합시다!

프로젝트 설정


먼저 Blazor 서버 쪽 응용 프로그램에 간단한 스케줄러를 만듭니다.일반 사양 구성에 대한 자세한 내용은 이 UG 설명서Getting Started with Blazor Scheduler Component를 참조하십시오.

e-메일 설정 구성


프로젝트에서 전자 우편 설정을 설정합니다.
1단계: 화면 캡처의 Models와 같은 프로젝트 루트 디렉터리에 새 폴더를 만듭니다.

2단계: 모델 폴더에 이벤트 모델이라는 클래스를 생성합니다.
public class EventModel
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public string Location { get; set; }
    public string Description { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
    public string StartTimezone { get; set; }
    public string EndTimezone { get; set; }
    public bool? IsAllDay { get; set; }
    public bool? IsBlock { get; set; }
    public bool? IsReadonly { get; set; }
    public int? RecurrenceID { get; set; }
    public int? FollowingID { get; set; }
    public string RecurrenceRule { get; set; }
    public string RecurrenceException { get; set; }
    public int? EmployeeId { get; set; }
}
3단계: 프로젝트 루트 디렉토리에 새 폴더를 만들고 이를 Email Services라고 명명합니다.

4단계: 그리고 Email 서비스 폴더에 Email Settings의 새 클래스를 만듭니다.아래의 코드 예시를 참고하시오.
public class EmailSettings
{
    public string Username { get; set; }
    public string Password { get; set; }
    public string DisplayName { get; set; }
    public string Host { get; set; }
    public int Port { get; set; }
}
5단계: IEmail Services에서 IEmail Service에 대한 인터페이스를 만듭니다.
interface IEmailService
{
    Task<string> SendEmailAsync(string ToEmailName, string Subject, EventModel Data);
    Task<string> SendEmailAsync(List<string> ToEmailNames, string Subject, EventModel Data);
    bool IsValidEmail(string EmailName);
}
6단계: 이제 Email Services 폴더에 Email Service 클래스를 만들고 IEmail Service 인터페이스에서 이를 상속합니다.
public class EmailService : IEmailService
{
    private readonly EmailSettings _mailConfig;
    private static string _mailResponse;

    public EmailService(EmailSettings mailConfig)
    {
        _mailConfig = mailConfig;
    }

    public async Task<string> SendEmailAsync(string ToEmailName, string Subject, EventModel Data)
    {
        return await SendEmailAsync(new List<string>() { ToEmailName }, Subject, Data);
    }

    public async Task<string> SendEmailAsync(List<string> ToEmailName, string Subject, EventModel Data)
    {
        _mailResponse = string.Empty;

        using (SmtpClient smtpClient = new SmtpClient(_mailConfig.Host, _mailConfig.Port))
        {
            smtpClient.UseDefaultCredentials = true;
            smtpClient.Credentials = new NetworkCredential(_mailConfig.Username, _mailConfig.Password);
            smtpClient.EnableSsl = true;
            smtpClient.DeliveryMethod = SmtpDeliveryMethod.Network;
            smtpClient.SendCompleted += new SendCompletedEventHandler((object sender, AsyncCompletedEventArgs e) => {
                    _mailResponse = (e.Error != null || e.Cancelled != false) ? "failure" : "success";
                });

            MailMessage message = new MailMessage
            {
                From = new MailAddress(_mailConfig.Username, _mailConfig.DisplayName),
                Subject = Subject,
                SubjectEncoding = Encoding.UTF8,
                BodyEncoding = Encoding.UTF8,
                HeadersEncoding = Encoding.UTF8,
                IsBodyHtml = true,
                Body = GetEmailContent(Subject, Data),
                Priority = MailPriority.High
            };
            foreach (string EmailName in ToEmailName)
            {
                message.To.Add(new MailAddress(EmailName));
            }

            await smtpClient.SendMailAsync(message);
        }

        return _mailResponse;
    }

    public bool IsValidEmail(string EmailName)
    {
        return new EmailAddressAttribute().IsValid(EmailName);
    }

    private string GetEmailContent(string Title, EventModel Data)
    {
        string HTMLBody = string.Empty;

            using (FileStream fs = File.Open(Directory.GetCurrentDirectory() + "/Email_Template.html", FileMode.Open, FileAccess.ReadWrite))
            {
                using (StreamReader sr = new StreamReader(fs))
                {
                    HTMLBody = sr.ReadToEnd();
                }
            }

            HTMLBody = HTMLBody.Replace("###EMAILTITLE###", Title);
            HTMLBody = HTMLBody.Replace("###EVENTSUBJECT###", Data.Subject ?? "(No Title)");
            HTMLBody = HTMLBody.Replace("###EVENTSTART###", Data.StartTime.ToString());
            HTMLBody = HTMLBody.Replace("###EVENTEND###", Data.EndTime.ToString());
            HTMLBody = HTMLBody.Replace("###EVENTLOCATION###", Data.Location ?? "NA");
            HTMLBody = HTMLBody.Replace("###EVENTDETAILS###", Data.Description ?? "NA");
            HTMLBody = HTMLBody.Replace("###CURRENTYEAR###", DateTime.Now.Year.ToString());

            return HTMLBody;
    }
}
주의: 프로젝트 루트 디렉터리에 이메일 템플릿을 만들 수도 있습니다. 이름은 이메일 template입니다.html.
7단계: 응용 프로그램 설정에서json 파일, 전자 우편 설정에 대한 증거를 정의합니다.
"EmailSettings": {
    "DisplayName": "Syncfusion Scheduler",
    "Username": "[email protected]",
    "Password": "xxxxxxxxxx",
    "Port": 587,
    "Host": "smtp.office365.com"
}
참고: 이전 설정에서 포트 번호 및 Host 이름은 전자 메일 도메인에 따라 다릅니다.
8단계: 시작 단계.cs 파일, Configure Service 메서드에 Email Service를 추가합니다.
public void ConfigureServices(IServiceCollection services)
{
  . . . . . . . . . . . . . 
  . . . . . . . . . . . . .
  services.AddSingleton(Configuration.GetSection("EmailSettings").Get<EmailSettings>());
  services.AddScoped<IEmailService, EmailService>();
}
이제 Email Service가 성공적으로 구성되었습니다.
9단계: 그리고 색인에서.razor 파일은 전자 우편 서비스에 주입됩니다. 아래 코드와 같습니다.
@inject EmailScheduler.EmailServices.IEmailService EmailService
이제 이벤트가 발생할 때 이 서비스를 사용하여 적당한 사람에게 이메일을 보냅니다.
다음은 계획 프로그램에서 누군가에게 새로운 이벤트를 계획할 때 전자메일을 보내는 코드입니다.
@page "/"
@inject EmailScheduler.EmailServices.IEmailService EmailService

@using EmailScheduler.Models
@using Syncfusion.Blazor.Schedule

<div class="control-container">
    <div class="schedule-control">
        <SfSchedule @ref="ScheduleRef" TValue="EventModel" Height="500px">
            <ScheduleGroup EnableCompactView="false" Resources="@GroupData"></ScheduleGroup>
            <ScheduleResources>
                <ScheduleResource TItem="ResourceModel" TValue="int[]" DataSource="@ResourceData" Field="EmployeeId" Title="Employee Name" Name="Employees" TextField="EmployeeName" IdField="EmployeeId" ColorField="EmployeeColor" AllowMultiple="true"></ScheduleResource>
            </ScheduleResources>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
            <ScheduleEvents TValue="EventModel" ActionCompleted="OnActionCompleted"></ScheduleEvents>
        </SfSchedule>
    </div>
</div>

@code{
    SfSchedule<EventModel> ScheduleRef;

    private class ResourceModel
    {
        public string EmployeeName { get; set; }
        public int EmployeeId { get; set; }
        public string EmployeeColor { get; set; }
        public string EmployeeEmail { get; set; }
    }

    private string[] GroupData { get; set; } = new string[] { "Employees" };
    private List<ResourceModel> ResourceData { get; set; } = new List<ResourceModel> {
        new ResourceModel { EmployeeId = 1, EmployeeName = "Employee 1", EmployeeColor = "#EA7A57", EmployeeEmail = "[email protected]" },
        new ResourceModel { EmployeeId = 2, EmployeeName = "Employee 2", EmployeeColor = "#357cd2", EmployeeEmail = "[email protected]" },
        new ResourceModel { EmployeeId = 3, EmployeeName = "Employee 3", EmployeeColor = "#7fa900", EmployeeEmail = "[email protected]" }
    };
    private List<EventModel> DataSource = GenerateEvents();

    private static List<EventModel> GenerateEvents()
    {
        DateTime date1 = DateTime.Now;
        DateTime startDate = new DateTime(date1.Year, date1.Month, date1.Day, date1.Hour, date1.Minute, 0).AddMinutes(6);
        DateTime endDate = new DateTime(startDate.Ticks).AddHours(2);
        List<EventModel> collections = new List<EventModel>() {
            new EventModel { Id = 1, Subject = "Testing", StartTime = startDate, EndTime = endDate, EmployeeId = 1 },
            new EventModel { Id = 2, Subject = "Meeting", StartTime = startDate, EndTime = endDate, EmployeeId = 2 },
            new EventModel { Id = 3, Subject = "Conference", StartTime = startDate, EndTime = endDate, EmployeeId = 3 }
        };
        return collections;
    }

    private async void OnActionCompleted(ActionEventArgs<EventModel> args)
    {
        if (args.ActionType == ActionType.EventCreate || args.ActionType == ActionType.EventChange || args.ActionType == ActionType.EventRemove)
        {
            List<EventModel> added = args.AddedRecords ?? new List<EventModel>();
            List<EventModel> changed = args.ChangedRecords ?? new List<EventModel>();
            List<EventModel> deleted = args.DeletedRecords ?? new List<EventModel>();
            List<EventModel> datas = added.Concat(changed).Concat(deleted).ToList();
            List<string> toEmail = new List<string>();
            foreach (EventModel data in datas)
            {
                string email = ResourceData.Where(e => e.EmployeeId == data.EmployeeId).FirstOrDefault().EmployeeEmail;
                if (EmailService.IsValidEmail(email))
                {
                    toEmail.Add(email);
                }
            }
            toEmail = toEmail.Distinct().ToList();
            string Title = string.Empty;
            switch (args.ActionType)
            {
                case ActionType.EventCreate:
                    Title = "New Event Scheduled";
                    break;
                case ActionType.EventChange:
                    Title = "Scheduled Event Updated";
                    break;
                case ActionType.EventRemove:
                    Title = "Scheduled Event Removed";
                    break;
            }
            await EmailService.SendEmailAsync(toEmail, Title, datas[0]);
        }
    }

}
이제 행사에 참가할 계획자에게 이메일이 성공적으로 발송됩니다.

알림 설정 구성


알림 설정은 이벤트가 시작되기 전에 알림을 표시하는 데 사용됩니다.알림과 이벤트 시작 시간 사이에 서로 다른 간격을 설정할 수 있습니다.
Syncfusion BlazorToast component를 사용하면 이벤트 알림을 표시할 수 있습니다.알림 설정의 전체 코드는 다음과 같다.
@page "/"

@using EmailScheduler.Models
@using Syncfusion.Blazor.Notifications
@using Syncfusion.Blazor.Schedule
@using System.Timers

<div class="control-container">
    <div class="toast-control">
        <SfToast @ref="ToastRef" CssClass="e-schedule-reminder e-toast-info" NewestOnTop="true" ShowCloseButton="true" Target=".e-schedule" Timeout="10000">
            <ToastAnimationSettings>
                <ToastShowAnimationSettings Effect="ToastEffect.SlideRightIn"></ToastShowAnimationSettings>
                <ToastHideAnimationSettings Effect="ToastEffect.SlideRightOut"></ToastHideAnimationSettings>
            </ToastAnimationSettings>
            <ToastPosition X="Right" Y="Top"></ToastPosition>
            <ToastTemplates>
                <Template>
                    <div class="e-toast-template e-toast-info">
                        <div class="e-custom-toast">
                            <div class="e-toast-icon e-icons e-schedule-meeting-icon"></div>
                            <div class="e-avatar e-avatar-xsmall e-avatar-circle e-toast-avatar">
                                <img class="image" src="/images/status/@(EventData.EmployeeId).png" alt="avatar" />
                            </div>
                        </div>
                        <div class="e-toast-message">
                            <div class="e-toast-title">@EventData.Subject</div>
                            <div class="e-toast-content">@(EventData.StartTime.ToShortTimeString() + " - " + EventData.EndTime.ToShortTimeString())</div>
                        </div>
                    </div>
                </Template>
            </ToastTemplates>
            <ToastEvents Created="OnToastCreated"></ToastEvents>
        </SfToast>
    </div>
    <div class="schedule-control">
        <SfSchedule @ref="ScheduleRef" TValue="EventModel" Height="500px">
            <ScheduleGroup EnableCompactView="false" Resources="@GroupData"></ScheduleGroup>
            <ScheduleResources>
                <ScheduleResource TItem="ResourceModel" TValue="int[]" DataSource="@ResourceData" Field="EmployeeId" Title="Employee Name" Name="Employees" TextField="EmployeeName" IdField="EmployeeId" ColorField="EmployeeColor" AllowMultiple="true"></ScheduleResource>
            </ScheduleResources>
            <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
        </SfSchedule>
    </div>
</div>

<style>
    .e-toast .e-schedule-reminder .e-toast-template {
        display: flex;
    }

    .e-toast .e-schedule-reminder .e-custom-toast {
        display: inline-grid;
    }

    .e-toast .e-schedule-reminder .e-schedule-meeting-icon::before {
        content: "\e763";
        font-size: 20px;
    }

    .e-toast .e-schedule-reminder .e-toast-avatar {
        margin-top: 14px;
    }
</style>

@code{
    SfToast ToastRef;
    SfSchedule<EventModel> ScheduleRef;

    private class ResourceModel
    {
        public string EmployeeName { get; set; }
        public int EmployeeId { get; set; }
        public string EmployeeColor { get; set; }
        public string EmployeeEmail { get; set; }
    }

    private EventModel EventData { get; set; }
    private string[] GroupData { get; set; } = new string[] { "Employees" };
    private List<ResourceModel> ResourceData { get; set; } = new List<ResourceModel> {
        new ResourceModel { EmployeeId = 1, EmployeeName = "Employee 1", EmployeeColor = "#EA7A57", EmployeeEmail = "[email protected]" },
        new ResourceModel { EmployeeId = 2, EmployeeName = "Employee 2", EmployeeColor = "#357cd2", EmployeeEmail = "[email protected]" },
        new ResourceModel { EmployeeId = 3, EmployeeName = "Employee 3", EmployeeColor = "#7fa900", EmployeeEmail = "[email protected]" }
    };
    private List<EventModel> DataSource = GenerateEvents();

    private void OnToastCreated()
    {
        Timer timer = new Timer(60000);
        timer.Elapsed += new ElapsedEventHandler(async (object sender, ElapsedEventArgs e) =>
        {
            List<EventModel> eventDatas = ScheduleRef.GetCurrentViewEvents();
            int AlertBeforeMinutes = 5;
            DateTime CurrentTime = DateFormat(DateTime.Now);
            foreach (EventModel eventData in eventDatas)
            {
                DateTime StartTime = DateFormat(eventData.StartTime);
                if (DateTime.Compare(CurrentTime, StartTime.AddMinutes(-AlertBeforeMinutes)) == 0)
                {
                    EventData = eventData;
                    await InvokeAsync(async () => await ToastRef.Show());
                }
            }
        });
        timer.Enabled = true;
    }

    private DateTime DateFormat(DateTime date)
    {
        return new DateTime(date.Year, date.Month, date.Day, date.Hour, date.Minute, 0);
    }

    private static List<EventModel> GenerateEvents()
    {
        DateTime date1 = DateTime.Now;
        DateTime startDate = new DateTime(date1.Year, date1.Month, date1.Day, date1.Hour, date1.Minute, 0).AddMinutes(6);
        DateTime endDate = new DateTime(startDate.Ticks).AddHours(2);
        List<EventModel> collections = new List<EventModel>() {
            new EventModel { Id = 1, Subject = "Testing", StartTime = startDate, EndTime = endDate, EmployeeId = 1 },
            new EventModel { Id = 2, Subject = "Meeting", StartTime = startDate, EndTime = endDate, EmployeeId = 2 },
            new EventModel { Id = 3, Subject = "Conference", StartTime = startDate, EndTime = endDate, EmployeeId = 3 },
        };
        return collections;
    }

}
이제 알림 알림은 이벤트 시작 5분 전에 관계자에게 표시됩니다.

GitHub 참조


Blazor 서버 애플리케이션의 전체 작업 예는 this GitHub repository에서 확인할 수 있습니다.

요약


이 블로그는 Syncfusion Blazor Scheduler에서 전자 우편 서비스와 알림 설정을 설정하는 방법을 상세하게 소개했다.이렇게 하면 프로젝트에 참여한 모든 사람들이 그들에게 분배된 사건을 알려주고 그들의 임무에 대한 알림을 받는다.이것은 그들의 생산력을 높일 것이다.
그러니 이 기능들을 시험해 보고 다음 댓글 부분에 피드백을 남겨주세요.
Syncfusion Essential Studio for Blazor 소프트웨어 패키지에서 파일 형식 라이브러리를 포함한 65개 이상의 고성능, 경량, 응답이 빠른 웹 UI 구성 요소를 제공합니다.Dellsample browser의 현장 프레젠테이션을 참조하여 실제 환경을 확인하십시오.
기존 고객의 경우 License and Downloads 페이지에서 최신 버전을 다운로드할 수 있습니다.Syncfusion 고객이 아닌 경우 사용 가능한 기능을 30일free trial 동안 검토해 보십시오.당신도 이 GitHub 장소에서 우리의 샘플을 시험해 보실 수 있습니다.
궁금한 사항이 있으시면 저희support forums, Direct-Trac 또는 feedback portal로 연락 주십시오.우리는 언제든지 기꺼이 당신을 돕겠습니다!
만약 당신이 이 문장을 좋아한다면, 우리는 당신도 다음과 같은 내용을 좋아할 것이라고 생각합니다.

  • Blazor [E-book]
    • JanusGraph 사용하기 시작
    지원되지 않는 DNS 공급업체에서 Cert manager 확장 및 사용

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage