Функция внутри цикла C# for внутри Razor Page для скрытия/отображения фотографий

Я пытаюсь установить функцию внутри цикла for в файле С# cshtml. Цель этой функции — отображать фотографии при нажатии кнопки, чтобы пользователи могли их видеть.

            @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, но, похоже, он работает неправильно, вероятно, из-за моего отсутствующего синтаксиса или его использования в неправильном контексте. Я пробовал несколько разных форматов, но оставил самую последнюю попытку на странице для некоторой визуализации. Как я могу использовать JS, чтобы скрыть/показать фотографии, выбрав их идентификатор? (или другой метод, если он более эффективен)

Я думаю, вы комбинируете синтаксис WebForms и Razor.

gunr2171 17.05.2022 15:36
"Я читал, что <%=> может открыть раздел javascript" - Где вы это прочитали? Я бы ожидал элемент <script> для кода JavaScript.
David 17.05.2022 15:38

Отвечает ли это на ваш вопрос? Смешайте код Razor и Javascript

gunr2171 17.05.2022 15:39

Фотографии хранятся в определенном месте. Будет ли этот текстовый/Javascript-тег по существу заменять div или содержаться внутри div, чтобы обеспечить определенное размещение на странице? Если да, то это именно тот ответ.

HankMorgan 17.05.2022 15:46

@ Дэвид, я больше не вижу, где я нашел это предложение. Я, наверное, теряюсь, ха-ха. Обычно я всегда использую скрипт, но я не мог поместить простой <script сам по себе>. Мой тег div также не одобрял скрипт внутри него. Я бы не ожидал, что это произойдет, поскольку обычно мой основной <script> находится внизу с эталонными сценариями, такими как jquery cnds, в голове. Я просто пытался посмотреть, смогу ли я делать что-то таким образом и повторять количество моделей.

HankMorgan 17.05.2022 15:53

@HankMorgan: Честно говоря, похоже, что вам, возможно, нужно сделать шаг назад и посмотреть на общую картину страницы в целом. Во-первых, даже если вы замените это на элемент <script>, вы выведете этот элемент в цикле и будете переопределять функцию с именем showImage снова и снова. Таким образом, будет использоваться только последний.

David 17.05.2022 15:55

@HankMorgan: Возможно, вы могли бы определить одну функцию showImage в JavaScript для страницы, и эта функция принимала бы в качестве параметра id элемента, на который она нацелена. Затем в этом цикле ваши вызовы этой функции будут включать это значение id.

David 17.05.2022 15:57

Да спасибо. Это сработало, когда я попробовал это

HankMorgan 17.05.2022 16:06
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
0
8
23
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Для начала код JavaScript помещается в элемент <script>.

Кроме того, логика того, что вы делаете, немного странная. Учтите, что вы выводите этот код в петле. Это означает, что на странице будет много разных версий функции под названием showImage, каждая из которых перезапишет предыдущую. Таким образом, на самом деле будет вызван только последний.

Определите функцию один (вероятно, внизу страницы, конечно, не в цикле), которая выполняет нужную вам операцию, и дайте ей запросить любую информацию, необходимую для выполнения этой операции. В данном случае эта информация является 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');"/>

Это ответ

    @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, чтобы сделать фотографии видимыми. и вы должны передать желаемый идентификатор изображения этой функции

Другие вопросы по теме