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

MIPAKTEH_1 300 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,494 questions
0 comments No comments
{count} votes

Accepted answer
  1. Brando Zhang-MSFT 3,446 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 No comments

0 additional answers

Sort by: Most helpful