SEMANA IV – SESIÓN I

PROYECTO: Client
FORMADORA: Yaneth Mejía Rendón

CARPETA: Pages
TEMA: Ciclos y condicionales para mostrar información de forma que cuenta con el mismo tipo de estructura
1. Vista: Index.razor

2. Algunos de los sitios desde donde puedes descargar fotos de forma gratuita:
- https://www.pexels.com/es-es/
- https://pixabay.com/es/
- https://unsplash.com/
- https://www.freeimages.com/es
- https://stocksnap.io/
- https://www.lifeofpix.com/
- https://www.splitshire.com/

3. Crea la carpeta Images dentro de wwwroot y guarda las imágenes que más te llamaron la atención

4. Utiliza el componente jumbotron para poner un fondo gris a tu sitio

5. Inserta el componente card para mostrar imágenes especificas:
https://getbootstrap.com/docs/5.0/components/card/
Ejemplo de código que puedes copiar:

<div class="card ">

<img class="card-img-
top" src="/Images/beta2.jpg" alt="Card image cap" height="250">
<div class="card-body">
<h5 class="card-title"><em>Tipo de Pez</em></h5>
<small class="text-muted">Descripción.</small>
</div>
<footer class="blockquote-footer">
<small>Autor 1</small>
</footer>
</div>
6. Carpeta: Shared
Archivo: MainLayout.razor.css
Linea código: 12
Puedes cambar los colores

7. Modifica el menú
Archivo: NavMenu.razor
 8. Crea la pàginaciòn del catalogo

<div>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</div>
9. Declaración de variables en el código de razor

10. Remplazamos el texto plano por las variables, utilizando el @

CONEXIÓN ENTRE EL PROYECTO SERVER Y CLIENT MEDIANTE SHARE
PROYECTO: Share

MOSTRAR CONTENIDO UTILIZANDO CLASES C#

1. Crea una carpeta: Entity
Clase: Fish.cs

Ingresas el siguiente código:

2. Con Ctrl + P accedes al buscador de archivos para buscar el fichero: _Imports.razor

3. Añades el namespace de la clase Fish para que se pueda acceder a ella desde cualquier otra
clase del proyecto

4. Vista: Counter.razor
En la sección de código creamos una instancia de la clase Fish y le asignamos valores.

IMPORTANTE: Esta forma funciona, sólo si nuestra aplicación tratara de un pez, pero son
varios peces, por ende, más adelante debemos sustituir este código por un ciclo.

@page "/counter"
<div class="jumbotron">
<img src=@BetaFish.FishImage class="img-
fluid" alt="Responsive image" height="300">
<h3 class="text-center">
Especie:
<small class="text-muted">@BetaFish.FishSpecie</small>
</h3>
<blockquote class="blockquote text-center">
<p class="mb-0">@BetaFish.DescriptionSpecie</p>
 <footer class="blockquote-
footer">Fecha de la publicación <cite
title="Source Title">@BetaFish.PublicationDate.ToS
tring("dd/MM/yyyy")</cite></footer>
</blockquote>
</div>
@code {
@* Creamos una instancia de la clase Fish del proyecto Share *
@
private Fish GetFish()
{
return new Fish()
{
FishSpecie = "Beta",
DescriptionSpecie = "Es un pez territorial de agua dul
ce",
FishImage = "/Images/beta2.jpg",
PublicationDate = new DateTime(2021,09,19)
};
}
@* Creamos una propiedad de tipo Fish *@
public Fish BetaFish
{
get
{
return GetFish();
}
}
}

5. Valida la salida generada en tu navegador

CICLO FOREACH PARA MOSTRAR VARIOS REGISTROS
Vista: FetchData.razor
Salida esperada:

CICLO FOR PARA MOSTRAR VARIOS REGISTROS

Proyecto: Client
Carpeta: Shared
Archivo: NavMenu.razor
Creas una nueva opción en el menú de la aplicación

Carpeta: Pages
Creas una nueva vista: Forfishes.razor

Validas la salida generada en el navegador

ACTIVIDAD:
Crea una nueva opción en el menú principal de la aplicación:
Incluye el siguiente código, que mostrará un GIF por 3 segundos, mientras carga el contenido de
la página:

Salida generada:
Luego de 3 segundos: