Image Click

Question

User185633436 posted

I have written a Blazor Server Web application.

I generate a table with rows and columns and each cell I draw an image based on a records state using the code below.

	<table id="status">
	<tr>
		<th width="200px">Status.</th>
		@for ( int i = 1 ; i <= LastStep ; i++ )
                {
                    <th>Record @i</th>
                }
            </tr>
            @if ( Records != null )
            {                
                @foreach( var rec in Records )
                {
                    <tr>
                        <td width="200px">
                            @rec.Status
                        </td>
                        @for( int j = 1 ; j <= LastStep ; j++ )
                        {
                            <td>
                                <img src="@ImageSourceForStep( rec.Id, j )" @onclick="( () => OnImageClick())"/>
                            </td>
                        }
                    </tr>
                }
            }
	</table>

I have an OnImageClick method in the code-behind that gets called when the user clicks on one of the images.
The problem I have is in the click handler determining which of the images was clicked. 

Can someone help explain to me how I can identify the image to the click handler?

Best Regards

Andy

Answer 1

User-474980206 posted

Pass either the index or rec id

     <img src="@ImageSourceForStep( rec.Id, j )" @onclick="( () => OnImageClick(rec.Id))"/>

Answer 2

User185633436 posted

I was sure I had tried that but could not get it to work - but it does now !

Thanks for your help - appreciate it :-)

Andy

Answer 3

User185633436 posted

Actually, I know what problem I have was:

I also want to pass the loop variable value to the OnClick but it always returns the maximum loop count so I get the correct record coming through which gives me a row but can't determine which column was clicked using the loop variable.

I seem to recall in the dim past that there was an issue with passing loop variables to Blazor code but can't remember what the work around is.

Andy