C# 中的函数 for 在 Razor 页面中循环到 hide/unhide 张照片

Question

我正在尝试在 c# cshtml 文件的 for 循环内设置一个函数。此功能的目的是在单击按钮时取消隐藏照片，以便用户可以看到它们。

            @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";}> </%>

                }
            }

我读到 <%=> 可以打开 javascript 部分，但它似乎无法正常工作，这可能是因为我缺少语法或在错误的上下文中使用它。我尝试了几种不同的格式，但将最近的尝试留在了页面上以进行一些可视化。如何通过选择 ID 使用 JS 来 hide/unhide 照片？（或其他更有效的方法）

Answer 1

对于初学者来说，JavaScript 代码放在 <script> 元素中。

除此之外，您所做的事情的逻辑有点奇怪。假设您正在循环 中输出此代码 。这意味着页面将有许多不同版本的函数 showImage，每个版本 over-writing 都是前一个。所以实际上只有最后一个会被调用。

定义一个函数（可能在页面的底部，当然不是在循环中）执行你想要的操作，并让它需要它需要执行的任何信息那个操作。在这种情况下，信息是目标元素的 id：

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

然后在循环中您可以调用该函数，相应地提供 id 值：

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

Answer 2

这就是答案

    @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>

您必须有一个 javascript 方法才能使照片可见。你必须将你想要的图像 ID 传递给该函数

C# 中的函数 for 在 Razor 页面中循环到 hide/unhide 张照片

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

javascript

c#

razor