When I click on one of the three buttons (shortcut, train, or factory) in my Blazor page, I want the content area to update as if I were switching tabs, without reloading the page. However, this does not work: clicking the buttons does not change the displayed content. Even when I tried with a native MudBlazor button, nothing happens. What could be causing this issue? Is it possible that the click event is not being detected? The Hot reload of visual studio?here is the code,the page
@page "/"@using Basil.Components.Buttons@using MudBlazor<PageTitle>Project choice</PageTitle>@* <MudButtonGroup Exclusive="true" Color="Color.Primary" Variant="Variant.Filled"><But Icon=@Icons.Material.Filled.Shortcut OnClick="@(() => SelectTab("raccourci"))" /><But Icon=@Icons.Material.Filled.Train OnClick="@(() => SelectTab("projects"))" /><But Icon=@Icons.Material.Filled.Factory OnClick="@(() => SelectTab("site"))" /></MudButtonGroup> *@<MudButtonGroup Exclusive="true" Color="Color.Primary" Variant="Variant.Filled"><MudButton OnClick="@SelectTabProjects">Test Projet</MudButton><But Icon=@Icons.Material.Filled.Shortcut OnClick=@SelectTabRaccourci /><But Icon=@Icons.Material.Filled.Train OnClick=@SelectTabProjects /><But Icon=@Icons.Material.Filled.Factory OnClick=@SelectTabSite /></MudButtonGroup><div class="mt-4"> @if (selectedTab == "raccourci") {<h2>Contenu Raccourci</h2> } else if (selectedTab == "projects") {<h2>Contenu Projets</h2> } else if (selectedTab == "site") {<h2>Contenu Site</h2> }</div>@code { private string selectedTab = "raccourci"; private void SelectTabRaccourci() { selectedTab = "raccourci"; StateHasChanged(); } private void SelectTabProjects() { selectedTab = "projects"; StateHasChanged(); } private void SelectTabSite() { selectedTab = "site"; StateHasChanged(); }}and the button :
@using MudBlazor;@if (IsVisible){<div class="@CssAlign" style="padding-left:5px;padding-right:5px;"><MudTooltip Placement=Placement.Top Color=@TooltipColor Arrow=true><ChildContent> @if (MudBadgeContent > 0) {<MudBadge Content=@MudBadgeContent Overlap=true Bordered=true Color=@Color.Secondary><MudIconButton Color=@Color Variant=Variant.Filled Size=Size.Small Icon=@Icon OnClick=@Clic Disabled=@(PadLock || Disabled)>@Title</MudIconButton></MudBadge> } else {<MudIconButton Color=@Color Variant=Variant.Filled Size=Size.Small Icon=@Icon OnClick=@Clic Disabled=@(PadLock || Disabled)>@Title</MudIconButton> }</ChildContent><TooltipContent> @((MarkupString)TooltipContent)</TooltipContent></MudTooltip></div>}@code { [Parameter] public EventCallback OnClick { get; set; } [Parameter] public string TooltipContent { get; set; } [Parameter] public string Title { get; set; } [Parameter] public string Icon { get; set; } [Parameter] public bool AlignRight { get; set; } = false; [Parameter] public bool DisableAlign { get; set; } = false; [Parameter] public bool Disabled { get; set; } = false; [Parameter] public bool IsVisible { get; set; } = true; [Parameter] public int MudBadgeContent { get; set; } = 0; [Parameter] public Color Color { get; set; } = Color.Primary; [Parameter] public Color TooltipColor { get; set; } = Color.Default; private bool PadLock { get; set; } private string CssAlign => DisableAlign ? "inline" : AlignRight ? "right" : "left"; private async Task Clic() { PadLock = true; StateHasChanged(); if (OnClick.HasDelegate) { await OnClick.InvokeAsync(); } PadLock = false; StateHasChanged(); }}Tell me if you need anything more.PS : i'm don't know C# and i just started Blazor. This is in an Intership interest so i'm learning from almost none