Creando componentes compartidos

Clase 9 de 19 • Curso de Aplicaciones Web con Blazor WebAssembly y .NET

Aron Eliezer Lopez Agurcia

student•

Ahora que empiezo con el curso, veo que el proyecto utiliza net8.0, y en su estructura no aparece la carpeta "Shared".

Para poder solucionarlo en efecto es necesario crear la carpeta y en cada archivo en la carpeta "Pages" se tiene que agregar

@using {nombre aplicación}.{nombre archivo}

Juan Carlos miranda

student•

Gracias por el aporte!

Javier Eduardo Morón Mendoza

student•

Otra solución es, después de crear la carpeta /Shared también podemos agregar el @using {nombre aplicación}.Shared directamente en el archivo _Imports.razor lo que pondrá en el contexto de la aplicación todos los archivos que estén dentro de esa carpeta, de la misma manera que propone la estructura original con @using {nombre aplicación}.Layout

Diego Alejandro Gentner Polanco

student•

Si a alguien está usando VS 2022 Community y el IDE no reconoce como declarado el componente ModuleTitle prueben reiniciando el IDE porque a veces se buguea el Intellisense. En mi caso incluso cambié el nombre pensando que era error del código, pero no es así.

Jesus David Mendez Coronell

student•

A mi me paso con VS Code y lo solucioné de la misma forma

Erick Estrada Mancilla

student•

dotnet clean

Mateo Olaya Garzon

student•

En versiones recientes de .Net la carpeta shared fue renombrada a Layouts para guardar componentes que están relacionados con el diseño o la estructura visual general de la aplicación (como menús de navegación específicos o barras laterales)

Si los componentes que vas a crear son de uso general como en este caso, lo que debemos hacer es crear la carpeta Shared y guardar ahi dichos componentes

Finalmente para que podamos usarlos en la aplicación, debemos modificar el archivo _Imports.razor y añadir la siguiente linea:

@using BlazorApp.Shared

En mi caso BlazorApp es el nombre de mi aplicación, debes reemplazarlo por el nombre de tu aplicación :)

Alvaro

student•

Entiendo que si la empresa te obliga a trabajar con blazor no te queda de otra. Pero, si puedes escoger prefiero hacer el cliente con React o angular o algo parecido.

Juan Daniel Diaz Jaramillo

student•

Para los que estan usando la versión 8.0 no les va a aparecer la carpeta "Shared" en este caso el nombre de ahora es "Layout"

BALFRE VAZQUEZ CASTREJON

student•

Estos componentes comparitdos deberian incluir estilos o solo html tags?

Miguel Teheran

teacher•

Pueden tener sus propios estilos también.

Joel Angel David Barrantes Palacios

student•

No me funcionaba lo del los titulo a pesar que descargue todos los archivos del github del profesor, asiq ue lo que hice fue lo siguiente:

Moduletitle.razor

~~~

@using System.ComponentModel.DataAnnotations

<h2>@Title</h2> @code{ [Parameter] [Required] public string Title { get; set; }}

~~~

y en la pages llamas al componente compartido como se hace ene l video:

~~~

~~~

German Camilo Guarnizo Lizcano

student•

A mí no me traía la carpeta de shared, tuve que crearla y luego no me funcionaba el ModuleTitle, tuve que agregar la carpeta shared en el archivo _imports.razor

Rafael Humberto Rubiano Novoa

student•

A mi también me toco hacer ese paso:

@using Blazorappdemo.Shared

Luego reiniciar VSCode

Roger Ullilen Echeverria

student•

no se crea la carpeta Shared

JOSE CATAGUA

student•

en el moduleTitle me sale: El elemento propiedad "Title" que no acepta valores NULL debe contener un valor distinto de NULL al salir del constructor. Considere la posibilidad de declarar el elemento propiedad como que admite un valor NULL.

Miguel Teheran

teacher•

Si es un parametro requerido sale de esa manera. En las nuevas verions de C# string no acepta nulos por defecto.

Juan Betancur

student•

Todo me funciona muy bien pero no me pinta el componente en verde, ademas me sale con una advertencia. ¿como puedo hacer para que no salga la advertencia?

Miguel Teheran

teacher•

Hola Juan los warning salen en la cosola o depronto pasando el mouse por encima puedes ver de que se trata, tal vez algun aprametro requerido no se esta enviando o los espacios que tienes entre title y le mensaje también pueden afectar. De todas formas revisa la consola o pasa el mouse sobre el warning que seguro te dirá el por que

ROMMEL DUAREZ SAENZ

student•

no reconoce al componente

Erick Fariñas

student•

Está muy interesante, me gusta que sigue más o menos la misma implementación de react, ha hecho menor la curva de aprendizaje para mí

Cristina Alejandra Morales Oñate

student•

En Blazor, la carpeta Shared sigue existiendo en la versión 8.0, pero ahora también se utiliza una carpeta Layout para organizar los componentes de diseño. La carpeta Shared generalmente contiene componentes reutilizables que pueden ser utilizados en diferentes partes de la aplicación, mientras que la carpeta Layout se utiliza específicamente para componentes de diseño que definen la estructura general de la aplicación, como menús, encabezados y pies de página

Esteban Cerda Román

student•

No logré que corriera con las diversas alternativas comentadas. Me funcionó, fue generar el ModuleTitle, dentro de Layout.

Creando componentes compartidos

Introducción

Presentación

Prerrequisitos

¿Qué es WebAssembly y Blazor?

Creando un proyecto de Blazor en Visual Studio

Creando un proyecto de Blazor con el CLI

Analizando extensiones de Visual code para blazor

Componentes de Blazor

Estructura de componentes y arquitectura en Blazor

Ciclo de vida en componentes y parámetros

Creando componentes compartidos

Creando archivo de configuración

Conectando Blazor a Backend

Configurando conexión al backend para el proyecto

Creando componentes para conexión a la API

Mostrando lista de productos

Creando Menú y CSS para la lista de productos

Creando formulario para agregar registros

Integrando formulario con servicios

Usando Librerías de Blazor

Creando funcionalidad de eliminar usando JavaScript

Usando Librerías de Blazor

Cierre

Conclusión y cierre