Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,585 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>
<div class='e-input' style="margin-top:5px; width:120px;">
@*@<input class='e-input' style="width:100%" Placeholder='' type='text'/>*@
<input type="text" @onkeydown="@Enter" />
</div>
@code {
// Method to navigate to the new page
public void Enter(KeyboardEventArgs e)
{
if (e.Code == "Enter" || e.Code == "NumpadEnter")
{
Navigation.NavigateTo("/House");
}
}
}
@*=================================================================================*@
@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");
}
}
Hi @MIPAKTEH_1,
To add titles to each picture in your Blazor page, you can modify the for loop to include titles for each image.
More details, you could refer to below codes:
@page "/House"
@inject NavigationManager Navigation
<h1>HOUSE</h1>
@for (int i = 0; i < images.Count; ++i)
{
<div style="display:inline-block; text-align:center; margin:10px;">
<img src=@($"/Images/{images[i]}")
style="width:200px; cursor:pointer"
@onclick="() => NavigateToNewPage(i)" />
<div>@titles[i]</div>
</div>
@if ((i + 1) % 3 == 0)
{
<br />
}
}
@code {
// Define the list of image file names
private readonly List<string> images = new()
{
"H_1.png",
"H_2.png",
"H_3.png",
"H_4.png"
};
// Define the list of titles corresponding to the images
private readonly List<string> titles = new()
{
"Title 1", "Title 2", "Title 3", "Title 4"
};
// Method to navigate to the new page
private void NavigateToNewPage(int imageIndex)
{
Navigation.NavigateTo("/Counter");
}
}
Result: