What to do; When load web appear menu "Item" right hand and click menu show picture left area We use Blazor Assembly standAlone.

Question

1.TShirtItem.cs

namespace TestBlazorApp.Models

{

public class TShirtItem

{

    public string Name { get; set; }

    public string ImagePath { get; set; }

}
```}

2.TShirtItem.razor

@page "/tshirt-items"

@using TestBlazorApp.Models

<h3>Item</h3>

<div class="tshirt-grid">

```xml
@for (int i = 0; i < tshirtItems.Count; i++)

{

    <div class="tshirt-section">

        <img src="@tshirtItems[i].ImagePath" alt="T-Shirt Image" />

        <div class="tshirt-details">

            <div class="tshirt-detail">

                <label for="tshirtProduct">Product:</label>

                <input type="text" id="tshirtProduct" @bind="tshirtItems[i].Name" />

            </div>

            <div class="tshirt-detail">

                <button @onclick="() => ShowDetails(i)">Show</button>

            </div>

        </div>

    </div>

}

}
```</div>

@code {

```powershell
[Inject]

private NavigationManager Navigation { get; set; }

private List<TShirtItem> tshirtItems = new List<TShirtItem>

{

    new TShirtItem { ImagePath = "images/Pakaian_1.jfif", Name = "Shirt 1" },

    new TShirtItem { ImagePath = "images/Pakaian_5.jfif", Name = "Shirt 2" }

};
```}

3.NavMenu.razor

<div class="top-row ps-3 navbar navbar-dark">

```xml
<div class="container-fluid">

    <a class="navbar-brand" href="">TestBlazorApp</a>

    <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">

        <span class="navbar-toggler-icon"></span>

    </button>

</div>
```</div>

<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">

```xml
<nav class="flex-column">

    <div class="nav-item px-3">

        <NavLink class="nav-link" href="" Match="NavLinkMatch.All">

            <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home

        </NavLink>

    </div>

    <div class="nav-item px-3">

        <NavLink class="nav-link" href="counter">

            <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter

        </NavLink>

    </div>

    <div class="nav-item px-3">

        <NavLink class="nav-link" href="weather">

            <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather

        </NavLink>

    </div>

    <div class="nav-item px-3">

        <NavLink class="nav-link" href="tshirt-items">

            <span class="bi bi-tshirt-nav-menu" aria-hidden="true"></span> T-Shirt Items

        </NavLink>

    </div>

</nav>
```</div>

@code {

```java
private bool collapseNavMenu = true;

private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

private void ToggleNavMenu()

{

    collapseNavMenu = !collapseNavMenu;

}
```}

Answer 1

Hi MIPAKTEH_1,

Thank you for reaching out to Microsoft Q & A forum.   

To achieve this functionality, you need to track the selected item and update it when a menu item is clicked. 

Modify the TShirtItem.razor file to store the selected item. 

@page "/tshirt-items"
@using TestBlazorApp.Models
<h3>Item</h3>
<div class="container">
    <div class="preview">
        @if (selectedItem != null)
        {
            <img src="@selectedItem.ImagePath" alt="Selected T-Shirt" />
        }
    </div>
    <div class="menu">
        @foreach (var item in tshirtItems)
        {
            <button @onclick="() => SelectItem(item)">@item.Name</button>
        }
    </div>
</div>
@code {
    private List<TShirtItem> tshirtItems = new()
    {
        new() { ImagePath = "images/Pakaian_1.jfif", Name = "Shirt 1" },
        new() { ImagePath = "images/Pakaian_5.jfif", Name = "Shirt 2" }
    };
    private TShirtItem? selectedItem;
    private void SelectItem(TShirtItem item) => selectedItem = item;
}

Ensure that clicking a button updates the displayed image accordingly. 

The menu buttons should appear on the right, while the corresponding image updates on the left when a button is clicked. 

Please feel free to contact us if you have any additional questions.     

If you have found the answer provided to be helpful, please click on the "Accept answer/Upvote" button so that it is useful for other members in the Microsoft Q&A community.