1) Aspcore303 PDF

Introducción a ASP.
NET Core
Blazor
Introducción a
ASP.NET Core
Blazor
Diciembre de 2019
Soporte técnico:
soporte@mail.ticapacitacion.com
Autor
Miguel Muñoz Serafín
https://mvp.microsoft.com/es-es/publicprofile/21053
Este manual fue creado por TI Capacitación para uso personal de:
Jimmy Eliecer Romero Montero

Jerm.pcd@gmail.com
1 https://ticapacitacion.com/curso/aspcore3
Introducción a ASP.NET Core
Blazor
Contenido
Blazor ......................................................................................................................................... 3
Objetivos.................................................................................................................................... 3
Audiencia ................................................................................................................................... 3
Requisitos .................................................................................................................................. 4
¿Qué es Blazor?.......................................................................................................................... 5
Blazor WebAssembly .................................................................................................................. 6
Blazor Server .............................................................................................................................. 8
Plataformas soportadas.............................................................................................................. 9
Iniciando con ASP.NET Core Blazor ............................................................................................10
Instalar el SDK de .NET Core 3.1 .............................................................................................10
Crear un Proyecto Blazor Server App .....................................................................................11
Agregar un componente dentro de otro componente ...........................................................15
Trabajar con parámetros de un componente .........................................................................16
Inyección de dependencias....................................................................................................18
Desarrollando tu primera aplicación Blazor ...............................................................................21
Agregar un modelo de datos .................................................................................................23
Construir la interfaz de usuario..............................................................................................24
Agregar un manejador de eventos .........................................................................................26
Establecer enlace de datos ....................................................................................................27
Jimmy Eliecer Romero Montero (Jerm.pcd@gmail.com)
Blazor
Blazor
Blazor es un framework que nos permite construir interfaces de usuario web interactivas del lado del
cliente.
Blazor presenta una alternativa para utilizar C# en lugar de JavaScript para ejecutar código en el
navegador web sobre un entorno de ejecución .NET.
Una aplicación Blazor puede ser hospedada completamente en un navegador web o en un servidor
web a través de una aplicación ASP.NET Core.
Esta lección presenta una introducción a Blazor y constituye el punto de partida para empezar a
desarrollar aplicaciones web con interfaz de usuario utilizando ASP.NET Core Blazor.
En esta lección se describe la funcionalidad de la plantilla Blazor Server App y se proporcionan los
pasos para desarrollar una aplicación básica utilizando ASP.NET Core Blazor.
El contenido de esta lección está basado en la documentación oficial de ASP.NET Core disponible en el
siguiente enlace:
https://docs.microsoft.com/aspnet/core
Para reforzar los conocimientos y como apoyo, al final de cada ejercicio se podrá encontrar un enlace
a un video explicativo que podrá ser visto en línea desde cualquier navegador web compatible con
HTML5.
Objetivos
Al finalizar esta lección, los participantes contarán con las habilidades y conocimientos para:
• Describir qué es Blazor.

• Describir la diferencia entre Blazor WebAssembly y Blazor Server.
• Describir las plataformas soportadas por Blazor.
• Describir la funcionalidad proporcionada por la plantilla Blazor Server App.
• Crear una aplicación sencilla con ASP.NET Core Blazor.
Audiencia
Esta lección está dirigida a desarrolladores web con experiencia en C# que deseen conocer qué es
ASP.NET Core Blazor.
Blazor
Requisitos
Para realizar los ejercicios de esta lección se requiere de un entorno de desarrollo con:
• Visual Studio 2019 versión 16.4 o posteriores con la carga de trabajo “ASP.NET and web
development”.
• NET Core SDK 3.1.
Introducción de la lección
https://ticapacitacion.com/content/aspcore3/10/30/0
Blazor
¿Qué es Blazor?
Blazor es un framework para construir interfaces de usuario web interactivas del lado del cliente con
NET. Con Blazor podemos:
• Crear interfaces de usuario ricas e interactivas con C# en lugar de JavaScript.

• Compartir la lógica de la aplicación del lado cliente y del lado del servidor escrita con .NET.
• Renderizar la interfaz de usuario como HTML y CSS para compatibilidad con una amplia gama
de navegadores web incluyendo los navegadores de dispositivos móviles.
Utilizar .NET para el desarrollo web del lado del cliente nos ofrece las siguientes ventajas:
• Escribir código en C# en lugar de JavaScript.

• Aprovechar el ecosistema existente de bibliotecas .NET.
• Compartir la lógica de la aplicación entre el servidor y el cliente.
• Beneficios de rendimiento, confiabilidad y seguridad de .NET.
• Mantener la productividad con Visual Studio en Windows, Linux y macOS.
• Compilar sobre un conjunto común de lenguajes, frameworks y herramientas que son
estables, con una gama amplia de características y fáciles de usar.
Componentes
Las aplicaciones Blazor están basadas en componentes. Un componente en Blazor es un elemento de
interfaz de usuario tal como una página, un cuadro dialogo o un formulario para entrada de datos.
Los componentes son clases .NET compiladas en ensamblados .NET que:
• Definen lógica de renderización de una interfaz de usuario flexible.

• Manejan los eventos del usuario.
• Pueden se anidados y reutilizados.
• Pueden ser compartidos y distribuidos como bibliotecas de clases de Razor o paquetes de
NuGet.
La clase del componente es escrita normalmente en forma de una página de marcado Razor con una
extensión de archivo .razor. Los componentes Blazor se denominan formalmente como componentes
Razor.
Blazor es un framework web diseñado para ejecutarse del lado del cliente en el navegador web en un
entorno de tiempo de ejecución .NET basado en WebAssembly (Blazor WebAssembly) o en el lado del
servidor en ASP.NET Core (Blazor Server). Independientemente del modelo de hospedaje, los modelos
de aplicación y de componente son los mismos.
Blazor
Blazor WebAssembly
Al momento de elaborar este contenido, Blazor WebAssembly se encuentra disponible como una
versión preliminar.
Blazor WebAssembly es un framework Single Page Application para crear aplicaciones web interactivas
del lado cliente con .NET. Blazor WebAssembly utiliza estándares web abiertos sin complementos
(plugins) ni transpilación de código y funciona en todos los navegadores web modernos, incluidos los
navegadores para dispositivos móviles.
La ejecución de código .NET dentro de navegadores web se consigue mediante WebAssembly

(abreviado como wasm). WebAssembly es un formato de código de bytes (bytecode) compacto
optimizado para descargas rápidas y una velocidad de ejecución máxima. WebAssembly es un estándar
web abierto y soportado en navegadores web sin necesidad de instalar complementos.
El código WebAssembly puede acceder a toda la funcionalidad del navegador web mediante JavaScript
a través de la API JavaScript interoperability (o JavaScript interop). El código .NET que se ejecuta a
través de WebAssembly en el navegador se ejecuta en el espacio aislado (sandbox) de JavaScript del
navegador web con las protecciones que proporciona dicho espacio aislado contra acciones
malintencionadas en la máquina cliente.
La siguiente imagen representa la ejecución de una aplicación Blazor WebAssembly en el navegador

web.
Blazor
Cuando una aplicación Blazor WebAssembly es compilada y ejecutada en el navegador web:
• Los archivos de código C# y los archivos Razor son compilados en ensamblados .NET.
• Los ensamblados y el entorno de ejecución de .NET son descargados en el explorador web.
• Blazor WebAssembly lanza el entorno de ejecución de .NET y lo configura para cargar los
ensamblados de la aplicación. El entorno de ejecución de Blazor WebAssembly utiliza Java
Script Interop para manejar la manipulación del DOM y las llamadas a la API del navegador
web.
El tamaño de la aplicación publicada es un factor de rendimiento crítico para la usabilidad de una

aplicación. Una aplicación grande tarda un tiempo relativamente largo en descargarse en un navegador
web, lo que repercute en la experiencia del usuario. Blazor WebAssembly optimiza el tamaño de la
aplicación para reducir los tiempos de descarga de la siguiente manera:
• El código no utilizado es quitado de la aplicación cuando esta se publica mediante el enlazador

de lenguaje intermedio (Intermediate Language Linker).
• Las respuestas HTTP son comprimidas.
• El entorno de ejecución .NET y los ensamblados son almacenan en caché en el explorador.
Para obtener más información sobre WebAssembly, se puede consultar el siguiente

enlace:
Sitio oficial de WebAssembly

https://webassembly.org/
Blazor
Blazor Server
Blazor Server proporciona el soporte para hospedar componentes Razor en el servidor mediante una
aplicación ASP.NET Core. Las actualizaciones de la interfaz de usuario son manejadas a través de una
conexión SignalR.
El entorno de ejecución maneja el envío de eventos de la interfaz de usuario desde el navegador web
hacia el servidor. El entorno de ejecución también aplica las actualizaciones a la interfaz de usuario
que son enviadas como respuesta del servidor hacia el navegador web después de ejecutar los
componentes.
La conexión utilizada por Blazor Server para comunicarse con el navegador web también es utilizada
para manejar las llamadas de JavaScript interop. La siguiente imagen muestra el flujo de ejecución en
una aplicación Blazor Server.
Blazor
Plataformas soportadas
Las siguiente tabla muestra las plataformas soportadas por Blazor WebAssembly.
Navegador Versión
Microsoft Edge Actual
Mozilla Firefox Actual
Google Chrome, incluyendo Android Actual
Safari, incluyendo iOS Actual
Microsoft Internet Explorer No soportado ya que no soporta WebAssembly
La siguiente tabla muestra las plataformas soportadas por Blazor Server.
Navegador Versión
Microsoft Edge Actual
Mozilla Firefox Actual
Google Chrome, incluyendo Android Actual
Safari, incluyendo iOS Actual
Microsoft Internet Explorer 11. Con componentes adicionales como
Polyfill.io que le proporciona la característica
Promises.
Blazor
Iniciando con ASP.NET Core Blazor

Ahora es momento de iniciar nuestro aprendizaje sobre Blazor. Debido a que al momento de crear
este contenido Blazor WebAssembly aún se encuentra en una versión preliminar, exploraremos el
desarrollo de aplicaciones Blazor con Blazor Server.
Instalar el SDK de .NET Core 3.1

Blazor Server es soportado a partir de la versión ASP.NET Core 3.0. Blazor WebAssembly se encuentra
en versión preliminar para ASP.NET Core 3.1.
Realiza los siguientes pasos para instalar el SDK de .NET Core 3.1.
1. Instala el SDK de .NET Core 3.1 desde el siguiente enlace:
https://dotnet.microsoft.com/download/dotnet-core/3.1
2. Una vez que haya finalizado la instalación, abre una ventana de línea de comandos y ejecuta
el siguiente comando para verificar la versión del SDK de .NET Core instalada en tu equipo de
desarrollo:
dotnet –version
Se deberá mostrar una pantalla similar a la siguiente.
3. Opcionalmente, si deseas practicar con Blazor WebAssembly, puedes ejecutar el siguiente

comando para instalar la plantilla de proyecto Blazor WebAssembly para Visual Studio.
dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2
Iniciando con ASP.NET Core Blazor - Instalar el SDK de .NET Core 3.1
Blazor
Crear un Proyecto Blazor Server App

1. Abre Visual Studio bajo el contexto de administrador.
2. En la ventana de inicio, selecciona la opción Create a new project.
3. En la ventana Create a new project, selecciona la plantilla Blazor App y haz clic en el botón
Next para continuar.
4. En la ventana Configure your new project proporciona el nombre, ubicación del proyecto y
haz clic en el botón Create para continuar.
Blazor
En la ventana Create a new Blazor app te será mostrada la plantilla Blazor Server App y en
caso de que hayas instalado la plantilla Blazor WebAssembly, esta también será mostrada.
5. Selecciona la plantilla Blazor Server App y haz clic en el botón Create para continuar.
Al finalizar la creación del proyecto se mostrará una estructura similar a la siguiente.
6. Presiona F5 para ejecutar la aplicación. Te será mostrada una página similar a la siguiente.
Blazor
7. Selecciona la opción Counter.
8. En la página Counter, haz clic en el botón Click me para incrementar el contador. Podrás notar
que no habrá una actualización de toda la página, únicamente el contador será actualizado.
Normalmente, en una página web, para incrementar el valor del contador es necesario utilizar
código JavaScript, sin embargo, con Blazor, podemos utilizar C#.
9. Regresa a Visual Studio y detén la ejecución.
10. Abre el archivo Pages/Counter.razor.
11. Examina el siguiente contenido.
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
Blazor
La interfaz de usuario del componente Counter es definida utilizando HTML. La lógica de

renderización dinámica (por ejemplo, ciclos, condiciones, expresiones, etc.) es agregada
utilizando una sintaxis C# incrustada llamada Razor. El marcado HTML y la lógica de
renderización C# son convertidos a una clase componente en tiempo de compilación. El
nombre de la clase .NET generada es el mismo que el nombre del archivo.
12. Examina el siguiente código.
@code {
private int currentCount = 0;
private void IncrementCount()

{
currentCount++;
}
}
Los miembros de la clase componente son definidos en un bloque @code. En el bloque @code,
el estado del componente (propiedades, campos) y métodos son especificados para manejo
de eventos o para definir alguna otra lógica de renderización del componente.
13. Observa la directiva @page al inicio del archivo.
Una petición de /counter en el navegador causa que el componente Counter renderice su

contenido. Los componentes renderizan su contenido en una representación en memoria del
Blazor
árbol de renderizado que después puede ser utilizado para actualizar la interfaz de usuario de
una forma flexible y eficiente.
La directiva @page especifica que el componente Counter es un punto final de enrutamiento

(routing endpoint). El componente Counter maneja las peticiones enviadas a /counter. Sin la
directiva @page un componente no manejaría las peticiones enrutadas pero el componente
podría seguir siendo utilizado por otros componentes.
14. Observa el siguiente código.
Cada vez que el botón Click me es seleccionado:
• El evento onclick es disparado.

• El manejador del evento onclick registrado (IncrementCount) es invocado.
• La variable currentCount es incrementada.
• El componente Counter regenera su árbol de renderizado.
• El entorno de ejecución compara el nuevo árbol de renderizado con el anterior.
• El entorno de ejecución aplica al DOM (Document Object Model) únicamente el
contenido que haya cambiado.
• El contador mostrado es actualizado.
Iniciando con ASP.NET Core Blazor - Crear un Proyecto Blazor Server App
Agregar un componente dentro de otro componente

Podemos agregar un componente dentro de otro componente utilizando la sintaxis HTML.
1. Abre el archivo Pages/Index.razor.
Blazor
2. Agrega el siguiente código al final del archivo.
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter/>
3. Ejecuta la aplicación. Podrás notar que ahora la página de inicio tiene su propio contador
proporcionado por el componente Counter.
4. Haz clic en el botón Click me y verifica que el contador es incrementado.
Iniciando con ASP.NET Core Blazor - Agregar un componente dentro de otro

componente
Trabajar con parámetros de un componente

Los componentes también pueden tener parámetros que nos permiten establecer los valores de
propiedades del componente hijo. Los parámetros de un componente son definidos utilizando
propiedades públicas con el atributo [Parameter]. Al utilizar un componente, especificamos el valor
de los parámetros a través de atributos o contenidos hijo.
Veamos como agregar parámetros al componente Counter.

Blazor
1. Abre el archivo Pages/Counter.razor.
2. Agrega el siguiente código para definir la propiedad IncrementAmount con un atributo

[Parameter].
@code {
private int currentCount = 0;
[Parameter]
public int IncrementAmount { get; set; } = 1;
3. Modifica el método IncrementCount para utilizar IncrementAmount al incrementar el valor de

currentCount.
private void IncrementCount()

{
currentCount += IncrementAmount;
}
4. Abre el archivo Pages/Index.razor.
5. Agrega un atributo a la declaración del componente Counter para especificar el valor de la

propiedad IncrementAmount.
<Counter IncrementAmount="10"/>
6. Ejecuta la aplicación.
7. Haz clic en el botón Click me y verifica que ahora el contador se incrementa de 10 en 10.
8. Haz clic en la opción Counter.
9. Haz clic en el botón Click me y verifica que el contador se incremente de 1 en 1.
Blazor
Iniciando con ASP.NET Core Blazor - Trabajar con parámetros de un componente

Inyección de dependencias
Cuando trabajamos con la plantilla de proyecto Blazor Server App, el servicio WeatherForecastService
es registrado como un servicio Singleton y una instancia de este es disponible en toda la aplicación a
través de inyección de dependencias.
1. Abre el archivo Startup.cs.
2. Examina el código del método ConfigureServices. Podrás ver el registro del servicio
WeatherForecastService.
public void ConfigureServices(IServiceCollection services)

{
services.AddRazorPages();
services.AddServerSideBlazor();
services.AddSingleton<WeatherForecastService>();
}
3. Abre el archivo Pages/FetchData.razor.
4. Examina el código del componente FetchData. La directiva @inject es utilizada para inyectar
la instancia del servicio WeatherForecastService en el componente FetchData.
Blazor
El componente FetchData utiliza el servicio inyectado como ForecastService para recuperar un

arreglo de objetos WeatherForecast.
Puedes notar que un ciclo @foreach es utilizado para renderizar cada instancia forecast como
un renglón en la tabla de datos de clima.
8. Haz clic en la opción Fetch Data. Podrás notar que los datos del clima son mostrados.
Blazor
Hemos terminado el breve recorrido introductorio para iniciar con ASP.NET Core Blazor. Si lo deseas,
puedes realizar el recorrido utilizando la plantilla Blazor WebAssembly App y ver las diferencias. Por
ejemplo, el uso del servicio HttpClient para acceder a los datos del clima expuestos en un archivo JSON.
Iniciando con ASP.NET Core Blazor - Inyección de dependencias

Blazor
Desarrollando tu primera aplicación Blazor

Para ejemplificar la forma de crear y modificar una aplicación Blazor, crearemos una aplicación que
nos permita administrar una lista de tareas pendientes por realizar.
1. Crea una nueva aplicación Blazor Server llamada ToDoList. La estructura de la aplicación será
similar a la siguiente.
2. Utiliza la plantilla Razor Component para agregar un nuevo componente llamado Todo.razor
dentro de la carpeta Pages.
La carpeta Pages mostrará el nuevo componente agregado.
Blazor
3. Modifica el código del componente Todo para proporcionar el marcado inicial del
componente.
4. Abre el archivo Shared/NavMenu.razor. El componente NavMenu es utilizado en el diseño

(Layout) de la aplicación. Los Layouts son componentes que nos permiten evitar la duplicación
de contenido en la aplicación.
5. Agrega el siguiente código al final de la lista de elementos existentes para definir un enlace de
navegación hacia el componente Todo.
<li class="nav-item px-3">

<NavLink class="nav-link" href="todo">
<span class="oi oi-list" aria-hidden="true"></span> Todo
</NavLink>
</li>
</ul>
</div>
6. Ejecuta la aplicación. Podrás notar que el enlace al componente Todo es mostrado.
Blazor
7. Haz clic en el enlace Todo para confirmar que el componente Todo se muestre correctamente.
Desarrollando tu primera aplicación Blazor

Agregar un modelo de datos

1. Agrega una nueva carpeta llamada Models en la raíz del proyecto.
Blazor
2. Agrega un archivo de clase llamado TodoItem.cs dentro de la carpeta Models. La clase

TodoItem representará una tarea por realizar.
3. Modifica la clase TodoItem para agregar dos propiedades.
public class TodoItem

{
public string Title { get; set; }
public bool IsDone { get; set; }
}
Desarrollando tu primera aplicación Blazor - Agregar un modelo de datos

Construir la interfaz de usuario

1. Abre el archivo Pages/Todo.razor.
2. Agrega el siguiente código en el bloque @code para declarar un campo que nos permitirá
mantener el estado de la lista de tareas por hacer.
@code {
private List<TodoItem> ToDos = new List<TodoItem>();
}
Blazor
3. Agrega el siguiente código para importar el espacio de nombres de la clase TodoItem.
@page "/todo"
@using ToDoList.Models
<h1>Todo</h1>
4. Agrega el siguiente código para declarar una lista no ordenada de elementos debajo de la
etiqueta <h1>.
<h1>Todo</h1>
<ul>
</ul>
5. Dentro de las etiquetas <ul> </ul> agrega el siguiente código para definir un ciclo foreach que
permita renderizar cada elemento de la lista de tareas por realizar como un elemento <li>.
<ul>
@foreach(var ToDo in ToDos)
{
<li>@ToDo.Title</li>
}
</ul>
La aplicación requiere elementos de interfaz de usuario para poder agregar elementos a la lista
de tareas pendientes de realizar.
6. Agrega el siguiente código después de la etiqueta </ul> para declarar un elemento <input> y
un elemento <button>.
<input type="text" placeholder="Something to do"/>

<button>Add to do</button>
7. Ejecuta la aplicación y navega a la página ToDo.
Blazor
Si haces clic en el botón Add to do notarás que nada sucede debido a que no ha sido asociado
un manejador de evento al botón.
Desarrollando tu primera aplicación Blazor - Construir la interfaz de usuario

Agregar un manejador de eventos

1. Agrega el siguiente código en el bloque @code para definir un método que sea invocado
cuando el usuario haga clic en el botón Add to do.
private void AddToDo()

{
2. Modifica la definición del elemento <button> para asociar el evento onclick con el método
AddToDo.
<button @onclick="AddToDo">Add to do</button>
Cuando el usuario haga clic en el botón, el código del método AddToDo será ejecutado.
3. Agrega el siguiente código en el bloque @code para declarar un campo que permita almacenar
el titulo de una tarea por hacer.
private string NewToDo;
4. Modifica el código del elemento <input> para enlazar su valor a la variable NewToDo. El
atributo bind permite realizar el enlace.
<input type="text" placeholder="Something to do" @bind="NewToDo"/>
5. Actualiza el código del método AddToDo para agregar a la lista un elemento TodoItem con el
título especificado y limpiar nuevamente el elemento <input> asignando una cadena vacía a la
variable NewToDo.
private void AddToDo()

{
if(!string.IsNullOrWhiteSpace(NewToDo))
{
ToDos.Add(new TodoItem { Title = NewToDo });
NewToDo = string.Empty;
}
}
Blazor
6. Ejecuta la aplicación y agrega algunos elementos a la lista de tareas por realizar para probar el
nuevo código. La página será similar a la siguiente después de agregar un par de tareas.
Desarrollando tu primera aplicación Blazor - Agregar un manejador de eventos

Establecer enlace de datos

Para mejorar la aplicación, podemos hacer que el texto del título sea editable y también podemos
agregar un CheckBox para indicar cuando una tarea ya se haya realizado.
1. Agrega un elemento <input> y enlaza su valor a la propiedad IsDone.
<li>
<input type="checkbox" @bind="ToDo.IsDone"/>
@ToDo.Title
</li>
2. Cambia el código @ToDo.Title por un elemento <input> y enlaza su valor a la propiedad Title.
<li>
<input type="checkbox" @bind="ToDo.IsDone"/>
<input type="text" @bind="ToDo.Title"/>
</li>
3. Actualiza el código de la etiqueta <h1> para mostrar un contador del número de elementos de
la lista que no han sido realizados (IsDone = false) y con esto verificar que los valores están
enlazados.
<h1>Todo (@ToDos.Count(todo=> !todo.IsDone))</h1>
Blazor
5. Agrega unos 5 elementos a la lista. La página se verá similar a la siguiente.
6. Modifica el titulo de alguno de los elementos.
7. Marca alguna tarea como realizada y observa que el contador es actualizado.
Con este ejercicio hemos desarrollado una aplicación sencilla con Blazor Server. Puedes intentar
realizar el ejercicio utilizando la plantilla Blazor WebAssembly App y comparar las diferencias.
El contenido de esta lección es tan solo una introducción, pero proporciona las bases para iniciar en el
mundo de desarrollo con Blazor.
Blazor
Desarrollando tu primera aplicación Blazor - Establecer enlace de datos


1) Aspcore303 PDF

Загружено:

Сведения о документе

Исходное описание:

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

1) Aspcore303 PDF

Загружено:

Авторское право:

Доступные форматы

Introducción a ASP.

Jimmy Eliecer Romero Montero

• Describir qué es Blazor.

• Crear interfaces de usuario ricas e interactivas con C# en lugar de JavaScript.

• Escribir código en C# en lugar de JavaScript.

Los componentes son clases .NET compiladas en ensamblados .NET que:

• Definen lógica de renderización de una interfaz de usuario flexible.

La ejecución de código .NET dentro de navegadores web se consigue mediante WebAssembly

La siguiente imagen representa la ejecución de una aplicación Blazor WebAssembly en el navegador

Cuando una aplicación Blazor WebAssembly es compilada y ejecutada en el navegador web:

El tamaño de la aplicación publicada es un factor de rendimiento crítico para la usabilidad de una

• El código no utilizado es quitado de la aplicación cuando esta se publica mediante el enlazador

Para obtener más información sobre WebAssembly, se puede consultar el siguiente

Sitio oficial de WebAssembly

La siguiente tabla muestra las plataformas soportadas por Blazor Server.

Iniciando con ASP.NET Core Blazor

Instalar el SDK de .NET Core 3.1

1. Instala el SDK de .NET Core 3.1 desde el siguiente enlace:

Se deberá mostrar una pantalla similar a la siguiente.

3. Opcionalmente, si deseas practicar con Blazor WebAssembly, puedes ejecutar el siguiente

dotnet new -i Microsoft.AspNetCore.Blazor.Templates::3.1.0-preview4.19579.2

Crear un Proyecto Blazor Server App

2. En la ventana de inicio, selecciona la opción Create a new project.

Al finalizar la creación del proyecto se mostrará una estructura similar a la siguiente.

7. Selecciona la opción Counter.

9. Regresa a Visual Studio y detén la ejecución.

10. Abre el archivo Pages/Counter.razor.

11. Examina el siguiente contenido.

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

La interfaz de usuario del componente Counter es definida utilizando HTML. La lógica de

12. Examina el siguiente código.

private void IncrementCount()

13. Observa la directiva @page al inicio del archivo.

Una petición de /counter en el navegador causa que el componente Counter renderice su

La directiva @page especifica que el componente Counter es un punto final de enrutamiento

14. Observa el siguiente código.

Cada vez que el botón Click me es seleccionado:

• El evento onclick es disparado.

Agregar un componente dentro de otro componente

1. Abre el archivo Pages/Index.razor.

2. Agrega el siguiente código al final del archivo.

Welcome to your new app.

4. Haz clic en el botón Click me y verifica que el contador es incrementado.

5. Regresa a Visual Studio y detén la ejecución.

Iniciando con ASP.NET Core Blazor - Agregar un componente dentro de otro

Trabajar con parámetros de un componente

Veamos como agregar parámetros al componente Counter.

1. Abre el archivo Pages/Counter.razor.

2. Agrega el siguiente código para definir la propiedad IncrementAmount con un atributo

3. Modifica el método IncrementCount para utilizar IncrementAmount al incrementar el valor de

private void IncrementCount()

4. Abre el archivo Pages/Index.razor.

5. Agrega un atributo a la declaración del componente Counter para especificar el valor de la

8. Haz clic en la opción Counter.

9. Haz clic en el botón Click me y verifica que el contador se incremente de 1 en 1.

Iniciando con ASP.NET Core Blazor - Trabajar con parámetros de un componente

1. Abre el archivo Startup.cs.

public void ConfigureServices(IServiceCollection services)

3. Abre el archivo Pages/FetchData.razor.

5. Examina el siguiente código.

El componente FetchData utiliza el servicio inyectado como ForecastService para recuperar un