How to change code "Foreach" to Loop.

MIPAKTEH_1 260

@page "/"

@rendermode InteractiveServer
@inject NavigationManager Navigation


<h1 style="color: blue;">Anda!!</h1>
<p></p>

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()
    {
        "house_.png", "house_1.png", "house_2.png"
    };

    private readonly List<string> titles = new()
    {
       "Title 1", "Title 2", "Title 3"
    };

    private readonly Dictionary<string, string> imageToPageMap = new()
    {
        {  "house_.png", "/PageA" },
        { "house_1.png", "/PageB" },
        { "house_2.png", "/PageC" }
    };

    // Method to navigate to the new page
    private void NavigateToNewPage(string imageName)
    {
        if (imageToPageMap.TryGetValue(imageName, out var url))
        {
            Navigation.NavigateTo(url);
        }
    }
}
want to change

@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 />
    }
}

AgaveJoe 27,341 Reputation points

2024-06-28T15:16:16.19+00:00

*** Removed

Accepted answer

AgaveJoe 27,341

Sorry, I must have copied the wrong code to the forum. You have to get the state of the "Page" value into a variable because "i" is 3 when the loops ends.

@for (int i = 0; i < images.Count; ++i)
{
    string tempImageName = images[i].Page;
    <img src=@($"/Images/{images[i].Image}")
         style="left:auto; margin-left:10px; width:200px; cursor:pointer"
         @onclick="() => NavigateToNewPage(tempImageName)" />

}

Title not shown and click event on picture not to the page.

There's no "title" in your original code. I'm not sure where "title" should be located. If it is the title attribute of the img element then simply add the attribute like you're doing with the src attribute.

@for (int i = 0; i < images.Count; ++i)
{
    string tempImageName = images[i].Page;
    <img src=@($"/Images/{images[i].Image}")
         style="left:auto; margin-left:10px; width:200px; cursor:pointer"
         title=@($"{images[i].Title}")
         @onclick="() => NavigateToNewPage(tempImageName)" />

}

To deal with the three images per line within the for...loop.

    int tempI = i;
    @if (((tempI + 1) % 3) == 0)
    {
        <br />
    }

AgaveJoe 27,341

This is my entire test code.

@page "/"
@inject NavigationManager Navigation
@rendermode InteractiveServer

<PageTitle>Home</PageTitle>

<h1 style="color: blue;">Anda!!</h1>
<p></p>

Welcome to your new app.

<p></p>


@for (int i = 0; i < images.Count; ++i)
{
    string tempImageName = images[i].Page;
    <img src=@($"/Images/{images[i].Image}")
         style="left:auto; margin-left:10px; width:200px; cursor:pointer"
         title=@($"{images[i].Title}")
         @onclick="() => NavigateToNewPage(tempImageName)" />
    int tempI = i;
    @if (((tempI + 1) % 3) == 0)
    {
        <br />
    }
}

@code {
    public class MyViewModel
    {
        public string Image { get; set; } = string.Empty;
        public string Title { get; set; } = string.Empty;
        public string Page { get; set; } = string.Empty;

    }

    private readonly List<MyViewModel> images = new List<MyViewModel>()
    {
        new MyViewModel()
        {
            Image = "guitar_PNG3338.png",
            Title = "Title 1",
            Page = "Counter"
        },
         new MyViewModel()
        {
            Image = "guitar_PNG3362.png",
            Title = "Title 2",
            Page = "Weather"
        },
         new MyViewModel()
        {
            Image = "guitar_PNG3375.png",
            Title = "Title 3",
            Page = "/"
        },
                new MyViewModel()
        {
            Image = "guitar_PNG3338.png",
            Title = "Title 1",
            Page = "Counter"
        },
         new MyViewModel()
        {
            Image = "guitar_PNG3362.png",
            Title = "Title 2",
            Page = "Weather"
        },
         new MyViewModel()
        {
            Image = "guitar_PNG3375.png",
            Title = "Title 3",
            Page = "/"
        }
    };

    // Method to navigate to the new page
    private void NavigateToNewPage(string page)
    {
        Console.WriteLine(page);
        Navigation.NavigateTo(page);
    }

}

MIPAKTEH_1 260 Reputation points

2024-06-29T14:53:43.5133333+00:00

AgaveJoe,

The Title still not show.Page for each picture correctly showing.

Original code for title is;

<div>@titles[i]</div> in loop and Title position at the bottom every picture.

run your new code title not showing
AgaveJoe 27,341 Reputation points

2024-06-29T15:33:17.4166667+00:00
The Title still not show.Page for each picture correctly showing. Original code for title is; <div>@titles[i]</div> in loop and Title position at the bottom every picture. run your new code title not showing

This is the first time you explained the use case and I cannot read your mind. My best guess was you were referring to the title attribute of the img element which is definitely showing in my source code.

Before I write code to your specifications, please try designing the HTML to support your title use case.

Edit: I noticed you have a pervious post where you asked the same question.

https://video2.skills-academy.com/en-us/answers/questions/1745379/i-have-2-blazor-page-home-and-house-in-house-page

Use the same HTML in the post you marked as answered.

@for (int i = 0; i < images.Count; ++i) { string tempImageName = images[i].Page; <div style="display:inline-block; text-align:center; margin:10px;"> <img src=@($"/Images/{images[i].Image}") style="left:auto; margin-left:10px; width:200px; cursor:pointer" title=@($"{images[i].Title}") @onclick="() => NavigateToNewPage(tempImageName)" /> <div>@images[i].Title</div> </div> int tempI = i; @if (((tempI + 1) % 3) == 0) { <br /> } }

1 additional answer

AgaveJoe 27,341 Reputation points

2024-06-28T15:53:46.98+00:00
I think this is the approach you are looking for.

<h1 style="color: blue;">Anda!!</h1> <p></p> Welcome to your new app. <p></p> //Updated @for (int i = 0; i < images.Count; ++i) { string tempImageName = images[i].Page; <img src=@($"/Images/{images[i].Image}") style="left:auto; margin-left:10px; width:200px; cursor:pointer" title=@($"{images[i].Title}") @onclick="() => NavigateToNewPage(tempImageName)" /> int tempI = i; @if (((tempI + 1) % 3) == 0) { <br /> } } @code { public class MyViewModel { public string Image { get; set; } = string.Empty; public string Title { get; set; } = string.Empty; public string Page { get; set; } = string.Empty; } private readonly List<MyViewModel> images = new List<MyViewModel>() { new MyViewModel() { Image = "guitar_PNG3338.png", Title = "Title 1", Page = "/PageA" }, new MyViewModel() { Image = "guitar_PNG3362.png", Title = "Title 2", Page = "/PageB" }, new MyViewModel() { Image = "guitar_PNG3375.png", Title = "Title 3", Page = "/PageC" }, }; // Method to navigate to the new page private void NavigateToNewPage(string page) { Console.WriteLine(page); Navigation.NavigateTo(page); } }
Please sign in to rate this answer.

1 person found this answer helpful.
MIPAKTEH_1 260 Reputation points

2024-06-29T08:54:04.7833333+00:00

AgaveJoe , Thank for your feedback

I test run your code but Erorr in line @onclick="() => NavigateToNewPage(images[i].Page)" />

message;

System.ArgumentOutOfRangeException

HResult=0x80131502

Message=Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

Source=System.Private.CoreLib

StackTrace:

at System.ThrowHelper.ThrowArgumentOutOfRange_IndexMustBeLessException()

at System.Collections.Generic.List`1.get_Item(Int32 index)

at BlazorApp12.Components.Pages.Home.<>c__DisplayClass0_0.<BuildRenderTree>b__0() in C:\Users\Administrator\source\repos\BlazorApp12\BlazorApp12\Components\Pages\Home.razor:line 17

at Microsoft.AspNetCore.Components.EventCallbackWorkItem.InvokeAsyncT

at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, Object arg)

at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync(UInt64 eventHandlerId, EventFieldInfo fieldInfo, EventArgs eventArgs, Boolean waitForQuiescence)

MIPAKTEH_1 260 Reputation points

2024-06-29T08:57:37.15+00:00

Hi AgaveJoe,

Title not shown and click event on picture not to the page.

Error at line @onclick="() => NavigateToNewPage(images[i].Page)" />

System.ArgumentOutOfRangeException

HResult=0x80131502

Message=Index was out of range. Must be non-negative and less than the size of the collection. (Parameter 'index')

Source=System.Private.CoreLib

StackTrace:

at System.ThrowHelper.ThrowArgumentOutOfRange_IndexMustBeLessException()

at System.Collections.Generic.List`1.get_Item(Int32 index)

at BlazorApp12.Components.Pages.Home.<>c__DisplayClass0_0.<BuildRenderTree>b__0() in C:\Users\Administrator\source\repos\BlazorApp12\BlazorApp12\Components\Pages\Home.razor:line 17

at Microsoft.AspNetCore.Components.EventCallbackWorkItem.InvokeAsyncT

at Microsoft.AspNetCore.Components.ComponentBase.Microsoft.AspNetCore.Components.IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, Object arg)

at Microsoft.AspNetCore.Components.RenderTree.Renderer.DispatchEventAsync(UInt64 eventHandlerId, EventFieldInfo fieldInfo, EventArgs eventArgs, Boolean waitForQuiescence)
Sign in to comment

Share via

How to change code "Foreach" to Loop.

1 additional answer