Динамическое заполнение ссылки onclick url на основе поля из цикла foreach - галерея изображений

ProgramBox

Динамическое заполнение ссылки onclick url на основе поля из цикла foreach — галерея изображений

Post author:admin
Запись опубликована:19 марта, 2023
Post category:Вопросы по программированию

#asp.net-mvc #image #button #gallery

#asp.net-mvc #изображение #кнопка #Галерея

Вопрос:

В моем приложении mvc у меня следующий вид

 @model ProjectExplorer.Web.ViewModels.ProjectDetailViewModel
@{
}
<section id="imagery">
    <h3>Project Imagery</h3>
    @if (@Model.OpenAssetImagesVm.OpenAssetImages.Any())
    {
        <a href="@Model.OpenAssetImagesVm.OpenAssetProjectURL" target="_blank">Click here to find, share and download more digital assets</a>
    }
    <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
        <!-- The container for the modal slides -->
        <div class="slides"></div>
        <!-- The modal dialog, which will be used to wrap the lightbox content -->
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-hidden="true">amp;times;</button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body next" style="max-height: 500px; min-height: 400px;"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left prev">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                            Previous
                        </button>
                        <button type="button" class="btn btn-primary" onclick="location.href = '@Model.OpenAssetImagesVm.OpenAssetProjectURL';">
                            Info
                            <i class="glyphicon glyphicon-download-alt"></i>
                        </button>
                        <button type="button" class="btn btn-primary next">
                            Next
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if (Model.OpenAssetImagesVm.OpenAssetImages.Any())
    {
        <div style="margin-top: 17px;">
            <div id="links">
                @foreach (var item in Model.OpenAssetImagesVm.OpenAssetImages)
                {
                    <a href="@item.URL" title="@item.FileName" data-gallery>
                        <img src="@item.Thumbnail" alt="@item.FileName" class="img-thumbnail" style="margin-bottom:7px;" />
                    </a>
                }
            </div>
        </div>
    }
    else
    {
        <p>There are no images assigned to this project in OpenAsset.</p>
    }
    <div>
        @{
            var grid = new WebGrid(
                        canPage: false,
                        canSort: false,
                        ajaxUpdateContainerId: "grid");

            grid.Bind(Model.OpenAssetImagesVm.OpenAssetImages, autoSortAndPage: false);

            @grid.GetHtml(htmlAttributes: new { id = "grid" },
            fillEmptyRows: false,
            mode: WebGridPagerModes.All,
            columns: grid.Columns());
        }
    </div>
</section>

Я хочу, чтобы строка ниже указывала на поле в моей модели.Откройте assetimagesvm.OpenAssetImages использует класс с именем InfoURL вместо OpenAssetProjectURL.

 <button type="button" class="btn btn-primary" onclick="location.href = '@Model.OpenAssetImagesVm.OpenAssetProjectURL';">

Я не уверен, как динамически задавать URL-адрес, на который указывает кнопка, на основе значения из цикла foreach.

У меня есть галерея изображений (см. Ссылку Ниже), в которой я хочу, чтобы кнопка Info указывала на ссылку, основанную на отображаемом изображении, вместо общей ссылки, как у меня в приведенном выше коде просмотра. Изображение галереи изображений и кнопки, которые я пытаюсь установить, если это поможет, я использую галерею blueimp.

Любая помощь приветствуется.

Редактировать: надеюсь, дополнительная информация поможет. Когда страница открывается, она загружает все изображения на страницу в веб-сетку. Когда пользователь щелкает по изображению, открывается модальное окно, и пользователь может щелкнуть по изображениям. У меня есть кнопка info, которая будет ссылаться на другую страницу, уникальную для каждого изображения.

Основываясь на предложениях Джеймса, это текущее представление. Я также добавил визуальный вывод ссылок, которые я хочу использовать, и текущее значение i. В настоящее время вывод в цикле foreach корректен, но при открытии модального он по-прежнему получает только первую информацию.

 @model ProjectExplorer.Web.ViewModels.ProjectDetailViewModel
@{
    int i = 0;
}
<section id="imagery">
    <h3>Project Imagery</h3>
    @if (@Model.OpenAssetImagesVm.OpenAssetImages.Any())
    {
        <a href="@Model.OpenAssetImagesVm.OpenAssetProjectURL" target="_blank">Click here to find, share and download more digital assets</a>
    }
    <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
        <!-- The container for the modal slides -->
        <div class="slides"></div>
        <!-- The modal dialog, which will be used to wrap the lightbox content -->
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-hidden="true">amp;times;</button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body next" style="max-height: 500px; min-height: 400px;"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left prev">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                            Previous
                        </button>
                        <button type="button" class="btn btn-primary" onclick="location.href = '@Model.OpenAssetImagesVm.OpenAssetImages[i].InfoURL'";>
                            Info
                            <i class="glyphicon glyphicon-download-alt"></i>
                        </button>
                        <button type="button" class="btn btn-primary next">
                            Next
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if (Model.OpenAssetImagesVm.OpenAssetImages.Any())
    {
        <div style="margin-top: 17px;">
            <div id="links">
                @foreach (var item in Model.OpenAssetImagesVm.OpenAssetImages)
                {
                    <a href="@item.URL" title="@item.FileName" data-gallery>
                        <img src="@item.Thumbnail" alt="@item.FileName" class="img-thumbnail" style="margin-bottom:7px;" />
                    </a>
                    <p>@item.InfoURL</p>
                    <p>@i  </p>
                    i  ;

                }
            </div>
        </div>
    }
    else
    {
        <p>There are no images assigned to this project in OpenAsset.</p>
    }
    <div>
        @{
            var grid = new WebGrid(
                        canPage: false,
                        canSort: false,
                        ajaxUpdateContainerId: "grid");

            grid.Bind(Model.OpenAssetImagesVm.OpenAssetImages, autoSortAndPage: false);

            @grid.GetHtml(htmlAttributes: new { id = "grid" },
            fillEmptyRows: false,
            mode: WebGridPagerModes.All,
            columns: grid.Columns());
        }
    </div>
</section>

1. Пожалуйста, обратите внимание, что тег model-view-controller предназначен для вопросов о шаблоне. Для реализации ASP.NET-MVC существует специальный тег.

2. @Courtney Ammons — является InfoURL ли значение одинаковым для значения для каждого элемента Model.OpenAssetImagesVm.OpenAssetImages и каков его тип? Если это то же самое, вы можете использовать индекс — например location.href = '@Model.OpenAssetImagesVm.OpenAssetImages[0].InfoURL'

3. Или вы могли бы использовать для изменения текущего ViewBag InfoURL

4. @JamesP Я смог использовать предложенный вами вариант индексации. Отлично сработало! Чтобы ответить на заданные вами вопросы, InfoURL — это поле, используемое во всех изображениях, и представляет собой строковое значение. Я использовал точный фрагмент кода, который вы предоставили, и это сработало как шарм. Я не уверен, как пометить комментарии в качестве ответа, чтобы предоставить вам оценку за ответ.

5. @JamesP Я только что заметил, что он ищет только первое изображение в списке. Когда я выбираю другое изображение, оно по-прежнему использует информацию первого изображения. Как мне заставить его подбирать различную информацию для каждого изображения?

Ответ №1:

Как указано выше, использование @Model.OpenAssetImagesVm.OpenAssetImages[0].InfoURL будет привязываться только к первому элементу в коллекции — элементу в позиции 0.

Таким образом, вы можете объявить переменную в своем представлении @{ int i = 0; }

Затем используйте это для доступа к требуемому индексу:

 @Model.OpenAssetImagesVm.OpenAssetImages[i].InfoURL

Затем увеличивайте его по мере выполнения цикла:

 @foreach (var item in Model.OpenAssetImagesVm.OpenAssetImages)
{
    <a href="@item.URL" title="@item.FileName" data-gallery>
       <img src="@item.Thumbnail" alt="@item.FileName" class="img-thumbnail" style="margin-bottom:7px;" />
    </a>
    @i  ;
}

Затем это будет соответствовать нужному вам индексу, например, 0 для первого элемента, 1 для второго и т.д.

Надеюсь, это имеет смысл? Если нет, завтра объясню подробнее. Теперь время истекло.

1. Возможно, у меня было больше разъяснений. Я внес изменения, которые вы отметили выше, и они по-прежнему всегда указывают на ссылку с первого изображения. Я добавил визуальный вывод для текущей ссылки и вывод i на экран, и, похоже, все работает, но i, что модальное резервное копирование, похоже, всегда было инициализацией i 0. Не похоже, что когда я нажимаю, чтобы вызвать модальное, новое значение i равноподобрал

2. Я не совсем понимаю, как заполняется модальный?