Make one picture for one Button click at the bottom picture

Question

Hi All ,

Can someone show how modify this code then when we click it show the new blazor page

.

@page "/House"

<h1>HOUSE</h1>

@for (int i = 1; i <= images.Count; ++i)

{

<button class="btn-primary">Click me</button>

<img src=@($"/Images/H_{i}.jfif") style="left:auto; margin-left:10px; width:200px" />

@if ((i % 3) == 0)

{

    <br />

}
```}

@code {

```java
// Define the list of image file names

private readonly List<string> images = new()

{

    "H_1.jfif",

    "H_2.jfif",

    "H_3.jfif",

    "H_4.jfif",

    "H_5.jfif",

    "H_6.jfif",

    "H_7.jfif",

    "H_8.jfif",

    "H_9.jfif"

};
```}

Answer 1

Hi @MIPAKTEH_1,

Do you mean you want to click the image and then go to the new page? If this is your requirement, I suggest you could modify the image tag to add the @onclick method, then inside the onclick method you could use the Navigation.NavigateTo method to go to the new page.

More details, you could refer to below codes:

@page "/House"
@rendermode InteractiveServer
@inject NavigationManager Navigation

<h1>HOUSE</h1>

<button class="btn-primary">Click me</button>
@for (int i = 1; i <= images.Count; ++i)
{
    <img src=@($"/Images/H_{i}.jfif")
         style="left:auto; margin-left:10px; width:200px; cursor:pointer"
         @onclick="() => NavigateToNewPage(i)" />
    @if ((i % 3) == 0)
    {
        <br />
    }
}

@code {
    // Define the list of image file names
    private readonly List<string> images = new()
    {
		"H_1.jfif", "H_2.jfif", "H_3.jfif", "H_4.jfif", "H_5.jfif", "H_6.jfif", "H_7.jfif", "H_8.jfif", "H_9.jfif"
    };
  
    // Method to navigate to the new page
    private void NavigateToNewPage(int imageIndex)
    {
      
        Navigation.NavigateTo("/Counter");
    }
}