How to set Click on picture then go to new different page.That mean one picture one new page.

Question

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

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.
<p></p>
    @foreach (var image in images)
    {
        <div style="margin:10px 20px; float:left;">
        <img src=@($"/Images/{image}") asp-append-version="true" : style="width=100px;height:100px" @onclick="() => NavigateToNewPage()" />
        </div>
    }
@code {
    // Define the list of image file names
    private readonly List<string> images = new()
    {
        "A.png",
        "B.jfif",
        "C.jfif",
        "D.jfif"
    };

    private void NavigateToNewPage()
    {
        Navigation.NavigateTo("/A");
        Navigation.NavigateTo("/B");
        Navigation.NavigateTo("/C");
        Navigation.NavigateTo("/D");

    }
}

Answer 1

Hi @MIPAKTEH_1,

Here is a whole working demo you could follow:

@page "/"
@rendermode InteractiveServer
@inject NavigationManager Navigation
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<p></p>
@foreach (var image in images)
{
    <div style="margin:10px 20px; float:left;">
        <img src=@($"/Images/{image}") asp-append-version="true" style="width:100px;height:100px" @onclick="() => NavigateToNewPage(image)" />
    </div>
}
@code {
    // Define the list of image file names
    private readonly List<string> images = new()
    {
        "A.png",
        "B.jfif",
        "C.jfif",
        "D.jfif"
    };
    // Define a dictionary to map image names to their corresponding URLs
    private readonly Dictionary<string, string> imageToPageMap = new()
    {
        { "A.png", "/PageA" },
        { "B.jfif", "/PageB" },
        { "C.jfif", "/PageC" },
        { "D.jfif", "/PageD" }
    };
    private void NavigateToNewPage(string imageName)
    {
        if (imageToPageMap.TryGetValue(imageName, out var url))
        {
            Navigation.NavigateTo(url);
        }
    }
}

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Rena