Динамически заполнить OnClick ссылки URL-адреса, основанную на поле из цикла Еогеаспа - галереи изображений

Question

Я следующий вида в моем приложении 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">&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> 

Я хочу следующая строку, чтобы указать на поле в моем Model.OpenAssetImagesVm.OpenAssetImages класс с именем InfoURL вместо OpenAssetProjectURL.

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

Я не уверен, как динамически установить URL кнопку, указывающая на основе значения из цикла Еогеаспа.

У меня есть галерея изображений (см. Ссылку ниже), что я хочу, чтобы кнопка «Информация» указывала на ссылку на основе изображения, которое отображается вместо общей ссылки, как у меня есть в приведенном выше коде представления. Image of the image gallery and button I am trying to set Если это помогает, я использую галерею blueimp.

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

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

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

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

Answer 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 для второго и т.д.

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