Example Blazor Components - dev-docs

Welcome to the Example Blazor Components docs
More Components here:/
→ Get Bootstrap Docs

Blazor Component – Example Page with User Id

ExamplePage.razor

@page "/example/page"

@using Microsoft.AspNetCore.Authorization
@using Example.Data
@using Example.Data.Models
@using Example.Data.Services

@inject ExampleService exampleService
@inject NavigationManager navigationManager
@inject AuthenticationStateProvider authenticationStateProvider

@attribute [Authorize]

<div class="d-flex justify-content-between">
	<h3>Example</h3>
	<button class="btn btn-primary mt-1 mb-1" @onclick="HandleRedirectNew">New</button>
</div>

@if (errorMessage != null)
{
	<div class="alert alert-danger">
		@errorMessage
	</div>
}

@if (examples == null)
{
	<p><em>Loading...</em></p>
}
else if (!examples.Any())
{
	<p><em>Currently no Examples...</em></p>
}
else
{
	<table class="table">
		<thead>
			<tr>
				<th>example</th>
			</tr>
		</thead>
		<tbody>
			@foreach (var example in examples)
			{
				<tr>
					<td @onclick="() => RedirectEdit(example.Id)"><a href="#">@example.Title</a></td>
				</tr>
			}
		</tbody>
	</table>
}

@code {
	private List<Example>? examples;
	private string? userId;
	private string? errorMessage;

	protected override async Task OnInitializedAsync()
	{
		try
		{
			await LoadDataAsync();
		}
		catch (Exception ex)
		{
			errorMessage = "A unexpected error occured!";
		}
	}

	private async Task LoadDataAsync()
	{
		var authState = await authenticationStateProvider.GetAuthenticationStateAsync();
		var user = authState.User;
		this.userId = user.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
		if (userId == null)
		{
			errorMessage = "While loading the user data an error occured!";
			return;
		}
		examples = await exampleService.GetExamplesByUserIdAsync(userId);
		if (examples == null)
		{
			errorMessage = "While loading the examples an error occured!";
			return;
		}
	}

	private void HandleRedirectNew()
	{
		navigationManager.NavigateTo("example/create");
	}

	private void RedirectEdit(int exampleId)
	{
		navigationManager.NavigateTo($"/example/edit/{exampleId}");
	}
}

Blazor Component – Confirmation Modal

This shows how to create a modal dialog in Blazor. The visibility is controlled by a boolean flag, and it includes a backdrop overlay.

DeleteModal.razor

@* This modal is conditionally rendered based on a boolean flag *@
@if (isModalVisible)
{
    <div class="modal fade show" style="display: block;" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@example.Title</h5>
                    <button class="btn btn-close" @onclick="() => isModalVisible = false">
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this example?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" @onclick="HandleDelete">
                        Delete
                    </button>
                    <button type="button" class="btn btn-secondary" @onclick="() => isModalVisible = false">
                        Cancel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal-backdrop fade show"></div>
}

@code {
    private bool isModalVisible = false;

    // Method to show the modal
    private void ShowModal()
    {
        isModalVisible = true;
    }

    // Method to handle the delete action
    private async Task HandleDelete()
    {
        // ... logic to delete the item ...
        isModalVisible = false; // Hide modal after action
    }
}