Plantillas HTML para elementos repetitivos en ASP.NET & DotVVM

Hola! Un gusto saludarte. En esta ocasión aprenderemos sobre uno de los controles de DotVVM para representar plantillas HTML para elementos de una colección determinada, este control se llama Repeater.

Repeater es una etiqueta que nos permite establecer una plantilla HTML preestablecida para renderizar elementos de un listado determinado. En otras palabras, este control repite una plantilla para cada elemento de una colección referenciada en un DataSource.

Ejemplo de un repetidor

Para ver a este control de DotVVM en acción, veamos un ejemplo. Supongamos que queremos una página web donde se muestre un listado de ciudades, y que cada una de las ciudades que se muestren contengan una imagen, el nombre de la ciudad, y el país a la que pertenece.

Como es conocido, DotVVM se basa en el patrón MVVM (Modelo, Vista, VistaModelo), al utilizar únicamente C# y HTML. En este sentido, veamos cada una de estas partes.

Modelo

El modelo está representado en este caso por una clase CityModel de la siguiente manera:

public class CityModel
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string PhotoLink { get; set; }
    public string Country { get; set; }
}

VistaModelo

Para armar nuestro listado de ciudades, en este caso definiremos en el ViewModel una colección con ejemplos de ciudades, las cuales queremos que se visualicen posteriormente en nuestra página web.

public List<CityModel> Cities { get; set; } = new List<CityModel>();

public DefaultViewModel()
{
    Cities.Add(new CityModel { Id = 1, Name = "Salzburg", Country = "Austria", PhotoLink = "URL" });
    Cities.Add(new CityModel { Id = 9, Name = "Dubai", Country = "United Arab Emirates", PhotoLink = "URL" });
    Cities.Add(new CityModel { Id = 4, Name = "Vancouver", Country = "Canada", PhotoLink = "URL" });
    Cities.Add(new CityModel { Id = 5, Name = "La Paz", Country = "Bolivia", PhotoLink = "URL" });
    Cities.Add(new CityModel { Id = 7, Name = "Bonn", Country = "Germany", PhotoLink = "URL" });
    Cities.Add(new CityModel { Id = 10, Name = "Denver", Country = "United States", PhotoLink = "URL" });
    Cities.Add(new CityModel { Id = 8, Name = "Kochi ", Country = "India", PhotoLink = "URL" });
    Cities.Add(new CityModel { Id = 3, Name = "El Cairo", Country = "Egypt", PhotoLink = "URL" });
    Cities.Add(new CityModel { Id = 2, Name = "Washington", Country = "United States", PhotoLink = "URL" });
}

Vista

Con nuestro listado Cities establecido, y con valores incluidos, ahora podemos definir nuestra plantilla HTML en la vista. Esta plantilla es como se puede visualizar a continuación:

<dot:Repeater DataSource="{value: Cities}" class="row">
    <ItemTemplate>
        <div class="col-lg-4 col-md-6">
            <div class="" data-aos="fade-up" data-aos-delay="100">
                <img src="{{value: PhotoLink}}" alt="{{value: Name}}" class="img-fluid">
                <div class="details">
                    <h3><a href="#" target="_blank">{{value: Name}}</a></h3>
                    <p>{{value: Country}}</p>
                </div>
            </div>
        </div>
    </ItemTemplate>
</dot:Repeater>

Donde,

• DataSource es para especificar al listado de elementos que queremos representar.
• ItemTemplate, será el HTML que se repita para cada uno de los elementos del listado.
• Atributos, estos pueden ser ubicados en la plantilla de acuerdo con el objetivo deseado.

Con estas consideraciones, a la final podremos visualizar algo como esto:

Y bien, de esta manera rápida y sencilla podremos representar visualmente nuestros elementos de un listado en una página web.

El código fuente de este ejemplo se encuentra disponible en este repositorio de GitHub: DotVVMRepeater.

Recursos adicionales

Si gustas seguir adquiriendo o reforzando conocimientos en esta área, aquí se encuentran algunos recursos adicionales que pueden ser de gran utilidad:

• Construyendo un Dashboard con ASP.NET Core y DotVVM.
• Trabajando con servicios web a través de ASP.NET Core y DotVVM.
• .NET 5: Despliegue de aplicaciones web con Azure App Service.

Muchas gracias por leer, espero que este demo pueda serte de utilidad. Si tienes alguna pregunta o alguna idea que necesites discutir, será un gusto poder colaborarte y juntos intercambiar conocimientos entre sí.

¡Nos vemos en Twitter! O si gustas también puedes escribirme por Telegram. :)