[RESOLVED]Create new Id for each image link on the Image-List page and access them in jquery function in _Layout page

I am trying to open an image in a new window, from a page with list of images.

    @if (Model.Image != null)
            {
                <a id="ImgLink" data-assigned-id="@Model.ProjectID"><img class="img-thumbnail" style=" width:180px; height:180px;" src='@Url.Action("GetImage", "Project", new { Model.ProjectID })' /></a>

            }

trying to open a new window using jquery in Layout page

<script type="text/javascript">
      $(document).ready(function () {
          
          $('#ImgLink').on('click', function () {
              var id = $(this).data('assigned-id');
        window.open('/Project/ImagePartial?projectId='+id, '_blank', 'left=100,top=100,width=400,height=300,toolbar=1,resizable=0');
    });
    });</script>

The problem is the List page loops through each image project and its creating multiple Images with same Id -" ImgLink". So my very first image works as desired but none after that. How can I assign different ids to each
image on the List page and then access them in jquery?

Thanks,

Rose

a id='@string.Format("ImgLink{0}",Model.ProjectID)' data-...

Leave a Reply