Created the article.

6 years ago · ec63409dec
8 changed files with 936 additions and 0 deletions
--- a/docs/en/Community-Articles/2020-12-04-Event-Organizer/Post.md
+++ b/docs/en/Community-Articles/2020-12-04-Event-Organizer/Post.md
@ -0,0 +1,936 @@
+# Creating an Event Organizer Application with the ABP Framework & Blazor UI.
+
+## Introduction
+
+In this article, we will create an example application that is a simple **meeting/event organizer**: People create events and other people registers to the event.
+
+The application has been developed with **Blazor** as the UI framework and **MongoDB** as the database provider.
+
+> This tutorial is based on my notes that I'd created to implement this application in a workshop. It shows the necessary steps to build the application rather than detailed explanations.
+
+### Source Code
+
+Source code of the completed application is [available on GitHub](https://github.com/abpframework/abp-samples/tree/master/EventOrganizer).
+
+### Screenshots
+
+Here, the pages of the final application.
+
+**Home Page - Event List**
+
+![event-list-ui](images/event-list-ui.png)
+
+**Creating a new Event**
+
+![event-create-ui](images/event-create-ui.png)
+
+**Event Detail Page**
+
+![event-detail-ui](images/event-detail-ui.png)
+
+## Requirements
+
+The following tools are needed to be able to run the solution.
+
+* .NET 5.0 SDK
+* Visual Studio 2019 16.8.0+ or another compatible IDE
+* MongoDB Server (with MongoDB Compass)
+
+## Development
+
+### Creating a new Application
+
+* Use the following ABP CLI command:
+
+````bash
+abp new EventOrganizer -u blazor -d mongodb
+````
+
+### Open & Run the Application
+
+* Open the solution in Visual Studio (or your favorite IDE).
+* Run the `EventOrganizer.DbMigrator` application to seed the initial data.
+* Run the `EventOrganizer.HttpApi.Host` application that starts the server side.
+* Run the `EventOrganizer.Blazor` application to start the UI.
+
+### Apply the Custom Styles
+
+* Add styles to `wwwroot/main.css`:
+
+````css
+body.abp-application-layout {
+    background-color: #222 !important;
+    font-size: 18px;
+}
+nav#main-navbar.bg-dark {
+    background-color: #222 !important;
+    box-shadow: none !important;
+}
+.event-pic {
+    width: 100%;
+    border-radius: 12px;
+    box-shadow: 5px 5px 0px 0px rgba(0,0,0,.5);
+    margin-bottom: 10px;
+}
+.event-link:hover, .event-link:hover *{
+    text-decoration: none;
+}
+.event-link:hover .event-pic {
+    box-shadow: 5px 5px 0px 0px #ffd800;
+}
+.event-form {
+    background-color: #333 !important;
+    box-shadow: 5px 5px 0px 0px rgba(0,0,0,.5);
+    border-radius: 12px;
+}
+.table {
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 5px 5px 0px 0px rgba(0,0,0,.5);
+}
+.table th{
+    border: 0 !important;
+}
+.modal {
+    color: #333;
+}
+.page-item:first-child .page-link {
+    margin-left: 0;
+    border-top-left-radius: 12px;
+    border-bottom-left-radius: 12px;
+}
+.page-item:last-child .page-link {
+    border-top-right-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+.btn {
+    border-radius: 8px;
+}
+.att-list {
+    list-style: none;
+    padding: 0;
+}
+.att-list li {
+    padding: 4px 0 0 0;
+}
+````
+
+* `wwwroot/index.html`: Remove `bg-light` class from the `body` tag and add `bg-dark text-light`.
+
+### Domain Layer
+
+* Add the following `Event` aggregate (with `EventAttendee`) to the solution:
+
+**Event**
+
+````csharp
+using System;
+using System.Collections.Generic;
+using Volo.Abp.Domain.Entities.Auditing;
+
+namespace EventOrganizer.Events
+{
+    public class Event : FullAuditedAggregateRoot<Guid>
+    {
+        public string Title { get; set; }
+
+        public string Description { get; set; }
+
+        public bool IsFree { get; set; }
+
+        public DateTime StartTime { get; set; }
+
+        public ICollection<EventAttendee> Attendees { get; set; }
+
+        public Event()
+        {
+            Attendees = new List<EventAttendee>();
+        }
+    }
+}
+````
+
+**EventAttendee**
+
+```csharp
+using System;
+using Volo.Abp.Auditing;
+
+namespace EventOrganizer.Events
+{
+    public class EventAttendee : IHasCreationTime
+    {
+        public Guid UserId { get; set; }
+
+        public DateTime CreationTime { get; set; }
+    }
+}
+```
+
+### MongoDB Mapping
+
+* Add the following property to the `EventOrganizerMongoDbContext`:
+
+````csharp
+public IMongoCollection<Event> Events => Collection<Event>();
+````
+
+### Clean Index.razor & Add the Header & "Create Event" button
+
+* Clean the `Index.razor` file.
+* Replace the content with the following code:
+
+````html
+@page "/"
+@inherits EventOrganizerComponentBase
+<Row Class="mb-4">
+    <Column Class="text-left">
+        <h1>Upcoming Events</h1>
+    </Column>
+    <Column Class="text-right">
+        @if (CurrentUser.IsAuthenticated)
+        {
+            <a class="btn btn-primary" href="/create-event">
+                <i class="fa fa-plus"></i> @L["CreateEvent"]
+            </a>
+        }
+    </Column>
+</Row>
+````
+
+* Open `Localization/EventOrganizer/en.json` in the `EventOrganizer.Domain.Shared` project and add the following entry:
+
+````json
+"CreateEvent": "Create a new event!"
+````
+
+The Result (run the `EventOrganizer.Blazor` application to see):
+
+![index-title](images/index-title.png)
+
+### Event Creation
+
+* Create the Initial `IEventAppService` with the `CreateAsync` method:
+
+````csharp
+using System;
+using System.Threading.Tasks;
+using Volo.Abp.Application.Services;
+
+namespace EventOrganizer.Events
+{
+    public interface IEventAppService : IApplicationService
+    {
+        Task<Guid> CreateAsync(EventCreationDto input);
+    }
+}
+````
+
+* Add `EventCreationDto` class:
+
+````csharp
+using System;
+using System.ComponentModel.DataAnnotations;
+
+namespace EventOrganizer.Events
+{
+    public class EventCreationDto
+    {
+        [Required]
+        [StringLength(100)]
+        public string Title { get; set; }
+
+        [Required]
+        [StringLength(2000)]
+        public string Description { get; set; }
+
+        public bool IsFree { get; set; }
+
+        public DateTime StartTime { get; set; }
+    }
+}
+````
+
+* Implement the `EventAppService`:
+
+````csharp
+using System;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Authorization;
+using Volo.Abp.Domain.Repositories;
+
+namespace EventOrganizer.Events
+{
+    public class EventAppService : EventOrganizerAppService, IEventAppService
+    {
+        private readonly IRepository<Event, Guid> _eventRepository;
+
+        public EventAppService(IRepository<Event, Guid> eventRepository)
+        {
+            _eventRepository = eventRepository;
+        }
+
+        [Authorize]
+        public async Task<Guid> CreateAsync(EventCreationDto input)
+        {
+            var eventEntity = ObjectMapper.Map<EventCreationDto, Event>(input);
+            await _eventRepository.InsertAsync(eventEntity);
+            return eventEntity.Id;
+        }
+    }
+}
+````
+
+* Add AutoMapper mapping to the `EventOrganizerApplicationAutoMapperProfile` class:
+
+````csharp
+using AutoMapper;
+using EventOrganizer.Events;
+
+namespace EventOrganizer
+{
+    public class EventOrganizerApplicationAutoMapperProfile : Profile
+    {
+        public EventOrganizerApplicationAutoMapperProfile()
+        {
+            CreateMap<EventCreationDto, Event>();
+        }
+    }
+}
+````
+
+This will automatically create the HTTP (REST) API for the application service (run the `EventOrganizer.HttpApi.Host` application to see it on the Swagger UI):
+
+![swagger-event-create](images/swagger-event-create.png)
+
+* Create the `CreateEvent.razor` file:
+
+````csharp
+@page "/create-event"
+@inherits EventOrganizerComponentBase
+<Heading Size="HeadingSize.Is3" Margin="Margin.Is5.FromTop.Is4.FromBottom" Class="text-center">Create Event</Heading>
+<Row>
+    <Column ColumnSize="ColumnSize.Is6.Is3.WithOffset">
+        <div class="p-lg-5 p-md-3 event-form">
+            <EditForm Model="@Event" OnValidSubmit="Create">
+                <Field>
+                    <FieldLabel>@L["Title"]</FieldLabel>
+                    <TextEdit @bind-Text="@Event.Title" />
+                </Field>
+                <Field>
+                    <FieldLabel>@L["Description"]</FieldLabel>
+                    <MemoEdit @bind-Text="@Event.Description" />
+                </Field>
+                <Field>
+                    <Check TValue="bool" @bind-Checked="@Event.IsFree">@L["Free"]</Check>
+                </Field>
+                <Field>
+                    <FieldLabel>@L["StartTime"]</FieldLabel>
+                    <DateEdit TValue="DateTime" @bind-Date="@Event.StartTime" />
+                </Field>
+                <Button Type="@ButtonType.Submit" Block="true" Color="@Color.Primary" Size="Size.Large">@L["Save"]</Button>
+            </EditForm>
+        </div>
+    </Column>
+</Row>
+````
+
+* Create a partial `CreateEvent` class in the same folder, with the `CreateEvent.razor.cs` as the file name:
+
+````csharp
+using System.Threading.Tasks;
+using EventOrganizer.Events;
+using Microsoft.AspNetCore.Components;
+
+namespace EventOrganizer.Blazor.Pages
+{
+    public partial class CreateEvent
+    {
+        private EventCreationDto Event { get; set; } = new EventCreationDto();
+
+        private readonly IEventAppService _eventAppService;
+        private readonly NavigationManager _navigationManager;
+
+        public CreateEvent(
+            IEventAppService eventAppService,
+            NavigationManager navigationManager)
+        {
+            _eventAppService = eventAppService;
+            _navigationManager = navigationManager;
+        }
+
+        private async Task Create()
+        {
+            var eventId = await _eventAppService.CreateAsync(Event);
+            _navigationManager.NavigateTo("/events/" + eventId);
+        }
+    }
+}
+````
+
+The final UI is (run the `EventOrganizer.Blazor` application and click to the "Create Event" button):
+
+![event-create-ui](images/event-create-ui.png)
+
+### Upcoming Events (Home Page)
+
+* Open the `IEventAppService` and add a `GetUpcomingAsync` method to get the list of upcoming events:
+
+````csharp
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using Volo.Abp.Application.Services;
+
+namespace EventOrganizer.Events
+{
+    public interface IEventAppService : IApplicationService
+    {
+        Task<Guid> CreateAsync(EventCreationDto input);
+
+        Task<List<EventDto>> GetUpcomingAsync();
+    }
+}
+````
+
+* Add a `EventDto` class:
+
+````csharp
+using System;
+using Volo.Abp.Application.Dtos;
+
+namespace EventOrganizer.Events
+{
+    public class EventDto : EntityDto<Guid>
+    {
+        public string Title { get; set; }
+
+        public string Description { get; set; }
+
+        public bool IsFree { get; set; }
+
+        public DateTime StartTime { get; set; }
+
+        public int AttendeesCount { get; set; }
+    }
+}
+````
+
+* Implement the `GetUpcomingAsync` in the `EventAppService` class:
+
+````csharp
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Authorization;
+using Volo.Abp.Domain.Repositories;
+
+namespace EventOrganizer.Events
+{
+    public class EventAppService : EventOrganizerAppService, IEventAppService
+    {
+        private readonly IRepository<Event, Guid> _eventRepository;
+
+        public EventAppService(IRepository<Event, Guid> eventRepository)
+        {
+            _eventRepository = eventRepository;
+        }
+
+        [Authorize]
+        public async Task<Guid> CreateAsync(EventCreationDto input)
+        {
+            var eventEntity = ObjectMapper.Map<EventCreationDto, Event>(input);
+            await _eventRepository.InsertAsync(eventEntity);
+            return eventEntity.Id;
+        }
+
+        public async Task<List<EventDto>> GetUpcomingAsync()
+        {
+            var events = await AsyncExecuter.ToListAsync(
+                _eventRepository
+                    .Where(x => x.StartTime > Clock.Now)
+                    .OrderBy(x => x.StartTime)
+            );
+
+            return ObjectMapper.Map<List<Event>, List<EventDto>>(events);
+        }
+    }
+}
+````
+
+* Add the following line into the `EventOrganizerApplicationAutoMapperProfile` constructor:
+
+````csharp
+CreateMap<Event, EventDto>();
+````
+
+Run the `EventOrganizer.HttpApi.Host` application to see the new `upcoming` endpoint on the Swagger UI:
+
+![swagger-event-upcoming](images/swagger-event-upcoming.png)
+
+* Change the `Pages/Index.razor.cs` content in the `EventOrganizer.Blazor` project as shown below:
+
+```csharp
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using EventOrganizer.Events;
+
+namespace EventOrganizer.Blazor.Pages
+{
+    public partial class Index
+    {
+        private List<EventDto> UpcomingEvents { get; set; } = new List<EventDto>();
+
+        private readonly IEventAppService _eventAppService;
+
+        public Index(IEventAppService eventAppService)
+        {
+            _eventAppService = eventAppService;
+        }
+
+        protected override async Task OnInitializedAsync()
+        {
+            UpcomingEvents = await _eventAppService.GetUpcomingAsync();
+        }
+    }
+}
+```
+
+* Change the `Pages/Index.razor` content in the `EventOrganizer.Blazor` project as shown below:
+
+````html
+@page "/"
+@inherits EventOrganizerComponentBase
+<Row Class="mb-4">
+    <Column Class="text-left">
+        <h1>Upcoming Events</h1>
+    </Column>
+    <Column Class="text-right">
+        @if (CurrentUser.IsAuthenticated)
+        {
+            <a class="btn btn-primary" href="/create-event">
+                <i class="fa fa-plus"></i> @L["CreateEvent"]
+            </a>
+        }
+    </Column>
+</Row>
+<Row>
+    @foreach (var upcomingEvent in UpcomingEvents)
+    {
+        <Column Class="col-12 col-lg-4 col-md-6">
+            <a class="mb-5 position-relative d-block event-link" href="/events/@upcomingEvent.Id">
+                <div class="position-absolute text-right w-100 px-3 py-2" style="left: 0; top: 2px;">
+                    @if (upcomingEvent.IsFree)
+                    {
+                        <Badge Color="Color.Success" Class="mr-1">FREE</Badge>
+                    }
+                    <span class="badge badge-warning font-weight-normal">
+                        <i class="fas fa-user-friends"></i>
+                        <span class="font-weight-bold">@upcomingEvent.AttendeesCount</span>
+                    </span>
+                </div>
+                <img src="https://picsum.photos/seed/@upcomingEvent.Id/400/300" class="event-pic"/>
+                <div class="px-3 py-1">
+                    <small class="font-weight-bold text-warning my-2 d-block text-uppercase">@upcomingEvent.StartTime.ToLongDateString()</small>
+                    <p class="h4 text-light d-block mb-2">@upcomingEvent.Title</p>
+                    <p class="text-light" style="opacity: .65;">@upcomingEvent.Description.TruncateWithPostfix(150)</p>
+                </div>
+            </a>
+        </Column>
+    }
+</Row>
+````
+
+The new home page is shown below:
+
+![event-list-ui](images/event-list-ui.png)
+
+### Event Detail Page
+
+* Add `GetAsync`, `RegisterAsync`, `UnregisterAsync` and `DeleteAsync` methods to the `IEventAppService`:
+
+````csharp
+using System;
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using Volo.Abp.Application.Services;
+
+namespace EventOrganizer.Events
+{
+    public interface IEventAppService : IApplicationService
+    {
+        Task<Guid> CreateAsync(EventCreationDto input);
+
+        Task<List<EventDto>> GetUpcomingAsync();
+
+        Task<EventDetailDto> GetAsync(Guid id);
+
+        Task RegisterAsync(Guid id);
+
+        Task UnregisterAsync(Guid id);
+
+        Task DeleteAsync(Guid id);
+    }
+}
+````
+
+* Add `EventDetailDto` class:
+
+````csharp
+using System;
+using System.Collections.Generic;
+using Volo.Abp.Application.Dtos;
+
+namespace EventOrganizer.Events
+{
+    public class EventDetailDto : CreationAuditedEntityDto<Guid>
+    {
+        public string Title { get; set; }
+
+        public string Description { get; set; }
+
+        public bool IsFree { get; set; }
+
+        public DateTime StartTime { get; set; }
+
+        public List<EventAttendeeDto> Attendees { get; set; }
+    }
+}
+````
+
+* Add `EventAttendeeDto` class:
+
+````csharp
+using System;
+
+namespace EventOrganizer.Events
+{
+    public class EventAttendeeDto
+    {
+        public Guid UserId { get; set; }
+
+        public string UserName { get; set; }
+
+        public DateTime CreationTime { get; set; }
+    }
+}
+````
+
+* Implement the new methods in the `EventAppService`:
+
+````csharp
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using EventOrganizer.Users;
+using Microsoft.AspNetCore.Authorization;
+using Volo.Abp;
+using Volo.Abp.Domain.Repositories;
+using Volo.Abp.Users;
+
+namespace EventOrganizer.Events
+{
+    public class EventAppService : EventOrganizerAppService, IEventAppService
+    {
+        private readonly IRepository<Event, Guid> _eventRepository;
+        private readonly IRepository<AppUser, Guid> _userRepository;
+
+        public EventAppService(IRepository<Event, Guid> eventRepository, IRepository<AppUser, Guid> userRepository)
+        {
+            _eventRepository = eventRepository;
+            _userRepository = userRepository;
+        }
+
+        [Authorize]
+        public async Task<Guid> CreateAsync(EventCreationDto input)
+        {
+            var eventEntity = ObjectMapper.Map<EventCreationDto, Event>(input);
+            await _eventRepository.InsertAsync(eventEntity);
+            return eventEntity.Id;
+        }
+
+        public async Task<List<EventDto>> GetUpcomingAsync()
+        {
+            var events = await AsyncExecuter.ToListAsync(
+                _eventRepository
+                    .Where(x => x.StartTime > Clock.Now)
+                    .OrderBy(x => x.StartTime)
+            );
+
+            return ObjectMapper.Map<List<Event>, List<EventDto>>(events);
+        }
+
+        public async Task<EventDetailDto> GetAsync(Guid id)
+        {
+            var @event = await _eventRepository.GetAsync(id);
+            var attendeeIds = @event.Attendees.Select(a => a.UserId).ToList();
+            var attendees = (await AsyncExecuter.ToListAsync(_userRepository.Where(u => attendeeIds.Contains(u.Id))))
+                .ToDictionary(x => x.Id);
+
+            var result = ObjectMapper.Map<Event, EventDetailDto>(@event);
+
+            foreach (var attendeeDto in result.Attendees)
+            {
+                attendeeDto.UserName = attendees[attendeeDto.UserId].UserName;
+            }
+
+            return result;
+        }
+
+        [Authorize]
+        public async Task RegisterAsync(Guid id)
+        {
+            var @event = await _eventRepository.GetAsync(id);
+            if (@event.Attendees.Any(a => a.UserId == CurrentUser.Id))
+            {
+                return;
+            }
+
+            @event.Attendees.Add(new EventAttendee {UserId = CurrentUser.GetId(), CreationTime = Clock.Now});
+            await _eventRepository.UpdateAsync(@event);
+        }
+
+        [Authorize]
+        public async Task UnregisterAsync(Guid id)
+        {
+            var @event = await _eventRepository.GetAsync(id);
+            var removedItems = @event.Attendees.RemoveAll(x => x.UserId == CurrentUser.Id);
+            if (removedItems.Any())
+            {
+                await _eventRepository.UpdateAsync(@event);
+            }
+        }
+
+        [Authorize]
+        public async Task DeleteAsync(Guid id)
+        {
+            var @event = await _eventRepository.GetAsync(id);
+
+            if (CurrentUser.Id != @event.CreatorId)
+            {
+                throw new UserFriendlyException("You don't have the necessary permission to delete this event!");
+            }
+
+            await _eventRepository.DeleteAsync(id);
+        }
+    }
+}
+````
+
+* Add the following mappings into the `EventOrganizerApplicationAutoMapperProfile`:
+
+````csharp
+CreateMap<Event, EventDetailDto>();
+CreateMap<EventAttendee, EventAttendeeDto>();
+````
+
+Run the `EventOrganizer.HttpApi.Host` application to see the complete Event HTTP API in the Swagger UI:
+
+![swagger-event-all](images/swagger-event-all.png)
+
+* Create `EventDetail.razor` component with the following content:
+
+````html
+@page "/events/{id}"
+@inherits EventOrganizerComponentBase
+@if (Event != null)
+{
+    <Row Class="mb-4">
+        <Column Class="text-left">
+            <h1>@Event.Title</h1>
+        </Column>
+        <Column Class="text-right pt-2">
+            <a href="/" Class="btn btn-dark"><i class="fa fa-arrow-left"></i> Back</a>
+            @if (CurrentUser.IsAuthenticated && CurrentUser.Id == Event.CreatorId)
+            {
+                <Button Color="Color.Danger" Clicked="Delete" Class="ml-1">Delete</Button>
+            }
+        </Column>
+    </Row>
+    <Row>
+        <Column Class="col-12 col-md-8">
+            <div class="position-relative">
+                <div class="position-absolute text-right w-100 px-3 py-2" style="left: 0; top: 2px;">
+                    @if (Event.IsFree)
+                    {
+                        <Badge Color="Color.Success" Class="mr-1">FREE</Badge>
+                    }
+                    <span class="badge badge-warning font-weight-normal">
+                        <i class="fas fa-user-friends"></i>
+                        <span class="font-weight-bold">@Event.Attendees.Count</span>
+                    </span>
+                </div>
+                <img src="https://picsum.photos/seed/@Event.Id/800/600" class="event-pic" />
+                <small class="font-weight-bold text-warning my-2 d-block text-uppercase">Start time: @Event.StartTime.ToLongDateString()</small>
+                <p style="opacity: .65;">@Event.Description</p>
+            </div>
+        </Column>
+        <Column Class="col-12 col-md-4">
+            <div class="p-4 event-form">
+                @if (CurrentUser.IsAuthenticated)
+                {
+                    <div>
+                        @if (!IsRegistered)
+                        {
+                            <Button Color="Color.Primary" Clicked="Register" Class="btn-block btn-lg">Register now!</Button>
+                        }
+                        else
+                        {
+                            <p>You are registered in this event</p>
+                            <Button Color="Color.Secondary" Clicked="UnRegister" Class="btn-block">Cancel registration!</Button>
+                        }
+                    </div>
+                }
+                else
+                {
+                    <a class="btn btn-primary" href="/authentication/login">
+                        <i class="fa fa-sign-in-alt"></i> Login to attend!
+                    </a>
+                }
+            </div>
+            <div class="mt-4 event-form p-4">
+                <span class="font-weight-bold"><i class="fas fa-user-friends"></i> Attendees <span class="float-right font-weight-normal" style="opacity:.65;">(@Event.Attendees.Count)</span></span>
+                <ul class="mt-1 mb-0 att-list">
+                    @foreach (var attendee in Event.Attendees)
+                    {
+                        <li><i class="fa fa-check"></i> @attendee.UserName</li>
+                    }
+                </ul>
+            </div>
+        </Column>
+    </Row>
+}
+````
+
+* Create `EventDetail.razor.cs` file with the following content:
+
+````csharp
+using System;
+using System.Linq;
+using System.Threading.Tasks;
+using EventOrganizer.Events;
+using Microsoft.AspNetCore.Components;
+
+namespace EventOrganizer.Blazor.Pages
+{
+    public partial class EventDetail
+    {
+        [Parameter]
+        public string Id { get; set; }
+
+        private EventDetailDto Event { get; set; }
+        private bool IsRegistered { get; set; }
+
+        private readonly IEventAppService _eventAppService;
+        private readonly NavigationManager _navigationManager;
+
+        public EventDetail(
+            IEventAppService eventAppService,
+            NavigationManager navigationManager)
+        {
+            _eventAppService = eventAppService;
+            _navigationManager = navigationManager;
+        }
+
+        protected override async Task OnInitializedAsync()
+        {
+            await GetEventAsync();
+        }
+
+        private async Task GetEventAsync()
+        {
+            Event = await _eventAppService.GetAsync(Guid.Parse(Id));
+            if (CurrentUser.IsAuthenticated)
+            {
+                IsRegistered = Event.Attendees.Any(a => a.UserId == CurrentUser.Id);
+            }
+        }
+
+        private async Task Register()
+        {
+            await _eventAppService.RegisterAsync(Guid.Parse(Id));
+            await GetEventAsync();
+        }
+
+        private async Task UnRegister()
+        {
+            await _eventAppService.UnregisterAsync(Guid.Parse(Id));
+            await GetEventAsync();
+        }
+
+        private async Task Delete()
+        {
+            if (!await Message.Confirm("This event will be deleted: " + Event.Title))
+            {
+                return;
+            }
+
+            await _eventAppService.DeleteAsync(Guid.Parse(Id));
+            _navigationManager.NavigateTo("/");
+        }
+    }
+}
+````
+
+The resulting page is shown below:
+
+![event-detail-ui](images/event-detail-ui.png)
+
+### Integration Tests
+
+Create an `EventAppService_Tests` class in the `EventOrganizer.Application.Tests` project:
+
+````csharp
+using System;
+using System.Threading.Tasks;
+using Shouldly;
+using Xunit;
+
+namespace EventOrganizer.Events
+{
+    [Collection(EventOrganizerTestConsts.CollectionDefinitionName)]
+    public class EventAppService_Tests : EventOrganizerApplicationTestBase
+    {
+        private readonly IEventAppService _eventAppService;
+
+        public EventAppService_Tests()
+        {
+            _eventAppService = GetRequiredService<IEventAppService>();
+        }
+
+        [Fact]
+        public async Task Should_Create_A_Valid_Event()
+        {
+            // Create an event
+
+            var eventId = await _eventAppService.CreateAsync(
+                new EventCreationDto
+                {
+                    Title = "My test event 1",
+                    Description = "My test event description 1",
+                    IsFree = true,
+                    StartTime = DateTime.Now.AddDays(2)
+                }
+            );
+
+            eventId.ShouldNotBe(Guid.Empty);
+
+            // Get the event
+
+            var @event = await _eventAppService.GetAsync(eventId);
+            @event.Title.ShouldBe("My test event 1");
+
+            // Get upcoming events
+
+            var events = await _eventAppService.GetUpcomingAsync();
+            events.ShouldContain(x => x.Title == "My test event 1");
+        }
+    }
+}
+````
+
+## Source Code
+
+Source code of the completed application is [available on GitHub](https://github.com/abpframework/abp-samples/tree/master/EventOrganizer).
--- a/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/event-create-ui.png
+++ b/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/event-create-ui.png
--- a/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/event-detail-ui.png
+++ b/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/event-detail-ui.png
--- a/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/event-list-ui.png
+++ b/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/event-list-ui.png
--- a/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/index-title.png
+++ b/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/index-title.png
--- a/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/swagger-event-all.png
+++ b/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/swagger-event-all.png
--- a/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/swagger-event-create.png
+++ b/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/swagger-event-create.png
--- a/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/swagger-event-upcoming.png
+++ b/docs/en/Community-Articles/2020-12-04-Event-Organizer/images/swagger-event-upcoming.png