Blazor WebAssembly

Blazor WebAssembly: ¡Como hacer magia con C# en la web! 🧙‍♂️

⏱️ Tiempo de lectura estimado: 15 minutos 🎯 Nivel: Basico

¿Te imaginas poder desarrollar aplicaciones web usando C#? ¡Eso es precisamente lo que Blazor WebAssembly nos permite hacer! Es como si un mago hiciera aparecer un conejo de una chistera, pero en este caso, el conejo es tu aplicación web.

🚀 Introducción

Blazor WebAssembly es una tecnología de Microsoft que nos permite crear aplicaciones web interactivas usando C#, HTML y CSS. Es como un puente entre el mundo del desarrollo de escritorio y el desarrollo web, permitiéndonos utilizar las potentes herramientas y bibliotecas de C# en la web.

💡 Conceptos Básicos

Componentes

Los componentes son los bloques de construcción de las aplicaciones Blazor. Son clases que representan una parte de la interfaz de usuario, como un botón, una entrada de texto o un gráfico. Cada componente tiene su propio ciclo de vida y puede interactuar con otros componentes.

Enrutamiento

El enrutamiento determina cómo las URL se asignan a los componentes. Cuando un usuario navega a una URL específica, Blazor carga el componente correspondiente y lo muestra en la página.

Razor

Razor es un motor de plantillas que nos permite escribir código C# dentro de archivos HTML. Esto nos permite crear interfaces de usuario dinámicas y receptivas.

👨‍💻 Manos al Código

Ejemplo 1: Componente Hola Mundo


// HolaMundo.razor
¡Hola Mundo!

Este es un componente simple que muestra el texto "¡Hola Mundo!".

Ejemplo 2: Manejo de Eventos


// Contador.razor
Contador: {contador}


@code {
    private int contador = 0;
    private void IncrementarContador() => contador++;
}

Este componente muestra un contador y tiene un botón que incrementa el contador cuando se hace clic. La función `IncrementarContador` se ejecuta cuando se hace clic en el botón, incrementando el valor de `contador`.

💎 Tips y Mejores Prácticas

Tip #1: Usa la inyección de dependencias

La inyección de dependencias es una técnica que nos permite desacoplar nuestros componentes y hacerlos más fáciles de probar. En Blazor, podemos usar el servicio `@inject` para inyectar dependencias en nuestros componentes.

Tip #2: Utiliza la validación de formularios

La validación de formularios es esencial para garantizar que los datos ingresados por los usuarios sean válidos. Blazor proporciona varias herramientas para ayudarnos a validar formularios, como la anotación `[Required]` y el componente `DataAnnotationsValidator`.

🎯 Conclusión

Blazor WebAssembly es una tecnología increíble que nos permite crear aplicaciones web interactivas y de alto rendimiento utilizando C#. Es fácil de aprender, potente y divertido de usar. ¡Así que ponte tu sombrero de mago y comienza a crear magia con Blazor WebAssembly hoy!

¿Quieres aprender más?

blazor webassembly c# desarrollo web

Subir archivos al servidor

Muchas veces necesitamos que nuestros usuarios puedan subir archivos al servidor ya sean imágenes,pdf, rar,zip,etc, y es común que quieran encontrar métodos fáciles y agiles para realizar esto. Es por eso que hoy les traigo un post donde les enseñare a crear una aplicación en ASP.NEET Y C# para que puedan subir archivos a una carpeta del servidor. Es muy simple, pero vaya que nos es útil, y más cuando es para satisfacer las necesidades de nuestro cliente. Sin hablar más aquí vamos: Lo primero que haremos es crear una aplicación en Visual Studio - ASP.NET y escogeremos como lenguaje C#, luego agregaremos una nueva WebPage y agregaremos los siguientes controles: FileUpload – Label - Boton Le cambiaremos los id de los controles y les pondremos nombres descriptivos por aquello de las Buenas practicas de programación. La propiedad Text del botón le pondremos “Enviar”. Crearemos una carpeta en el server que se llame “Archivos” para esto daremos Click derecho en el e...

Formatos con String.Format en C#

Todas las aplicaciones que desarrollamos en algún momento necesitan formatear algún tipo de datos, y no se a ustedes pero a mi siempre se me olvidan los formatos y como obtener los resultados de una u otra forma, es por eso que decidí hacer este post, y recopilar la mayor cantidad de formatos posibles, para buscarlos cuando necesite y ustedes puedan copiarlos ;=). Para formatear cadenas existe una clase especializada en el manejo de cadenas, esta clase se llama String, su nombre completo es System.String, ya que se encuentra en el namespace System. En esta clase vamos a encontrar una función llamada Format que se encargará de reemplazar el valor de un dato (entero, real, una cadena, un carácter, hasta de un objeto), por el formato que se especifique en el parámetro. En forma general, y aunque tiene varias sobrecargas, String.Format tiene la siguiente sintaxis: Formatos para números: Tipo ...

Hora Militar o Formato 24 Horas en SQL SERVER

Es curioso los problemas que nos encontramos a diario al desarrollar, siempre resulta que hay algo nuevo y algo que no sabemos, aprendemos día a día con cada cosa que hacemos, y cada código que escribimos. El día de hoy les traigo una instrucción que si bien es muy sencilla, puede ahorrarnos varias horas de búsqueda infructuosa en san google. Se trata de convertir una hora en sql server al formato militar o formato de 24 horas. Para esto tenemos varias formas: SELECT CONVERT(VARCHAR(8), dateadd(HOUR,12, cast('2017-01-01 10:15:00' as datetime)), 108) AS HoraMilitar Veamos lo que se hace en la instrucción anterior: Tenemos la fecha y hora: 2017-01-01 10:15:00 la cual convertimos a datetime cast('2017-01-01 10:15:00' as datetime) luego le sumamos 12 horas para ejemplificar el ejercicio "dateadd(HOUR,12," y por ultimo pasamos a varchar para darle formato militar CONVERT(VARCHAR(8), "Aquí la fecha",108) Notese que uso el código 108 de con...

C# AL EXTREMO

Buscar este blog