I have 2 blazor page, Home and House.In House page contain pictures.How to put title for every pictures.

MIPAKTEH_1 260 Reputation points
2024-06-26T06:29:07.12+00:00 
@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");
    }
}
Blazor
Blazor
A free and open-source web framework that enables developers to create web apps using C# and HTML being developed by Microsoft.
1,471 questions
0 comments
Accepted answer
  1. Brando Zhang-MSFT 3,361 Reputation points Microsoft Vendor
    2024-06-26T08:15:58.3866667+00:00

    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:

    User's image

    1 person found this answer helpful.
    0 comments

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest