Plantillas HTML은 ASP.NET 및 DotVVM에서 반복되는 요소입니다.

안녕! 감사합니다. En esta ocasión aprenderemos sobre uno de los controles de DotVVM para Representativear 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 coleccion reference en unDataSource .

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.

모델로

El modelo está Representativeado 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; }
}

비스타모델로

Para armar nuestro listado de ciudades, en este caso definiremos en el ViewModel una coleccion 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" });
}

추억

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>

돈데,

DataSource es para especificar al listado de elementos que queremos Representative.

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.

마지막 podremos visualizar algo como esto에 대한 고려사항:



Y bien, de esta manera rápida y sencilla podremos는 웹 페이지의 목록에 있는 새로운 요소의 시각적 요소를 나타냅니다.

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

추가 추천

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

.

.

.

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 ! O si gustas también puedes escribirme por Telegram . :)