Problems with Modal

Question

In my project I have kind of an image gallery. So far I upload the image and it is displayed on the page without any problem.

Only now I need, when clicking on the image, open me a modal with the image in a larger size. But I can’t do it dynamically, that is, when you click on a given image, the other data of that particular image appears in the modal. However, I cannot make this modal open dynamically.

I need to reference him in a way that is unique to a certain image, Can anyone help me ?

What I got is this:

Image Gallery

<!-- Portfolio Grid Section -->
<section id="portfolio" class="bg-light-gray">
<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center">
            <h2 class="section-heading">Portfolio</h2>
            <div class="line"></div>
        </div>
    </div>

    <div class="row">
        @foreach (var item in Model)
        {
            <div class="col-md-4 col-sm-6 portfolio-item">
                <a href="#portfolioModal" class="portfolio-link" data-toggle="modal">
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content"> <i class="fa fa-search-plus fa-3x"></i> </div>
                    </div>
                    <img src="@Html.DisplayFor(modelItem => item.Foto)" class="img-responsive" alt="" />
                </a>
                <div class="portfolio-caption">
                    <h4>@Html.DisplayFor(modelItem => item.Titulo)</h4>
                    <p class="text-muted">@Html.DisplayFor(modelItem => item.Descricao)</p>
                </div>
            </div>
        }
    </div>
</div>
</section>

Modal (which is not inside the foreach)

<!-- Portfolio Modals -->
<!-- Use the modals below to showcase details about your portfolio projects! -->
<!-- Portfolio Modal 1 -->
<div class="portfolio-modal modal fade" id="portfolioModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
    <div class="close-modal" data-dismiss="modal">
        <div class="lr">
            <div class="rl"> </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <div class="modal-body">
                    <!-- Project Details Go Here -->
                    <h2>@Html.DisplayFor(modelItem => item.Titulo)</h2>
                    <img src="@Html.DisplayFor(modelItem => item.Foto)" class="img-responsive" alt="" />
                    <p class="text-muted">@Html.DisplayFor(modelItem => item.Descricao)</p>

                    <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i>Fechar</button>
                </div>
            </div>
        </div>
    </div>
    </div>
   </div>

Answer 1

I built this example, using Ajax.Beginform, however I had to change a little its scope, I put the image as the background of a button ( I believe the layout is not the purpose of your question )

It will work the way you want, hardly changed the code, however I think the solution that the Gypsy suggested excellent ( better than my )!!

Controller:

  public class Imagem
  {
     public int ID { get; set; }
     public string Foto { get; set; }
     public string Titulo { get; set; }
     public string Descricao { get; set; }
  }
  public class ModalController : Controller
  {
     public List<Imagem> Imagens = new List<Imagem>();

     public ModalController()
     {
        for (int i = 0; i < 4; i++)
        {
           Imagens.Add(new Imagem { ID = i, Descricao = "descr" + i.ToString(), Titulo = "titu" + i.ToString(), Foto = "foto" + i.ToString() });
        }
     }

     public ActionResult Index(int id = 0)
     {
        if (Request.IsAjaxRequest())
        {
           return PartialView("_Index", Imagens.First(_ => _.ID == id));
        }
        return View(Imagens);
     }
  }

Your view:

  @model List<MVCApp.Controllers.Imagem>
  @using (Ajax.BeginForm(null, new AjaxOptions { UpdateTargetId = "replaceDiv", InsertionMode = InsertionMode.Replace, OnSuccess = "$('#portfolioModal').modal('show');" }))
  {
     foreach (var item in Model)
     {
        <button type="submit" name="ID" value="@item.ID" style="background-image: @Html.DisplayFor(modelItem => item.Foto)">
           <div class="col-md-4 col-sm-6 portfolio-item">
              <div class="portfolio-caption">
                 <h4>@Html.DisplayFor(modelItem => item.Titulo)</h4>
                 <p class="text-muted">@Html.DisplayFor(modelItem => item.Descricao)</p>
              </div>
           </div>
        </button>
     }
  }

  <div class="portfolio-modal modal fade" id="portfolioModal" tabindex="-1" role="dialog" aria-hidden="true">
     <div class="modal-content">
        <div class="close-modal" data-dismiss="modal">
           <div class="lr">
              <div class="rl"> </div>
           </div>
        </div>
        <div class="container">
           <div id="replaceDiv">
              <div class="progress">
                 <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                 </div>
              </div>
           </div>
        </div>
     </div>
  </div>

And you need to create a partial view "_Index.cshtml" :

  @model MVCApp.Controllers.Imagem
  <div class="row">
     <div class="col-lg-8 col-lg-offset-2">
        <div class="modal-body">
           <!-- Project Details Go Here -->
           <h2>@Html.DisplayFor(modelItem => modelItem.Titulo)</h2>
           <img src="@Html.DisplayFor(modelItem => modelItem.Foto)" class="img-responsive" alt="" />
           <p class="text-muted">@Html.DisplayFor(modelItem => modelItem.Descricao)</p>

           <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i>Fechar</button>
        </div>
     </div>
  </div>

Don’t forget to add the file :

 <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

Answer 2

Use a Lightbox plugin, such as Lightbox for MVC:

https://www.nuget.org/packages/jQuery.mvc.LightBox/

See examples of use here.