@page "/imagelist"
 
@using BlazorServerSample.Data
@using BlazorServerSample.Services  
@inject IImageRespository ImgeRepo  //inject the services

<h1>Weather forecast</h1>
 
<input type="button" id="btnGet" value="Get Images" @onclick="GetImages" />
<div class="container">
    @if (imageList == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <div class="row">
            @foreach (var img in imageList)
            {
                <div class="col-sm-4">
                    <a href="http://www.ubh.com" class="tile purple"><h6 class="title">@img.Name</h6>
                    <img src="@img.Path" style="width:100px;height:100px;" >
                    </a>
                </div>
            }
        </div>
    } 
</div> 
@code {
    private List<ImageModel>? imageList;
     
    protected void GetImages()
    {
        ////get the images list from the services, you can also use HttpClient to call the API method and get the images
        imageList = ImgeRepo.GetImages(); 
    }
}