El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Blazor

Siguiente ►
►

Blazor es un framework de desarrollo web de Microsoft que permite crear aplicaciones web interactivas del lado del cliente utilizando C# en lugar de JavaScript. Blazor se basa en la tecnología de WebAssembly para ejecutar código .NET en el navegador, lo que permite a los desarrolladores utilizar sus habilidades en C# y .NET para crear aplicaciones web modernas.

Contenido

  1. Introducción a Blazor
  2. Configuración del Entorno de Desarrollo
  3. Estructura de una Aplicación Blazor
  4. Componentes en Blazor
  5. Enlace de Datos (Data Binding)
  6. Manejo de Eventos
  7. Ruteo en Blazor
  8. Interoperabilidad con JavaScript
  9. Ejercicio Práctico
  10. Conclusión

Introducción a Blazor

Blazor permite a los desarrolladores crear aplicaciones web interactivas utilizando C# en lugar de JavaScript. Existen dos modelos principales de Blazor:

  • Blazor Server: La lógica de la aplicación se ejecuta en el servidor, y las actualizaciones de la interfaz de usuario se envían al cliente a través de una conexión SignalR.
  • Blazor WebAssembly: La aplicación se ejecuta completamente en el navegador utilizando WebAssembly.

Ventajas de Blazor

  • Reutilización de Código: Permite reutilizar el código .NET en el cliente y el servidor.
  • Desarrollo Unificado: Los desarrolladores pueden utilizar un solo lenguaje (C#) para el desarrollo de aplicaciones web.
  • Interoperabilidad: Blazor permite la interoperabilidad con JavaScript, lo que facilita la integración con bibliotecas y frameworks existentes.

Configuración del Entorno de Desarrollo

Para comenzar a desarrollar con Blazor, necesitas tener instalado:

  • Visual Studio 2019 o superior (con la carga de trabajo de desarrollo web y .NET Core).
  • .NET Core SDK 3.1 o superior.

Creación de un Proyecto Blazor

  1. Abre Visual Studio y selecciona Crear un nuevo proyecto.
  2. Selecciona Aplicación Blazor y haz clic en Siguiente.
  3. Configura el nombre del proyecto y la ubicación, luego haz clic en Crear.
  4. Selecciona el tipo de proyecto Blazor (Blazor Server o Blazor WebAssembly) y haz clic en Crear.

Estructura de una Aplicación Blazor

Una aplicación Blazor típica tiene la siguiente estructura:

MyBlazorApp/
│
├── Pages/
│   ├── Index.razor
│   ├── Counter.razor
│   └── FetchData.razor
│
├── Shared/
│   ├── MainLayout.razor
│   └── NavMenu.razor
│
├── wwwroot/
│   ├── css/
│   ├── js/
│   └── index.html
│
├── _Imports.razor
├── App.razor
├── Program.cs
└── Startup.cs
  • Pages: Contiene los componentes de página.
  • Shared: Contiene componentes compartidos, como el diseño y el menú de navegación.
  • wwwroot: Contiene archivos estáticos como CSS y JavaScript.
  • _Imports.razor: Define los espacios de nombres que se importan en todos los componentes.
  • App.razor: Configura el enrutamiento de la aplicación.
  • Program.cs y Startup.cs: Configuran y arrancan la aplicación.

Componentes en Blazor

Los componentes son la unidad básica de una aplicación Blazor. Un componente es una combinación de HTML y C# que se puede reutilizar en diferentes partes de la aplicación.

Ejemplo de Componente

@page "/counter"

<h3>Contador</h3>

<p>Contador actual: @currentCount</p>

<button @onclick="IncrementCount">Incrementar</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Explicación

  • @page "/counter": Define la ruta del componente.
  • @code { ... }: Contiene la lógica del componente en C#.
  • @onclick="IncrementCount": Vincula el evento de clic del botón al método IncrementCount.

Enlace de Datos (Data Binding)

Blazor soporta el enlace de datos unidireccional y bidireccional.

Enlace Unidireccional

<p>Nombre: @name</p>

@code {
    private string name = "John Doe";
}

Enlace Bidireccional

<input @bind="name" />

<p>Nombre: @name</p>

@code {
    private string name = "John Doe";
}

Manejo de Eventos

Blazor permite manejar eventos del DOM utilizando C#.

Ejemplo de Manejo de Eventos

<button @onclick="ShowMessage">Mostrar Mensaje</button>

@code {
    private void ShowMessage()
    {
        Console.WriteLine("¡Botón clicado!");
    }
}

Ruteo en Blazor

Blazor utiliza el componente Router para manejar la navegación entre componentes.

Configuración del Enrutamiento

@page "/"

<Router AppAssembly="@typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
    </Found>
    <NotFound>
        <p>Lo sentimos, no encontramos esa página.</p>
    </NotFound>
</Router>

Interoperabilidad con JavaScript

Blazor permite llamar a funciones JavaScript desde C# y viceversa.

Llamar a JavaScript desde C#

<button @onclick="CallJavaScript">Llamar a JavaScript</button>

@code {
    [Inject]
    private IJSRuntime JS { get; set; }

    private async Task CallJavaScript()
    {
        await JS.InvokeVoidAsync("alert", "¡Hola desde C#!");
    }
}

Llamar a C# desde JavaScript

// wwwroot/js/site.js
function callDotNetMethod() {
    DotNet.invokeMethodAsync('MyBlazorApp', 'ShowMessageFromJS');
}
// Program.cs
public static async Task ShowMessageFromJS()
{
    Console.WriteLine("¡Hola desde JavaScript!");
}

Ejercicio Práctico

Objetivo

Crear una aplicación Blazor que permita a los usuarios agregar y listar tareas.

Pasos

  1. Crear un nuevo proyecto Blazor.
  2. Agregar un componente para listar tareas.
  3. Agregar un componente para agregar nuevas tareas.
  4. Implementar el enlace de datos y el manejo de eventos.

Solución

Componente TaskList.razor

@page "/tasks"

<h3>Lista de Tareas</h3>

<ul>
    @foreach (var task in tasks)
    {
        <li>@task</li>
    }
</ul>

@code {
    private List<string> tasks = new List<string> { "Tarea 1", "Tarea 2" };
}

Componente AddTask.razor

@page "/add-task"

<h3>Agregar Tarea</h3>

<input @bind="newTask" placeholder="Nueva tarea" />
<button @onclick="AddTask">Agregar</button>

@code {
    private string newTask;

    private void AddTask()
    {
        if (!string.IsNullOrEmpty(newTask))
        {
            tasks.Add(newTask);
            newTask = string.Empty;
        }
    }

    private List<string> tasks = new List<string> { "Tarea 1", "Tarea 2" };
}

Conclusión

En esta sección, hemos explorado los conceptos básicos de Blazor, incluyendo la configuración del entorno de desarrollo, la estructura de una aplicación Blazor, la creación de componentes, el enlace de datos, el manejo de eventos, el enrutamiento y la interoperabilidad con JavaScript. Además, hemos implementado un ejercicio práctico para reforzar los conceptos aprendidos.

Blazor es una poderosa herramienta para los desarrolladores de .NET que desean crear aplicaciones web modernas utilizando sus habilidades en C#. Con la práctica y la exploración de sus características avanzadas, podrás crear aplicaciones web interactivas y eficientes.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados