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)

*"I've read that <%=> can open up a javascript section"* - Where did you read that? I would expect a ` — David, May 17 '22 at 13:38
Does this answer your question? [Mix Razor and Javascript code](https://stackoverflow.com/questions/5614941/mix-razor-and-javascript-code) — gunr2171, May 17 '22 at 13:39
The photos are contained in a particular location. Will that text/Javascript tag essentially replace a div or be contained within a div to allow for specific page placement? If yes, then that is exactly the answer. — HankMorgan, May 17 '22 at 13:46
@David I don't see where I found that suggestion anymore. I'm probably losing it haha. Normally I always use a script but I couldn't place a plain — HankMorgan, May 17 '22 at 13:53
@HankMorgan: Honestly it sounds like you might need to take a step back and look at a bigger picture of the overall page. For starters, even if you replace this with a ` — David, May 17 '22 at 13:55
@HankMorgan: Perhaps you could define a single `showImage` function in JavaScript for the page, and that function would accept as a parameter the `id` of the element it targets. Then within this loop your calls to that function would include that `id` value. — David, May 17 '22 at 13:57

score 1 · Accepted Answer · answered May 17 '22 at 14:04

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');"/>

score 0 · Answer 2 · answered May 17 '22 at 14:11

This the answert

    @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('loadingImage_@i');"/>
                <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/>
                          

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

You have to have a javascript method to make photos visible. and yo must pass yor desired image id to that function

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

2 Answers2