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

Question

@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");
    }
}

Answer 1

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: