Event Handling with @onclick

<h3>Click Counter</h3> <p>You clicked @count times.</p> <button @onclick="Increment"> Click Me </button> @code { private int count = 0; private void Increment() { count++; } } 

<button @onclick="Reset">Reset</button> @code { private void Reset() { count = 0; } } 

<h3>Hello, @Name!</h3> @code { [Parameter] public string Name { get; set; } = ""; } 

Repo-MySubscription= return await _context.Subscriptions .AsNoTracking() .Where(s => s.UserId == userId && !s.IsDeleted) .Include(s => s.MembershipPlan) .ThenInclude(p => p.GymCenter) .OrderByDescending(s => s.SubscribedOn) .ToListAsync(cancellationToken); Response== return subscriptions.Select(s => new MyMembershipResponseDto { SubscriptionId = s.Id, GymName = s.MembershipPlan.GymCenter.GymName, PlanName = s.MembershipPlan.PlanName, StartDate = s.StartDate, ExpiryDate = s.EndDate, SubscriptionStatus = s.Status }).ToList(); ======================================== DB-CONTEXT=== // GymCenter -> MembershipPlan builder.Entity<MembershipPlan>() .HasOne(p => p.GymCenter) .WithMany(g => g.MembershipPlans) .HasForeignKey(p => p.GymId) .OnDelete(DeleteBehavior.NoAction); // MembershipPlan -> Subscription builder.Entity<Subscription>() .HasOne(s => s.MembershipPlan) .WithMany(p => p.Subscriptions) .HasForeignKey(s => s.MembershipPlanId) .OnDelete(DeleteBehavior.NoAction); // ApplicationUser -> Subscription builder.Entity<Subscription>() .HasOne(s => s.User) .WithMany(u => u.Subscriptions) .HasForeignKey(s => s.UserId) .OnDelete(DeleteBehavior.NoAction); // ApplicationUser -> Attendance builder.Entity<Attendance>() .HasOne(a => a.User) .WithMany(u => u.Attendances) .HasForeignKey(a => a.UserId) .OnDelete(DeleteBehavior.NoAction); // Subscription -> Attendance builder.Entity<Attendance>() .HasOne(a => a.Subscription) .WithMany(s => s.Attendances) .HasForeignKey(a => a.SubscriptionId) .OnDelete(DeleteBehavior.NoAction); =============================================================================== Home.Razor @page "/" @using Microsoft.AspNetCore.Components.Authorization <PageTitle>Home - Gym Management</PageTitle> <div class="container mt-5">  <AuthorizeView> <NotAuthorized> <div class="text-center">  <h1 class="display-4">  Welcome to Gym Management System </h1> <p class="lead mt-3">  Discover gyms, explore membership plans, and manage your fitness journey. </p> <a href="login" class="btn btn-primary me-2">  Login </a> <a href="register" class="btn btn-outline-primary">  Register </a> </div> </NotAuthorized> <Authorized> <AuthorizeView Roles="Admin"> <Authorized> <h1>Welcome, Admin!</h1> <p>Manage gyms, membership plans, and subscriptions.</p> <a href="admin/gyms" class="btn btn-primary me-2">  Manage Gyms </a> <a href="admin/membership-plans" class="btn btn-success me-2">  Manage Plans </a> <a href="admin/memberships" class="btn btn-info">  Manage Memberships </a> </Authorized> </AuthorizeView> <AuthorizeView Roles="User"> <Authorized> <h1>Welcome to Your Fitness Dashboard!</h1> <p>Explore gyms and manage your memberships.</p> <a href="browse-gyms" class="btn btn-primary me-2">  Browse Gyms </a> <a href="my-memberships" class="btn btn-success me-2">  My Memberships </a> <a href="my-attendance" class="btn btn-info">  My Attendance </a> </Authorized> </AuthorizeView> </Authorized> </AuthorizeView> </div> ============================================================== NavMenu.razor @using Microsoft.AspNetCore.Components.Authorization <div class="top-row ps-3 navbar navbar-dark bg-secondary">  <div class="container-fluid">  <a class="navbar-brand" href="">Gym Management</a>  <button title="Navigation menu" class="navbar-toggler"  @onclick="ToggleNavMenu"> <span class="navbar-toggler-icon"></span>  </button> </div> </div> <div class="@NavMenuCssClass bg-secondary nav-scrollable shadow"  @onclick="ToggleNavMenu"> <AuthorizeView> <Authorized> @* ADMIN SIDEBAR *@ <AuthorizeView Roles="Admin"> <Authorized> <nav class="nav flex-column">  <div class="nav-item px-3 p-1 shadow">  <NavLink class="nav-link"  href="" Match="NavLinkMatch.All"> <i class="bi bi-house-door-fill me-2">  Home </NavLink> </div> <div class="nav-item px-3 p-1 shadow">  <NavLink class="nav-link" href="admin/gyms">  <i class="bi bi-building me-2">  Manage Gyms </NavLink> </div> <div class="nav-item px-3 p-1 shadow">  <NavLink class="nav-link"  href="admin/membership-plans"> <i class="bi bi-card-list me-2">  Manage Membership Plans </NavLink> </div> <div class="nav-item px-3 p-1 shadow">  <NavLink class="nav-link"  href="admin/memberships"> <i class="bi bi-people me-2">  Manage Memberships </NavLink> </div> </nav> </Authorized> </AuthorizeView> @* USER SIDEBAR *@ <AuthorizeView Roles="User"> <Authorized> <nav class="nav flex-column">  <div class="nav-item px-3 p-1 shadow">  <NavLink class="nav-link"  href="" Match="NavLinkMatch.All"> <i class="bi bi-house-door-fill me-2">  Home </NavLink> </div> <div class="nav-item px-3 p-1 shadow">  <NavLink class="nav-link" href="browse-gyms">  <i class="bi bi-building me-2">  Browse Gyms </NavLink> </div> <div class="nav-item px-3 p-1 shadow">  <NavLink class="nav-link" href="my-memberships">  <i class="bi bi-person-badge me-2">  My Memberships </NavLink> </div> <div class="nav-item px-3 p-1 shadow">  <NavLink class="nav-link" href="my-attendance">  <i class="bi bi-calendar-check me-2">  My Attendance </NavLink> </div> </nav> </Authorized> </AuthorizeView> @* KEEP YOUR EXISTING LOGOUT COMPONENT HERE *@ <div class="px-3 py-2">  <Logout /> </div> </Authorized> @* LINKS FOR ANONYMOUS USERS *@ <NotAuthorized> <nav class="nav flex-column">  <div class="nav-item px-3 p-1 shadow">  <NavLink class="nav-link" href="login">  <i class="bi bi-box-arrow-in-right me-2">  Login </NavLink> </div> <div class="nav-item px-3 p-1 shadow">  <NavLink class="nav-link" href="register">  <i class="bi bi-person-plus me-2">  Register </NavLink> </div> </nav> </NotAuthorized> </AuthorizeView> </div> @code { private bool collapseNavMenu = true; private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; private void ToggleNavMenu() { collapseNavMenu = !collapseNavMenu; } } =============================================================== MainLayout.razor @inherits LayoutComponentBase <div class="page">  <div class="sidebar">  <NavMenu /> </div> <main> <div class="top-row px-4">  </div> <article class="content px-4">  @Body </article> </main> </div> ============================================================ @page "/browse-gyms" @using System.Net.Http.Json @using System.Globalization @using Microsoft.AspNetCore.Components @using Microsoft.AspNetCore.Components.Web @using Blazored.Toast.Services @inject HttpClient Http @inject NavigationManager Navigation @inject SweetAlertService Swal <PageTitle>Browse Gyms</PageTitle> <div class="container-fluid py-4">  <!-- Page heading --> <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">  <div> <h2 class="fw-bold mb-1">Browse Gyms</h2>  <p class="text-muted mb-0">  Explore gyms, compare facilities, and find a membership plan. </p> </div> <button class="btn btn-outline-secondary"  @onclick="GoBack"> <i class="bi bi-arrow-left me-1">  Back </button> </div> <!-- Search and Source：https://dev.to/olwen_zahali/event-handling-with-onclick-5dbc
My favorites