Clever Geek Handbook

Combinando Blazor y Razor Pages en una aplicación ASP.NET Core 3

La traducción del artículo se preparó antes del inicio del curso "C # ASP.NET Core Developer" .









En este artículo, le mostraré cómo puede agregar páginas basadas en Blazor a una aplicación existente de Razor Pages.







Prefacio



Blazor se convertirá en oro en dos semanas . Muchas cosas en el proyecto todavía están sujetas a cambios bastante drásticos, y la última Vista previa 9 ha complicado significativamente la interacción entre las páginas de Razor y los componentes de Blazor: ahora es imposible pasar parámetros de una página de Razor a un componente de Blazor usando Html.RenderComponentAsync. Esto puede cambiar en el futuro, pero es probable que en .NET Core 3.0 aparezca con esta limitación.



Si aún desea mejorar su aplicación Razor Pages existente con Blazor Magic, una solución es crear completamente sus páginas en Blazor. En este artículo, le mostraré cómo puede agregar Blazor Pages a una aplicación de Razor Pages existente, donde partes de la aplicación se crean usando Razor Pages y otras usando Blazor Pages. El diseño es el mismo para ambos tipos de páginas .



Paso uno: soporte para Blazor



Por lo tanto, tenemos una aplicación Razor Pages existente que se ha convertido a .NET Core 3.







Primero, debe agregar compatibilidad con Blazor a su aplicación. Este soporte le permitirá renderizar componentes de Blazor desde una página de Razor. La documentación oficial lo guía a través de este proceso por completo, pero aquí hay un resumen rápido.



Startup.cs:



tenemos que añadir Services.AddServerSideBlazora ConfigureServicesy endpoints.MapBlazorHuben Configure:







_Layout.cshtml : El Blazor



se necesita biblioteca de JS para conectar Blazor en el lado del servidor. Se puede añadir a _Layout.cshtml:







? 

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


_Imports.razor:



También necesitamos un nuevo archivo llamado _Imports.razor. Debe agregarse a la carpeta Pages: se







_Imports.razorusa para configurar las instrucciones de uso para sus componentes Blazor. Puede comenzar con lo siguiente



:? 

@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components.Web


Y eso es todo . Nuestra aplicación ahora es compatible con Blazor. ¿Podemos verificar esto copiando el componente Counter clásico en nuestra aplicación







? 

@page "/counter"
 
<h1>Counter</h1>

<p>Current count: @currentCount</p>
 
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
 
@code {
    int currentCount = 0;
 
    void IncrementCount()
    {
        currentCount++;
    }
}


Y edite Privacy.cshtmlpara incluir el componente Contador: 



<a href="https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application#">?</a>
@page
@model PrivacyModel
@{
    ViewData["Title"] = "Privacy Policy";
}
<h1>@ViewData["Title"]</h1>
 
<p>Use this page to detail your site's privacy policy.</p>
 
<component>@(await Html.RenderComponentAsync<Counter>(RenderMode.Server))</component>


Ahora, cuando lancemos la aplicación, debería aparecer un contador en funcionamiento en nuestra página:







en la siguiente parte de este artículo, le mostraré cómo puede modificar su aplicación Razor Pages para que en lugar de simplemente agregar componentes a las páginas existentes, pueda crear páginas Blazor completas.



Paso dos: compatibilidad con Blazor Pages



Nuestro componente Blazor define una ruta “/counter”:







pero seguirla no funciona:







nuestro objetivo es que el enrutamiento a las páginas Blazor funcione. Y queremos que las páginas de Blazor utilicen el mismo diseño que las páginas de Razor. Para esto necesitamos algunas cosas, comenzando con el enrutador .



App.razor: crea



un nuevo archivo App.razoren la carpeta
Pages
:







Componente Router se define en App.razor:



? 



@using Microsoft.AspNetCore.Components.Routing
 
<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData"/>
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>


El enrutador escanea automáticamente todos los componentes de Blazor utilizando la directiva de página y les agrega rutas.



_Host.cshtml:



También necesitamos una página para alojar las páginas de Blazor. Puede llamarse como quieras, pero en las plantillas de Blazor se usa por defecto _Host.cshtml, lo cual nos está bien (sin embargo, como cualquier otro). En _Host.cshtmlpodemos definir un diseño, que en nuestro caso será el mismo que para las páginas de Razor.







_Host.cshtmlcontiene la llamada Html.RenderComponentAsync:



? 



@page "/blazor"
 
@{
    Layout = "_Layout";
}
 
<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.Server))
</app>


Startup.cs:



Y finalmente, una pequeña adición al método Configure Startup.cs. Anteriormente agregamos MapBlazorHub, y ahora necesitamos agregar una llamada que MapFallbackToPageapunte a la nueva _Host.cshtml: ¡







Y eso es todo! Ahora solo necesitamos probar nuestra configuración. Agregue un contador de páginas Blazor (Contador) a su diseño mediante la edición Pages/Shared/_Layout.cshtml:







cuando iniciamos la aplicación, vemos una página Blazor en funcionamiento en nuestra aplicación Razor Pages:







y no interrumpimos el soporte para agregar componentes Blazor a Razor Pages:







Notas



Un par de cosas a anotar:



  • Las rutas Blazor solo funcionan cuando apuntan a la raíz. Si se cambia “/ contador” a, por ejemplo, la “/products/counter”página no podrá cargar el requerido blazor.server.js. En su lugar, obtendremos un 404. Debería ser posible cambiar la etiqueta del script para que pueda cargar el script requerido independientemente de la ubicación, pero parece haber cambiado de pre-8 a pre-9 y no pude hacer que funcione. Aquí hay una captura de pantalla 404 que muestra el problema:
  • Si logra cargar el script, probablemente se encontrará con los mismos problemas con Blazor hub: los scripts intentan encontrar el hub en / products / blazor en lugar de blazor. Para solucionar este problema, puede iniciar manualmente una conexión entre el servidor y el navegador:


? 



<script src="~/_framework/blazor.server.js" autostart="false"></script>
<script>
  Blazor.start({
    configureSignalR: function (builder) {
      builder.withUrl('/_blazor');
    }
  });
</script>


Código de muestra



El código de muestra para este proyecto está disponible en GitHub .





¿Quieres saber más sobre nuestro curso? Aquí tienes .





Lee mas:







More articles:


All Articles