Blazor es un framework para construir interfaces web interactivas de clientes usando .NET:
- Usa C# en lugar de JavaScript para crear una interfaz de usuario rica e interactiva.
- Comparte lógica de aplicaciones del lado servidor y del cliente escrita en .NET.
- Renderizar la interfaz como HTML y CSS para soportar numerosos navegadores, incluidos navegadores móviles.
Blazor es un framework web diseñado para ejecutarse en el lado del cliente en un navegador en un entorno de ejecución .NET basado en WebAssembly (Blazor WebAssembly) o en el lado servidor en ASP.NET Core (servidor Blazor). Para cualquier modelo gestionado, los modelos de aplicación y componentes son iguales.
Servidores Blazor
Utiliza el modelo de alojamiento de servidores Blazor para ejecutar aplicaciones en el servidor desde ASP.NET aplicaciones Core.Las actualizaciones de la interfaz, la gestión de eventos y las llamadas a JavaScript se realizan a través deSignalRConexiones con el proceso。
El modelo de alojamiento de servidores Blazor ofrece los siguientes beneficios:
- El tamaño de la descarga es significativamente menor que el de la app Blazor WebAssembly, y la app carga mucho más rápido.
- Las aplicaciones pueden aprovechar al máximo las capacidades del servidor, incluyendo el uso de cualquier API compatible con .NET Core.
- .NET Core en el servidor se usa para ejecutar la aplicación, así que las herramientas .NET existentes como la depuración funcionan como se espera.
- Los clientes ligeros están soportados. Por ejemplo, la aplicación servidor Blazor es adecuada para navegadores que no soportan WebAssembly y para dispositivos con recursos limitados.
- La base de código .NET/C# de la app, que incluye el código de componentes de la app, no funciona en el cliente.
El alojamiento de servidores en Blazor presenta las siguientes desventajas:
La latencia suele ser mayor. Cada interacción del usuario implica un salto de red.
No se permite trabajar sin conexión. Si la conexión al cliente falla, la app deja de funcionar.
Si tienes varios usuarios, hay desafíos en la escalabilidad de la aplicación. El servidor debe gestionar múltiples conexiones de cliente y gestionar el estado del cliente.
ASP.NET Servidores Core deben servir la aplicación. Los escenarios de despliegue serverless no son factibles (por ejemplo, servir aplicaciones a través de una CDN).
Comienzan los tutoriales:
1. Primero, crea un nuevo proyecto de Blazor App usando vs2019, como se muestra a continuación:
2. Crear un nuevo componente de Razor con el siguiente código:
Necesitamos el paquete SkiaSharp para generar el captcha base64 e instalarlo vía nuget:
3. Inicia el proyecto, visita:El inicio de sesión del hipervínculo es visible.
El código html generado se ve así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta nombre="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp1</title>
<base href="/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<!--Blazor:{"sequence":0,"type":"server,"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5","descriptor": "CfDJ8G8mpuBWCflCst2FMatPfBxQE\u002Br1dzwAAKPTr0QFhEikdvN38F\u002BP7DcVOKo\u002BPF9p1ZAgdir\u002BYdhFqRpzbwsqEap4xG3gpcMVtLX2yGCGhOnh596O6KcFICrjAZGk82Q2lVu\ u002B94jRo6qJ9JgxrjzuAOxLvrXBlFoGwTssxsHOI2qoQHGwlv\u002BA\u002BGsyaTjfxZ8DAgqAuiwaHynCg0J18d/VUh8brr9FrMe91kKCVw0OLUVRjCXK0FXGvXPYKjEIuE9FY5w3EvO17tJJ/ 9LpOKmqEeYpk6FlOPeuviBB1LhHBrzycchpZAb8eNGY51tN5Gjcqf/uNOMHZYLXoxjj6bmug/62JJvaQ62OrFNqIJw6S730"}-->
<div class="sidebar">
<div class="top-row pl-4 navbar navbar-dark">
<a class="navbar-brand" href>BlazorApp1</a>
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse">
<ul class="nav flex-column">
<li class="nav-item px-3">
<a href="" class="nav-link">
<span class="oi oi-home" aria-hidden="true"></span> Home
</a>
</li>
<li class="nav-item px-3">
<a href="contador" clase="nav-link">
<span class="oi oi-plus" aria-hidden="true"></span> Contador
</a>
</li>
<li class="nav-item px-3">
<a href="fetchdata" class="nav-link">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</a>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="fila superior px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">Acerca</a> de
</div>
<div class="content px-4">
<h3>Verificación</h3>
<p>
(Blazor) Un ejemplo de cómo mostrar el código de verificación y verificarlo.
</p>
<img style="border:solid 1px #ccc" src="data:image/jpeg;base64,...." />
<button>Renovar</button>
<hr>
<div>Escribe el número en la imagen</div>
<form>
<input type="text" style="addding:5px" />
<button>Comprobado</button>
</form>
<hr>
<button>TestClick</button>
</div>
</div>
<!--Blazor:{"prerenderId":"19210eabb9054fe79ea7cc3e6f501df5"}-->
</app>
<div id="blazor-error-ui">
Ha ocurrido una excepción no gestionada. Consulta las herramientas de desarrollo del navegador para más detalles.
<a href="" class="reload">Reload</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
Prueba a hacer clic en el botón, el evento que activa el botón se comunica a través de SignalR, que se basa en websocket, sondeo, etc., como se muestra en la figura siguiente:
Enlaces de referencia:
El inicio de sesión del hipervínculo es visible.
|
Publicado en 7/4/2020 11:15:36
|
|
|
|
Propietario|
Publicado en 7/4/2020 11:45:47
|
Publicado en 15/11/2022 10:51:42
|
