I have Image in blazor page then need a comment for each of Image.Can somebody show me how to do.

Question

@page "/"

@rendermode InteractiveServer
@inject NavigationManager Navigation
<h1>Home</h1>
<PageTitle>Home</PageTitle>
<h1 style="color: blue;">Promosi Barang Perniagaan Anda!!</h1>
Welcome to your new app.
<p> </p>

@for (int i = 0; i < images.Count; ++i)
{

    string tempImageName = images[i].Page;
    string tempTitle = images[i].Title;
    <div style="display:inline-block; text-align:center; margin:10px;">
        <img src=@($"/Images/{images[i].Image}")
             style="width:200px; cursor:pointer"
             @onclick="() => NavigateToNewPage(tempImageName)" />
        <div>@tempTitle</div>
        @if (true)
        {

            @($"{""}...")
        }
    </div>
}

Answer 1

Hi @MIPAKTEH_1 ,

You can create a field to control whether you can comment or not.Then judge whether to display the comment module in the page

Here's an example：

@page "/image-demo"
@rendermode InteractiveServer
<h1>Home</h1>
<PageTitle>Home</PageTitle>
<h1 style="color: blue;">Promosi Barang Perniagaan Anda!!</h1>
Welcome to your new app.
<p> </p>
@for (int i = 0; i < images.Count; ++i)
{
    string tempImageName = images[i].Page;
    string tempTitle = images[i].Title;
    int buttonNumber = i;
    <div style="float:left; text-align:center; margin:10px;">
        <img src=@($"/Images/{images[i].Image}")
             style="width:200px;height:200px; cursor:pointer;border:dashed 1px #333;" />
        <div>@tempTitle</div>
        <div style="width:200px;height:50px;">
            @if (images[i].CanComment)
            {
                <input style="width:60%" />
                <button class="btn-primary small" @onclick="@(e => ChangeStatus(e, buttonNumber))">comment</button>
            }
           
        </div> 
    </div>
   
}
@code{
    public List<Images> images { get; set; }
    public class Images
    {
        public string Page { get; set; }
        public string Title { get; set; }
        public string Image { get; set; }
        public bool CanComment { get; set; }
    }
    protected override void OnInitialized()
    {
        images = new List<Images>
        {
          new() { Page="11", Title="1", Image="", CanComment=true },
          new() { Page="22", Title="22", Image="", CanComment=true },
          new() { Page="33", Title="33", Image="", CanComment=true }
        };
    }
    private void ChangeStatus(MouseEventArgs e, int buttonNumber)
    {
        // You can save the comment in the table
        images[buttonNumber].CanComment = false;
    }
}

The result is  as follows

You can put  a comment button ,click it open a comment dialog

<div style="width:200px;height:50px;">
    @if (images[i].CanComment)
    {
        <button class="btn-primary small" onclick="alert('open comment dialog')">comment</button>
    }
</div>

The result is  as follows

 

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Manman Xie