Modifier la mise en page dans une page Blazor en fonction de l'URL

Question

Nous cherchons à savoir si nous pouvons faire migrer lentement une ancienne application WinForms vers une application Web de type blazor.

Jusqu'à ce que l'application entière soit migrée, nous exposerons chaque fonctionnalité des formulaires comme une page blazor, une par une. S'il manque une fonctionnalité à l'application Web (qui n'est pas encore mise en œuvre), les utilisateurs peuvent ouvrir l'application WinFroms complète pour obtenir ce dont ils ont besoin.

Pour que cela fonctionne, j'aimerais qu'une page ait différentes mises en page en fonction de l'interface utilisateur du client qui accède à la page. Ainsi, si vous accédez à la page via le Web, elle devrait afficher le menu de navigation, l'en-tête et le pied de page, etc... Si l'on y accède en tant que vue WebControl2 intégrée à l'application Winforms (je ne veux pas dupliquer le code entre les deux plates-formes), tous les éléments de la barre de navigation, de l'en-tête et du pied de page doivent disparaître car l'application Winforms assume cette fonctionnalité.

Mon idée initiale était d'avoir 2 URLs qui mènent à la même page et de faire en sorte que la page applique une mise en page différente selon que l'application web est utilisée (les navLinks utiliseraient l'url 'employees') ou que l'application Winforms y accède (l'application Winforms chargerait l'url '/winforms/employees') comme ceci :

@page "/employees"
@page "/winforms/employees"

@inject NavigationManager MyNavigationManager

@if (MyNavigationManager.Uri.Contains("winforms"))
{
    @layout AppHostLayout
}
else
{
    @layout MainLayout
}

Cependant, cela ne fonctionne pas car vous ne pouvez avoir qu'UNE seule directive de mise en page par page.

Existe-t-il un meilleur moyen et/ou un moyen spécifique au blazor pour atteindre le résultat que je souhaite ?

Answer 1

J'aurais aimé passer quelques minutes de plus à y réfléchir. La solution est assez simple.

Mettez la logique de la disposition que vous voulez dans le fichier MainLayout.razor :

@inherits LayoutComponentBase
@inject NavigationManager _navManager

@if (_navManager.Uri.Contains("winforms"))
{
    <div class="main">
        <div class="content px-4">
            @Body
        </div>
    </div>
}
else
{
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4 auth">
            <LoginDisplay />
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
}

Il vous suffit alors d'avoir les deux directives de page dans votre fichier Page.razor :

@page "/employees"
@page "/winforms/employees"

Fonctionne comme un charme !