Function inside C# for loop inside Razor Page to hide/unhide photos

Question

I'm tryin to set a function inside a for loop within a c# cshtml file. The purpose of this function is to unhide photos on button click so users can see them.

            @if (Model.Photos.PhotosBase64 != null)
            {
                for (var i = 0; i < Model.Photos.PhotosBase64.Count; i++)
                {
                    <h1 class="font-weight-bold">Photo @(i + 1)</h1>
                    <input type="button" value="Show Button" onclick="showImage();"/>
                    <img alt="" id="loadingImage_@i" src="data:image/png;base64, @Model.Photos.PhotosBase64.ElementAt(i)" style="visibility:hidden"/>  

                    <br/>
                    <br/>
                    @Html.HiddenFor(modelItem => Model.Photos.PhotosBase64[i])
                    <input type="submit" value="Remove Photo" class="btn btn-danger" id="removephoto-btn" asp-action="RemovePhoto" asp-route-index="@i" />
                    <br/>
                    <br/>
                              <%= function showImage(){document.getElementById('loadingImage_'+i).style.visibility="visible";}> </%>

                }
            }

I've read that <%=> can open up a javascript section but it doesn't seem to be working correctly probably because of my missing syntax or using it in the wrong context. I've tried several different formats but left the most recent attempt on the page for some visualization. How can I use JS to hide/unhide photos by selecting their ID? (or other method if more effective)

Answer 1

For starters, JavaScript code goes in a <script> element.

Aside from that, the logic of what you're doing is a bit odd. Consider that you are outputting this code in a loop. Which means the page is going to have many different versions of a function called showImage, each one over-writing the previous. So only the last one will actually be called.

Define one function (probably at the bottom of the page, certainly not in a loop) which performs the operation you want, and have it require whatever information it needs to perform that operation. In this case that information is the id of the target element:

<script type="text/javascript">
  function showImage(id) {
    document.getElementById(id).style.visibility="visible";
  }
</script>

Then within the loop you can invoke that function, supplying the id values accordingly:

<input type="button" value="Show Button" onclick="showImage('loadingImage_@i');"/>