Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,581 questions
This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
@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");
}
}
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