Comparteix a través de

Blazor Hybrid de ASP.NET Core

  • Article

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.

Advertencia

Esta versión de ASP.NET Core ya no se admite. Para obtener más información, consulte la Directiva de soporte técnico de .NET y .NET Core. 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 ASP.NET Core Blazor Hybrid, una forma de compilar la interfaz de usuario web interactiva del lado cliente con .NET en una aplicación de ASP.NET Core.

Use Blazor Hybrid para combinar marcos de cliente nativos móviles y de escritorio con .NET y Blazor.

En una aplicación Blazor Hybrid, los componentes de Razor se ejecutan de forma nativa en el dispositivo. Los componentes se representan en un control Web View incrustado a través de un canal de interoperabilidad local. Los componentes no se ejecutan en el explorador y WebAssembly no está implicado. Los componentes de Razor cargan y ejecutan código rápidamente, y los componentes tienen acceso total a las funcionalidades nativas del dispositivo a través de la plataforma .NET. Los estilos de componentes representados en un elemento Web View son dependientes de la plataforma y pueden requerir que tenga en cuenta las diferencias de representación entre plataformas mediante hojas de estilos personalizadas.

En los artículos de Blazor Hybrid se tratan temas relacionados con la integración de componentes de Razor en marcos de cliente nativos.

Aplicaciones Blazor Hybrid con .NET MAUI

La compatibilidad con Blazor Hybrid se integra en el marco .NET Multi-platform App UI (.NET MAUI). .NET MAUI incluye el control BlazorWebView, que permite representar componentes de Razor en un control Web View incrustado. Al usar .NET MAUI y Blazor juntos, puede reutilizar un conjunto de componentes de interfaz de usuario web en aplicaciones web, de escritorio y móviles.

Aplicaciones Blazor Hybrid con WPF y Windows Forms

Las aplicaciones Blazor Hybrid se pueden crear con Windows Presentation Foundation (WPF) y Windows Forms. Blazor proporciona controles BlazorWebView para estos dos marcos (WPF BlazorWebViewy Windows Forms BlazorWebView). Los componentes de Razor se ejecutan de forma nativa en el escritorio de Windows y se representan en un control Web View incrustado. El uso de Blazor en WPF y Windows Forms permite agregar una nueva interfaz de usuario a las aplicaciones de escritorio de Windows existentes que se pueden reutilizar en plataformas con .NET MAUI o en la Web.

Configuración de Web View

Blazor Hybrid expone la configuración de la Web View subyacente para distintas plataformas a través de eventos del control BlazorWebView:

  • BlazorWebViewInitializing proporciona acceso a la configuración que se usa para crear la Web View en cada plataforma, si la configuración está disponible.
  • BlazorWebViewInitialized proporciona acceso a la Web View para permitir seguir configurando los parámetros.

Use los patrones preferidos en cada plataforma para adjuntar controladores de eventos a los eventos para ejecutar el código personalizado.

Documentación de la API:

Excepciones no controladas en aplicaciones de Windows Forms y WPF

Esta sección solo se aplica a las aplicaciones de Windows Forms y Blazor Hybrid de WPF.

Cree una devolución de llamada para UnhandledException en la propiedad System.AppDomain.CurrentDomain. En el ejemplo siguiente se usa una directiva del compilador para mostrar que MessageBox alerta al usuario de que se ha producido un error o muestra la información de error en el desarrollador. Registre la información de error en error.ExceptionObject.

AppDomain.CurrentDomain.UnhandledException += (sender, error) =>
{
#if DEBUG
    MessageBox.Show(text: error.ExceptionObject.ToString(), caption: "Error");
#else
    MessageBox.Show(text: "An error has occurred.", caption: "Error");
#endif
    
    // Log the error information (error.ExceptionObject)
};

Globalización y localización

Esta sección solo se aplica a las aplicaciones de .NET MAUIBlazor Hybrid.

.NET MAUI configura CurrentCulture y CurrentUICulture en función de la información de ambiente del dispositivo.

IStringLocalizer y otra API del espacio de nombres Microsoft.Extensions.Localization suelen funcionar según lo previsto, junto con el formato de globalización, el análisis y el enlace que se basa en la referencia cultural del usuario.

Al cambiar dinámicamente la referencia cultural de la aplicación en tiempo de ejecución, la aplicación debe volver a cargarse para reflejar el cambio en la referencia cultural, que se encarga de volver a representar el componente raíz y pasar la nueva referencia cultural a los componentes secundarios que se han vuelto a representar.

El sistema de recursos de .NET admite la inserción de imágenes localizadas (como blobs) en una aplicación, pero Blazor Hybrid no puede mostrar las imágenes insertadas en componentes Razor en este momento. Incluso si un usuario lee los bytes de una imagen en un elemento Stream mediante ResourceManager, el marco no admite actualmente la representación de la imagen recuperada en un componente Razor.

Un enfoque específico de la plataforma para incluir imágenes localizadas es una característica del sistema de recursos de .NET, pero los elementos del explorador de un componente Razor de una aplicación .NET MAUIBlazor Hybrid no pueden interactuar con estas imágenes.

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

Acceso a servicios con ámbito desde la interfaz de usuario nativa

BlazorWebView tiene un método TryDispatchAsync que llama a un Action<ServiceProvider> especificado de forma asincrónica y pasa los servicios con ámbito disponibles en los componentes de Razor. Esto permite que el código de la interfaz de usuario nativa acceda a servicios con ámbito como NavigationManager:

private async void MyMauiButtonHandler(object sender, EventArgs e)
{
    var wasDispatchCalled = await _blazorWebView.TryDispatchAsync(sp =>
    {
        var navMan = sp.GetRequiredService<NavigationManager>();
        navMan.CallSomeNavigationApi(...);
    });

    if (!wasDispatchCalled)
    {
        ...
    }
}

Cuando wasDispatchCalled es false, considere qué hacer si no se envió la llamada. Por lo general, el envío no debe producir un error. Si se produce un error, es posible que se agoten los recursos del sistema operativo. Si se agotan los recursos, considere la posibilidad de registrar un mensaje, producir una excepción y, quizás, alertar al usuario.

Recursos adicionales