CREACIÓN DE COMPONENTES

Un componente es una pieza de interfaz de usuario, reutilizable, puede contener lógica.

ACTIVIDAD VI: MOSTRAR LOS PECES DESDE EL COMPONENTE FISHESLISTCOMPONENT

Carpeta: Pages
Componente: FishesListComponent.razor

En el componente nuevo, copias el código de la función que retorna la lista de peces y los
componentes HTML que se encargan de mostrar dicha lista de peces en el navegador:

<div class="jumbotron">
@if (Fishes == null){
<label><small class="text-muted">Cargando...</small></label>
<img src="/Images/loading.gif" class="rounded mx-auto d-
block" height="50px" width="50px">
}
else
{
<h6>Peces Beta</h6>
@foreach (var fish in Fishes)
{
<div class="list-group mb-3">
<div class="row">
<div class="col-md-3">
<img src="@fish.FishImage" class="img-
thumbnail" alt="" width="200px" height="200px">
</div>
<div class="col-md-9">
<h5 class="text-center">
Especie de pez: <small class="text-
muted">@fish.FishSpecie</small>
 </h5>
<blockquote class="blockquote text-center">
Descripción:
<small class="text-
muted">@fish.FishDescription</small>
<br>
Tipo de agua en la que habita:
<small class="text-
muted">@fish.TypeOfWater</small>
<footer class="blockquote-footer">
<cite>@fish.PublicationDate.ToString("dd/MM/
yyyy")</cite>
</footer>
</blockquote>
</div>
</div>
</div>
}
}
</div>
@code {
public List<Fish> Fishes;
private List<Fish> GetFishes()
{
return new List<Fish>(){new Fish(){FishSpecie = "Beta 1", FishDescri
ption = "Descripción del tipo de pez Beta 1",TypeOfWater = "Dulce",FishImage
= "/Images/bet.jpg", PublicationDate = new DateTime(2021, 09, 20)},
new Fish(){FishSpecie = "Beta 2", FishDescription = "Descripción
del tipo de pez Beta 2",TypeOfWater = "Salada",FishImage= "/Images/beta2.jp
g", PublicationDate = new DateTime(2021, 08, 20)},
new Fish(){FishSpecie = "Beta 3", FishDescription = "Descripción
del tipo de pez Beta 3",TypeOfWater = "Dulce",FishImage= "/Images/beta3.jpg
", PublicationDate = new DateTime(2021, 07, 20)},
new Fish(){FishSpecie = "Beta 4", FishDescription = "Descripción
del tipo de pez Beta 4",TypeOfWater = "Salada",FishImage= "/Images/beta4.jp
eg", PublicationDate = new DateTime(2021, 09, 20)},
new Fish(){FishSpecie = "Beta 5", FishDescription = "Descripción
del tipo de pez Beta 5",TypeOfWater = "Dulce",FishImage= "/Images/beta5.jpe
g", PublicationDate = new DateTime(2021, 08, 20)},
new Fish(){FishSpecie = "Beta 6", FishDescription = "Descripción
del tipo de pez Beta 6",TypeOfWater = "Salada",FishImage= "/Images/beta8.jp
g", PublicationDate = new DateTime(2021, 07, 20)}
};
}
 protected override async Task OnInitializedAsync()
{
await Task.Delay(2000);
Fishes = GetFishes();
}
}

Carpeta: Pages
Vista: ActividadVI.razor

Creas una nueva vista con nombre: Actividad VI y copias el siguiente código:

Carpeta: Shared
Vista: NavMenu.razor

Puedes ver en el navegador, como la salida de la vista VI es igual a la de la vista V, sólo que esta
ultima hace uso de un componente.
¿Que pasa si llamas el componente en la Actividad II, donde mostrabas la información espcifica de
un registro?

No debes modificar nada del código de la vista, únicamente, llamar el componente y verificar la
salida en el navegador.
ACTIVIDAD VII: COMPONENTE RECIBE INFORMACIÓN A TRAVES DE PARAMETROS QUE PUEDEN
SER DATOS, EVENTOS Y CONTENIDO.

MOSTRAR CATEGORÍAS DE PECES: BETA, DISCO

Carpeta: Pages
Componente: FishCategoryComponent.razor
 Carpeta: Images
Subcarpeta: Categorías de peces

Carpeta: Pages
Vista: ActividadVII.razor

Carpeta: Shared
Vista: NavMenu.razor
Salida generada