Blazor vs Razor: The Difference Solved

Con el lanzamiento de .NET 6 y el ciclo de exageración en torno a Blazor como una solución de referencia para que los desarrolladores de C# escriban aplicaciones web de una sola página, surge la pregunta: "¿Cuál es la diferencia entre Blazor y Razor"?

Aunque Blazor y Razor no son directamente comparables, ya que representan dos capacidades distintas, a menudo los términos para componentes Blazor y componentes Razor se usan indistintamente.

Con este artículo, aclararé la diferencia entre Blazor vs Razor, y le mostraré cómo usar cada uno en Ignite UI for Blazor.  También creará una aplicación de .NET 6, mediante el componente Vista de tarjeta de Ignite UI, para que pueda familiarizarse con Blazor y Razor en una aplicación real.

Try Ignite UI for Blazor

¿Qué es Blazor

Blazor es un marco web gratuito de código abierto que permite a los desarrolladores crear interfaces de usuario web interactivas con C#, código HTML y sintaxis Razor en lugar de JavaScript. La forma en que funciona Blazor es que crea aplicaciones basadas en cliente con WebAssembly y aplicaciones del lado servidor con ASP.NET. La aplicación de servidor se comunica con el explorador a través de una conexión constante mediante SignalR, mientras que WebAssembly se ejecuta directamente en el explorador.

Nuestro blog ofrece una descripción detallada de Blazor, Blazor WebAssembly y Blazor Server. Entonces, en caso de que desee profundizar más, continúe y lea Blazor publicación del blog Server vs. Blazor WebAssembly.

What Is Razor

Mientras que Blazor es un marco, Razor o Razor Pages, es un motor de plantillas (View). La sintaxis Razor combina Razor marcado, C# y HTML para crear contenido web dinámico. Normalmente, Razor se utiliza para alimentar ASP.NET MVC Views. Por lo tanto, cada vez que escriba una vista MVC, normalmente usará Razor sintaxis para enlazar datos al marcado. En una aplicación MVC, la página Razor se procesa en el servidor y, a continuación, se envía al cliente como una sola página HTML.  Cuando la página se actualiza en el navegador, se vuelve a procesar en el servidor y se envía de vuelta al cliente.

Razor vs Blazor: La diferencia y el vínculo entre ellos resueltos

Blazor es un marco que aprovecha los componentes Razor para producir HTML dinámico. La mayor diferencia entre Razor y Blazor es que Razor es un lenguaje de marcado con C#, mientras que Blazor es el marco que le permite ejecutar código C# y usar el motor de vista Razor en el explorador.

¿Y qué pasa con los componentes Blazor vs Razor?

Razor componentes son unidades de marcado y código que representan los elementos básicos de la interfaz de usuario de cualquier aplicación Blazor implementada con una extensión .razor. En otras palabras, Blazor usa componentes Razor para crear interfaces de usuario, lo que significa que puede escribir componentes Razor y utilizar Blazor los como modelo de hospedaje del lado cliente para ellos.

Así es como se usan Blazor y Razor en Ignite UI

Para empezar, debe instalar NodeJS y Visual Studio Code en el equipo.

Paso 1 – Crear un proyecto de Nueva Blazor

Inicie Visual Studio 2022 y haga clic en Crear un nuevo proyecto en la página de inicio, seleccione la plantilla Blazor aplicación de Web Assembly y haga clic en Siguiente. Después de proporcionar un nombre y una descripción del proyecto, haga clic en Crear.

Paso 2 – Instalar Ignite UI for Blazor paquete

Haga clic con el botón secundario en la solución o el proyecto y seleccione Administrar paquetes NuGet para la solución. A continuación, abra la pestaña Examinar en el cuadro de diálogo del administrador de paquetes, seleccione el origen del paquete Infragistics e instale el paquete NuGet IgniteUI.Blazor.

Step 3 – Register Ignite UI for Blazor component

Abra el archivo Program.cs y registre el servicio Ignite UI for Blazor agregando lo siguiente después del compilador. Services.AddScoped... línea:

builder.Services.AddIgniteUIBlazor();

 

Paso 4 – Actualizar el archivo Imports.razor

Add the IgniteUI.Blazor.Controls namespace in the _Imports.razor file:

 

@using IgniteUI.Blazor.Controls

Paso 5: Actualizar el archivo Pages/_Layout.cshtml

Agregue la hoja de estilo en el elemento <head> del archivo \wwwroot\index.html:

<head>
	...
	<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
</head>

 

Step 6 – Add Ignite UI for Blazor Component

Agregue un componente Ignite UI for Blazor a su página de Razor:

<IgbCard style="width:350px">
	<IgbCardMedia>
		<img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" />
	</IgbCardMedia>
	<IgbCardHeader>
		<h4>Jane Doe</h4>
		<h6>Professional Photographer</h6>
	</IgbCardHeader>
	<IgbCardContent>Hi! I'm Jane, photographer and filmmaker.
		Photography is a way of feeling, of touching,
		of loving. What you have caught on film is captured forever...
		it remembers little things, long after you have
		forgotten everything.</IgbCardContent>
	<IgbCardActions>
		<IgbButton>More Info</IgbButton>
	</IgbCardActions>
</IgbCard>




Step 7 – Build & Run your App

¡Y ya está todo listo! Haga clic en el botón Ejecutar para compilar y ejecutar su nueva aplicación Blazor que ejecuta la vista de tarjeta en Ignite UI!

Building Enterprise Blazor Apps with App Builder

Ahora, si desea acortar significativamente el tiempo de desarrollo, puede usar creadores de aplicaciones de bajo código como App Builder ^тм.

App Builder ^тм es una nueva plataforma de desarrollo de bajo código WYSIWYG basada en la nube y un creador de aplicaciones de arrastrar y soltar que agiliza todo, desde el diseño hasta el código. El objetivo principal del software es eliminar la complejidad detrás del diseño de la interfaz de usuario y la creación de aplicaciones, al tiempo que le permite a usted y a todo el equipo de desarrollo centrarse en la experiencia en el dominio para la lógica empresarial. Puede crear su aplicación empresarial en Blazor (y Angular) mucho más rápido que antes sin codificación manual. Y lo que es más, tienes la opción de descargar tu proyecto como un archivo zip o publicarlo en GitHub.

[View:https://youtu.be/WSQ38lLacH4:578:348]

En comparación con otras herramientas de low-code en el mercado, el principal diferenciador es que App Builder ^тм está respaldado por un Design System, componentes de interfaz de usuario reales y más de 60+ controles de interfaz de usuario. Una de las mejores cosas de esto es que App Builder genera código listo para producción en Blazor (y Angular) con un clic, lo que le permite inspeccionar el código y obtener una vista previa fácil de cómo se ve y se siente su aplicación Blazor (o Angular aplicación). Y si piensa en todos los componentes con todas las funciones que necesita para crear aplicaciones empresariales modernas, como cuadrículas de datos, gráficos, interfaz de usuario Swagger, controles de interfaz de usuario, opciones de personalización, temas, marca y más, esto es lo que también ofrece el software de arrastrar y soltar WYSIWYG App Builder ^тм.

Recientemente, publicamos un tutorial completo para ayudarlo a crear aplicaciones Blazor con App Builder y generar su código Blazor en menos de 10 minutos. Por lo tanto, puede saltar directamente a esta Blazor guía paso a paso.