blazor-calendar/BlazorApp/Pages/Index.razor

@page "/"

@using BlazorApp.Data
@inject CalendarService _calendarService

@if (_calendars == null)
{
    <p>
        <em>Loading...</em>
    </p>
}
else
{
    <h1>Calendars</h1>
    <ul>
        @foreach (var calendar in _calendars)
        {
            <li>
                <a href="/calendars/@calendar.Id">@calendar.Name</a>
                (
                <a href="#" @onclick="() => DeleteCalendar(calendar)">
                    @if (_confirmDeleteId == calendar.Id)
                    {
                        @:Confirm deletion?
                    }
                    else
                    {
                        <span class="oi oi-x"></span>
                    }
                </a>
                )
            </li>
        }
    </ul>

    @if (_calendarModel != null)
    {
        <h2>Add New Calendar</h2>

        <EditForm Model="@_calendarModel" OnValidSubmit="@HandleValidSubmit">
            <DataAnnotationsValidator/>
            <ValidationSummary/>

            <div class="form-group">
                <label for="url">URL</label>
                <InputText id="url" class="form-control" placeholder="Enter URL" @bind-Value="_calendarModel.Url"/>
            </div>

            <div class="form-group">
                <label for="username">Username</label>
                <InputText
                    id="username" class="form-control" placeholder="Enter username"
                    @bind-Value="_calendarModel.Username"/>
            </div>

            <div class="form-group">
                <label for="password">Password</label>
                <InputText
                    type="password" id="password" class="form-control" placeholder="Enter password"
                    @bind-Value="_calendarModel.Password"/>
            </div>

            <div class="form-group">
                <label for="name">Name</label>
                <InputText
                    type="text" id="name" class="form-control" placeholder="Enter name"
                    @bind-Value="_calendarModel.Name"/>
            </div>

            <button type="submit" class="btn btn-primary">Submit</button>
        </EditForm>
    }
    else
    {
        <button class="btn btn-primary" @onclick="ShowAddCalendar">Add Calendar</button>
    }
}

@code
{
    private List<Data.Calendar> _calendars;
    private int? _confirmDeleteId = null;
    private Data.Calendar _calendarModel = null;

    protected override async Task OnInitializedAsync()
    {
        _calendars = await CalendarService.GetCalendars();
    }

    private void ShowAddCalendar()
    {
        _calendarModel = new Data.Calendar();
    }

    private async Task HandleValidSubmit()
    {
        await CalendarService.CreateCalendar(_calendarModel);
        _calendarModel = null;
        _calendars = await CalendarService.GetCalendars();
    }

    private async Task DeleteCalendar(Data.Calendar calendar)
    {
        if (_confirmDeleteId != calendar.Id)
        {
            _confirmDeleteId = calendar.Id;
            return;
        }

        await CalendarService.DeleteCalendar(calendar);
        _calendars = await CalendarService.GetCalendars();
        _confirmDeleteId = null;
    }
}