Enrutamiento y navegación de Blazor Hybrid de ASP.NET Core

  • Artículo

Nota

Esta no es la versión más reciente de este artículo. Para la versión actual, consulte la versión .NET 8 de este artículo.

Importante

Esta información hace referencia a un producto en versión preliminar, el cual puede sufrir importantes modificaciones antes de que se publique la versión comercial. Microsoft no proporciona ninguna garantía, expresa o implícita, con respecto a la información proporcionada aquí.

Para la versión actual, consulte la versión .NET 8 de este artículo.

En este artículo se explica cómo administrar el enrutamiento y la navegación de solicitudes en aplicaciones Blazor Hybrid.

Comportamiento del enrutamiento de solicitudes de URI

Comportamiento predeterminado del enrutamiento de solicitudes de URI:

  • Un vínculo es interno si el nombre de host y el esquema coinciden entre el URI de origen de la aplicación y el URI de solicitud. Cuando los nombres de host y esquemas no coinciden o si el vínculo establece target="_blank", el vínculo se considera externo.
  • Si el vínculo es interno, la aplicación abre el vínculo en BlazorWebView.
  • Si el vínculo es externo, el vínculo se abre mediante una aplicación determinada por el dispositivo en función del controlador registrado del dispositivo para el esquema del vínculo.
  • En el caso de los vínculos internos que parecen solicitar un archivo porque el último segmento del URI usa la notación de puntos (por ejemplo, /file.x, /Maryia.Melnyk, /image.gif) pero no apunta a ningún contenido estático:
    • WPF y Windows Forms: se devuelve el contenido de la página host.
    • .NET MAUI: Se devuelve un código de respuesta 404.

Para cambiar el comportamiento de control de vínculos de los vínculos que no establecen target="_blank", registre el evento UrlLoading y establezca la propiedad UrlLoadingEventArgs.UrlLoadingStrategy. La enumeración UrlLoadingStrategy permite establecer el comportamiento de control de vínculos en cualquiera de los valores siguientes:

  • OpenExternally: cargue la dirección URL mediante una aplicación determinada por el dispositivo. Esta es la estrategia predeterminada para los URI con un host externo.
  • OpenInWebView: cargue la dirección URL dentro de BlazorWebView. Esta es la estrategia predeterminada para las direcciones URL con un host que coincida con el origen de la aplicación. No use esta estrategia para vínculos externos a menos que pueda asegurarse de que el URI de destino sea de plena confianza.
  • CancelLoad: cancela el intento de carga de la dirección URL actual.

La propiedad UrlLoadingEventArgs.Url se usa para obtener o establecer dinámicamente la dirección URL.

Advertencia

De forma predeterminada, los vínculos externos se abren en una aplicación determinada por el dispositivo. La apertura de vínculos externos en un elemento BlazorWebView puede presentar vulnerabilidades de seguridad y no debe habilitarse a menos que pueda asegurarse de que los vínculos externos son de plena confianza.

Documentación de la API:

El espacio de nombres Microsoft.AspNetCore.Components.WebView es necesario para los ejemplos siguientes:

using Microsoft.AspNetCore.Components.WebView;

Agregue el siguiente controlador de eventos al constructor de Page donde se crea BlazorWebView, que se encuentra en MainPage.xaml.cs en una aplicación creada a partir de la plantilla de proyecto .NET MAUI.

blazorWebView.UrlLoading += 
    (sender, urlLoadingEventArgs) =>
    {
        if (urlLoadingEventArgs.Url.Host != "0.0.0.0")
        {
            urlLoadingEventArgs.UrlLoadingStrategy = 
                UrlLoadingStrategy.OpenInWebView;
        }
    };

Agregue el atributo UrlLoading="Handle_UrlLoading" al control BlazorWebView en el archivo .xaml:

<blazor:BlazorWebView HostPage="wwwroot\index.html" 
    Services="{StaticResource services}" 
    x:Name="blazorWebView" 
    UrlLoading="Handle_UrlLoading">

Agregue el controlador de eventos en el archivo .xaml.cs:

private void Handle_UrlLoading(object sender, 
    UrlLoadingEventArgs urlLoadingEventArgs)
{
    if (urlLoadingEventArgs.Url.Host != "0.0.0.0")
    {
        urlLoadingEventArgs.UrlLoadingStrategy = 
            UrlLoadingStrategy.OpenInWebView;
    }
}

En el constructor del formulario que contiene el control BlazorWebView, agregue el registro de eventos siguiente:

blazorWebView.UrlLoading += 
    (sender, urlLoadingEventArgs) =>
    {
        if (urlLoadingEventArgs.Url.Host != "0.0.0.0")
        {
            urlLoadingEventArgs.UrlLoadingStrategy = 
                UrlLoadingStrategy.OpenInWebView;
        }
    };

Obtención o establecimiento de una ruta de acceso para la navegación inicial

Use la propiedad BlazorWebView.StartPath para obtener o establecer la ruta de navegación inicial dentro del contexto de navegación Blazor cuando el componente Razor haya terminado de cargarse. La ruta de acceso de inicio predeterminada es la ruta de acceso de dirección URL raíz relativa (/).

En el marcado XAML MainPage (MainPage.xaml), especifique la ruta de acceso de inicio. En el ejemplo siguiente se establece la ruta de acceso a una página principal en /welcome:

<BlazorWebView ... StartPath="/welcome" ...>
    ...
<BlazorWebView>

Como alternativa, la ruta de acceso de inicio se puede establecer en el constructor de MainPage (MainPage.xaml.cs):

blazorWebView.StartPath = "/welcome";

En el diseñador MainWindow (MainWindow.xaml), especifique la ruta de acceso de inicio. En el ejemplo siguiente se establece la ruta de acceso a una página principal en /welcome:

<blazor:BlazorWebView ... StartPath="/welcome" ...>
    ...
</blazor:BlazorWebView>

Dentro del constructor Form1 del archivo Form1.cs, especifique la ruta de acceso de inicio. En el ejemplo siguiente se establece la ruta de acceso a una página principal en /welcome:

blazorWebView1.StartPath = "/welcome";

En esta sección se explica cómo navegar entre páginas de contenido .NET MAUI y componentes Razor.

La plantilla de proyecto híbrida Blazor de .NET MAUI no es una aplicación basada en Shell, por lo que la navegación basada en URI para aplicaciones basadas en Shell no es adecuada para un proyecto basado en la plantilla de proyecto. En los ejemplos de esta sección se usa un objeto NavigationPage para realizar la navegación sin modo o modal.

En el ejemplo siguiente:

En App.xaml.cs, cree el objeto MainPage como un objeto NavigationPage realizando el cambio siguiente:

- MainPage = new MainPage();
+ MainPage = new NavigationPage(new MainPage());

Views/NavigationExample.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MauiBlazor"
             x:Class="MauiBlazor.Views.NavigationExample"
             Title="Navigation Example"
             BackgroundColor="{DynamicResource PageBackgroundColor}">
    <StackLayout>
        <Label Text="Navigation Example"
               VerticalOptions="Center"
               HorizontalOptions="Center"
               FontSize="24" />
        <Button x:Name="CloseButton" 
                Clicked="CloseButton_Clicked" 
                Text="Close" />
    </StackLayout>
</ContentPage>

En el siguiente archivo de código NavigationExample, el controlador de eventos CloseButton_Clicked del botón de cierre llama a PopAsync para desactivar el objeto ContentPage de la pila de navegación.

Views/NavigationExample.xaml.cs:

namespace MauiBlazor.Views;

public partial class NavigationExample : ContentPage
{
    public NavigationExample()
    {
        InitializeComponent();
    }

    private async void CloseButton_Clicked(object sender, EventArgs e)
    {
        await Navigation.PopAsync();
    }
}

En un componente Razor:

  • Agregue el espacio de nombres para las páginas de contenido de la aplicación. En el ejemplo siguiente, el espacio de nombres es MauiBlazor.Views.
  • Agregue un elemento button HTML con un @onclickcontrolador de eventos para abrir la página de contenido. El método del controlador de eventos se denomina OpenPage.
  • En el controlador de eventos, llame a PushAsync para insertar el elemento ContentPage, NavigationExample, en la pila de navegación.

El ejemplo siguiente se basa en el componente Index de la plantilla de proyecto Blazor de .NET MAUI.

Pages/Index.razor:

@page "/"
@using MauiBlazor.Views

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />

<button class="btn btn-primary" @onclick="OpenPage">Open</button>

@code {
    private async void OpenPage()
    {
        await App.Current.MainPage.Navigation.PushAsync(new NavigationExample());
    }
}

Para cambiar el ejemplo anterior a la navegación modal:

  • En el método CloseButton_Clicked (Views/NavigationExample.xaml.cs), cambie PopAsync a PopModalAsync:

    - await Navigation.PopAsync();
+ await Navigation.PopModalAsync();

  • En el método OpenPage (Pages/Index.razor), cambie PushAsync a PushModalAsync:

    - await App.Current.MainPage.Navigation.PushAsync(new NavigationExample());
+ await App.Current.MainPage.Navigation.PushModalAsync(new NavigationExample());

Para obtener más información, consulte los siguientes recursos:

Vinculación de aplicaciones (vinculación profunda)

A menudo es conveniente conectar un sitio web y una aplicación móvil para que los vínculos en un sitio web inicien la aplicación móvil y muestren contenido en ella. La vinculación de aplicaciones, también conocida como vinculación profunda, es una técnica que permite a un dispositivo móvil responder a un URI e iniciar contenido en una aplicación móvil representada por el URI.

Para obtener más información, consulte los siguientes artículos en la documentación de .NET MAUI: