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

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", registra el evento UrlLoading y establece la propiedad UrlLoadingEventArgs.UrlLoadingStrategy. La enumeración UrlLoadingStrategy permite establecer el comportamiento de control de vínculos en cualquiera de los valores siguientes:

• OpenExternally: carga 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: carga 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 uses esta estrategia para vínculos externos a menos que puedas asegurarte 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

El dispositivo abre los vínculos externos en una aplicación determinada. La apertura de vínculos externos en BlazorWebView puede presentar vulnerabilidades de seguridad y no debe habilitarse a menos que puedas asegurarte de que los vínculos externos son de plena confianza.

Documentación de la API:

• .NET MAUI: BlazorWebView.UrlLoading
• WPF: BlazorWebView.UrlLoading
• Windows Forms: BlazorWebView.UrlLoading

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

using Microsoft.AspNetCore.Components.WebView;

Agrega 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;
        }
    };

Agrega 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">

Agrega 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, agrega 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

Usa 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), especifica 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), especifica 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, especifica 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";

Navegación entre páginas y componentes Razor

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:

• El espacio de nombres de la aplicación es MauiBlazor, que coincide con el nombre de proyecto sugerido del tutorial Compilación de una aplicación Blazor Hybrid de .NET MAUI.
• Un objeto ContentPage se coloca en una nueva carpeta agregada a la aplicación denominada Views.

En App.xaml.cs, crea 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:

• Agrega 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.
• Agrega 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, llama 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), cambia PopAsync a PopModalAsync:

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

• En el método OpenPage (Pages/Index.razor), cambia 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, consulta los siguientes recursos:

• Artículo NavigationPage (documentación de).NET MAUI
• NavigationPage (documentación de API)

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, consulta los siguientes artículos en la documentación de .NET MAUI:

• Vínculos a aplicaciones Android
• Vínculos universales de Apple