9
votes

Comment rediriger vers une route différente dans Blazor Server-side

Dans Blazor Client, une redirection peut être réalisée en utilisant

using Microsoft.AspNetCore.Blazor.Browser.Services;
(...)
BrowserUriHelper.Instance.NavigateTo("/route")

Cela ne fonctionne cependant pas dans un projet Blazor Server, car cela génère l'erreur suivante:

Impossible de convertir un objet de type «Microsoft.AspNetCore.Blazor.Server.Circuits.RemoteJSRuntime» en type «Microsoft.JSInterop.IJSInProcessRuntime».

À quoi ressemble une redirection dans Blazor-Server?


5 commentaires

Question, pourquoi redirigez-vous sur le serveur vers un autre contrôleur? Ne pouvez-vous pas simplement exécuter la méthode souhaitée? Plutôt que de vous diriger vers un nouveau HttpContext? Sinon, vous devrez rendre une vue partielle et la renvoyer comme une forme de données accessibles qui peuvent être rendues à nouveau.


Ainsi, lorsque vous créez un projet côté serveur, vous obtenez des projets serveur et client. Je veux faire cela dans l'application cliente dans la page rasoir. Lorsque l'utilisateur clique sur un bouton, une demande est envoyée au serveur et, en fonction de la réponse, je souhaite soit rediriger vers une autre page, soit rester à jour.


Oui, mais lorsque le client atteint l'événement pour naviguer dans le client, vous déclenchez l'événement côté serveur à partir du client. Les applications clientes naviguent en fonction de la réponse que le serveur leur donne. Ensuite, le client utilisera la vue de composant appropriée en fonction de la réponse fournie par le serveur.


Le serveur doit donc dire au client de naviguer vers une autre page? Alors, comment cela peut-il être réalisé pour mon scénario? Savez-vous s'il y a un exemple?


Pour les implémentations de Blazor non hébergées côté serveur, oui. Pour Blazor, pas pour le moment, je devrais jouer avec.


3 Réponses :


3
votes

Pas exactement ce que vous recherchez, mais "une solution" quand même. Je n'arrive pas à trouver un moyen pour le moment, de faire quelque chose de similaire à Response.Redirect côté serveur, mais en utilisant jsinterop, dans le composant que vous souhaitez rediriger FROM, utilisez quelque chose comme ceci. Notez que j'étais aussi curieux, et sachant que cela me reviendrait aussi, j'ai fait ce qui suit:

Donc, basé sur l'exemple d'application avec le modèle de projet côté serveur ...

index. cshtml

using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Blazor.Components;
using Microsoft.JSInterop;

namespace MyApp.Web.App.Shared
{
    public class MycomponentBase : BlazorComponent
    {
        public static Task<string> RedirectTo(string path)
        {
            return JSRuntime.Current.InvokeAsync<string>(
                "clientJsfunctions.RedirectTo", path);
        }
    }
}

puis, sous le dossier wwwwroot, placez un fichier javascript avec ceci:

<body>
    <app>Loading...</app>

    <script src="_framework/blazor.server.js"></script>

    <script src="scripts/ClientUtil.js"></script>
</body>

Enfin, dans votre fichier de bootstrapper, index.html, placez une référence à ce fichier js

window.clientJsfunctions = {       
    RedirectTo: function (path) {
        window.location = path;
    }
};

Mieux encore, placez des méthodes telles que celle ci-dessus "RedirectTo" dans un classe, et utilisez-la comme classe de base pour la plupart de vos pages de composants.

@using Microsoft.JSInterop;

 <a href="#" class="btn btn-primary" onclick="@GoSomewhere">Go somewhere with Blazor</a>

@functions {
    protected void GoSomewhere()
    {
        RedirectTo("/FetchData");  //or any other "page" in your pages folder
    }

    public static Task<string> RedirectTo(string path)
    {
        return JSRuntime.Current.InvokeAsync<string>(
            "clientJsfunctions.RedirectTo", path);
    }    
}

De plus, n'oubliez pas de mettre ceci en haut de chaque composant @inherits MycomponentBase;

Maintenant, vous devriez avoir une méthode "Redirect" que vous pouvez appeler à partir de n'importe quel composant qui dérive de votre classe de composant de base.


0 commentaires

6
votes

Après de nombreuses expériences, j'ai découvert que cela fonctionnait du côté serveur:

using Microsoft.AspNetCore.Blazor.Services;
(...)
UriHelper.NavigateTo("/route");

Certes, cela a presque la même apparence, mais fait le travail (au moins dans Blazor 0.8)


3 commentaires

En 0.9, pour moi au moins, j'avais besoin de @injecter IUriHelper UriHelper


UriHelper a été renommé NavigationManager dans l'espace de noms Microsoft.AspNetCore.Components: @inject NavigationManager NavigationManager; NavigationManager.NavigateTo ("route", false);


J'ai une application serveur Blazor qui doit rediriger vers des pages dans une bibliothèque de composants Blazor séparée et NavigationManager est inutile. Pour une raison quelconque, il n'est pas initialisé, je n'ai aucun moyen de naviguer d'une page du projet serveur vers une page du projet de bibliothèque.



18
votes

Si vous pouvez déclencher sur la page du rasoir, vous pouvez utiliser ce qui suit:

@page "/YourPageName"
@inject NavigationManager NavigationManager

<h1>xxx</h1>
.
.
.


@code {

    void MethodToTriggerUrl()
    {
        NavigationManager.NavigateTo("PageToRedirect");
    }
}


0 commentaires