Estoy tratando de configurar una función dentro de un bucle for dentro del archivo ac# cshtml. El propósito de esta función es mostrar las fotos al hacer clic en el botón para que los usuarios puedan verlas.
@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";}> </%> } }He leído que <%=> puede abrir una sección de javascript, pero parece que no funciona correctamente, probablemente debido a mi falta de sintaxis o al uso en el contexto incorrecto. Probé varios formatos diferentes, pero dejé el intento más reciente en la página para una cierta visualización. ¿Cómo puedo usar JS para ocultar/mostrar fotos seleccionando su ID? (u otro método si es más efectivo)
Para empezar, el código JavaScript va en un elemento <script> .
Aparte de eso, la lógica de lo que estás haciendo es un poco extraña. Considere que está generando este código en un bucle . Lo que significa que la página tendrá muchas versiones diferentes de una función llamada showImage , cada una sobreescribiendo la anterior. Entonces, solo se llamará al último.
Defina una función (probablemente en la parte inferior de la página, ciertamente no en un bucle) que realice la operación que desea y solicite la información necesaria para realizar esa operación. En este caso, esa información es la id del elemento de destino:
<script type="text/javascript"> function showImage(id) { document.getElementById(id).style.visibility="visible"; } </script> Luego, dentro del ciclo, puede invocar esa función, proporcionando los valores de id en consecuencia:
<input type="button" value="Show Button" onclick="showImage('loadingImage_@i');"/>Esta es la respuesta
@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>Tienes que tener un método javascript para hacer visibles las fotos. y debes pasar tu ID de imagen deseada a esa función