Navigation in .razor dateien mit Maui Blazor

Question

Hallo,

ich möchte in einer Maui Blazor App ein eigenes Menu mit Hilfe von razor dateien machen. Dies könnte entweder ein popup sein, das von oben über die bestehende Seite runter schiebt oder auch einfach eine neue Seite. Mit popups wie z.B. DisplayAlert oder DisplayPromptAsync hab ich schon rumprobiert aber die scheinen nicht für diesen Zweck gedacht zu sein.
Prinzipiell geht es mir nur darum bei einem Klick auf ein Hamburger-Menu-Button ein Popup oder eine Seite mit einer Auswahl an Befehlen anzubieten, und von diesen wiederum z.B. auf eine Einstellungsseite zu gelangen. Natürlich muss ich von da aus dann auch wieder zurück zu meiner Index-Seite gelangen.

Ich hab mir zig Videos und tutorials angeschaut, aber für Maui Blazor gibt es nicht viele und wenn, sind die meisten für XAML-Dateien und ich weiss nicht, wie ich das auf razor-dateien umschreiben kann. Ich möchte mich sowieso möglichst von XAML fernhalten. Für mich ist auch der Aufbau der "einfachen" Startanwendung von Maui Blazor sehr kompliziert und ich blicke da einfach nicht durch. Kann man das nicht vereinfachen und gleich alle XAML-Dateien raus kicken? - Egal, zurück zur Frage - 

Hat jemand ein einfaches Beispiel, wie ich von einer (razor)-Seite auf eine andere und zurück navigieren kann?

Answer 1

Hallo Javango,

die Navigation in Blazor erfolg mit Links. Um auf eine Razor Datei per Link gelagen zu können muss die Datei als Page bekannt gemacht werden.

Schau dir die .NET MAUI Blazor App Standardvorlage an. Im Ordner Pages gibt es die Datei Counter.razor. In der obersten Zeile steht:

@page "/counter"

Im Ordner Shared in der Datei NavMenu.razor gibt es einen Link

<NavLink class="nav-link" href="counter">
 <span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>

Es muss aber kein NavLink sein sonder kann auch ein a Tag sein.

Wenn man z.B. auf eine anderen Seite als Index den a Tag:

<a href="/">Zurück zu Home</a>

einfügt und darauf klickt, gelangt man wieder zur Startseite.

Hier ist die Dokumentation von Blazor entscheidend Routing und Navigation in ASP.NET Core Blazor | Microsoft Learn das hat mit MAUI nichts zu tun.

Wann die Blazor Dokumentation gilt und wann die MAUI ist sicherlich noch verwirrend. Aber das wird schon.

Zu Popups schreibe ich dir später noch

---

Gruß Thomas
Der Junior lernt täglich, um Senior zu werden.
Der Senior lernt täglich, da er weiß, dass er immer Junior bleiben wird.
Github

Answer 2

Ich habe ein Projkt auf Github erstellen um dir Dialog/Popups besser zeigen zu können:

twytec/MauiAppBlazorDialog (github.com)

Du kannst es dir dort herunterladen und testen.

Die Dialog/Popups findes Du im Ordner Dialog:

MauiAppBlazorDialog/MauiAppBlazorDialog/Dialog at master · twytec/MauiAppBlazorDialog (github.com)

Die Nutzung in der Index.razor

MauiAppBlazorDialog/Index.razor at master · twytec/MauiAppBlazorDialog (github.com)

Eingebunden habe ich die Dialog in der MainLayout.razor und an eine Klasse übergeben:

MauiAppBlazorDialog/Index.razor at master · twytec/MauiAppBlazorDialog (github.com)

Damit kann man sich den DialogService überall reingeben lassen und die Dialoge anzeigen lassen.

Wenn Du etwas nicht verstehst, melde dich

---

Gruß Thomas
Der Junior lernt täglich, um Senior zu werden.
Der Senior lernt täglich, da er weiß, dass er immer Junior bleiben wird.
Github

Answer 3

Wenn Du fertige Menus und Komponenten suchst, dann solltest Du dir das hier anschauen.

Blazor Menu component (radzen.com)

Es gibt einige Hersteller die solche Komponenten anbieten. Den ich verlickt habe ist kostenlos und Open Source

---

Gruß Thomas
Der Junior lernt täglich, um Senior zu werden.
Der Senior lernt täglich, da er weiß, dass er immer Junior bleiben wird.
Github

Answer 4

"die Navigation in Blazor erfolg mit Links."

Ja, das klappt ja schon mal, danke. Hab bisher immer versucht im C# code zu "navigieren".
Kann man auch vom C-Code aus dahin gelangen?

Sonst hab ich ja schon mal viel zu tun. Danke für das Beispiel!

Answer 5

Ja mit dem NavigationManager Klasse (Microsoft.AspNetCore.Components) | Microsoft Learn

Diesen kann man sich mit @inject geben lassen:

@page "/counter"
@inject NavigationManager nm

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
<button class="btn btn-primary" @onclick="Back">Zurück zur Startseite</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

    private void Back()
    {
        nm.NavigateTo("/");
    }
}

---

Gruß Thomas
Der Junior lernt täglich, um Senior zu werden.
Der Senior lernt täglich, da er weiß, dass er immer Junior bleiben wird.
Github

Answer 6

Super danke, diese Klasse hätte ich nicht so schnell gefunden...

Nur noch eine Frage, dann mach ich mich hinter die Beispiele her:

Kann man in solchen Seiten auch eine Rückantwort erhalten, oder geht das nur mit Dialogen?

Answer 7

Man kann keinen User auf eine Unterseite (Page) schicken und darauf warten das er zurückkommt und eine Antwort mitbringt. Aber es gibt viele andere Wege. Dafür müsstest Du aber genau beschreiben was Du erreichen willst

---

Gruß Thomas
Der Junior lernt täglich, um Senior zu werden.
Der Senior lernt täglich, da er weiß, dass er immer Junior bleiben wird.
Github

Answer 8

Hallo Thomas, 
ich hab Deinen QuestionDialog mal in meinem Programm ausprobiert, aber da scheint was nicht zu tun. Wenn ich das Programm normal laufen lasse, dann wird "yes" wie nur das erste mal ausgewertet zu werden. Danach liefert jeder weitere Aufruf des Dialogs die selbe Rückmeldung, egal was man anklickt - Ja oder Nein.
Wenn ich aber einen Haltepunkt auf "if (yes)" setze, dann bekommt yes den richtig angeklickten Wert. Ich nehme an, das hat mit dem Task zu tun, der vielleicht noch nicht fertig ist, wenn das Programm weiterfährt, oder so. Allerdings hat das Delay dazwischen auch nichts gebracht:

  private async void onClearListClick()
  {
    var yes = await dlg.QuestionDialog.ShowAsync("Rockt Blazor?");
    await Task.Delay(100);
    if (yes)
    {
      DataManager.clearShoppingList();
    }
    nm.NavigateTo("/");
  }

Komischerweise funktioniert Dein Beispiel. Vielleicht weil du da wieder Tasks verwendest?

Answer 9

Versucht mal nach DataManager... 

StateHasChanged();

einzufügen

---

Gruß Thomas
Der Junior lernt täglich, um Senior zu werden.
Der Senior lernt täglich, da er weiß, dass er immer Junior bleiben wird.
Github

Answer 10

Hat leider nichts gebracht, das Verhalten ist das selbe. Auch ein StateHasChanged direkt vor der if - Abfrage bringt nichts. Aber wenn ich das richtig verstehe, ist diese Funktion nur für das Rendern zuständig?

  private async void onClearListClick()
  {
    var yes = await dlg.QuestionDialog.ShowAsync("Liste Löschen?");
    StateHasChanged();
    if (yes)
    {
      DataManager.clearShoppingList();
    }
    StateHasChanged();    
    nm.NavigateTo("/");
  }

Woher kommt denn StateHasChanged? Die ist ja von ComponentBase. Aber das einzige was ich hab ist die RazorPage (@page) und die erbt ja von:

Inheritance

Object

RazorPageBase

RazorPage

RazorPage<TModel>

Answer 11

RazorPages ist ein anderes Framework. Den Name Razor (Rasierklingen) gibt es schon länger als Blazor. Blazor bedeutet Razor+Browser=Blazor und sagt aus das Razor jetzt auch im Browser läuft. Ist einfach nur historisch so entstanden

Das ist die richtige Dokumentation: ComponentBase.StateHasChanged Methode (Microsoft.AspNetCore.Components) | Microsoft Learn

Ja StateHasChanged ist für das Rendern zuständig. Dass besondere ist das nur die Komponente neu gemalt wird in der StateHasChanged aufgerufen wird und niemals die gesamte App.

Du sagst selbst das die Werte im „Hintergrund“ geändert werden aber sie nicht korrekt angezeigt werden. Somit fehlt irgendwo ein StateHasChanged.  

---

Gruß Thomas
Der Junior lernt täglich, um Senior zu werden.
Der Senior lernt täglich, da er weiß, dass er immer Junior bleiben wird.
Github