Retour de page partiel avec MVC

Question

Je suis assez nouveau à MVC et j'espère que j'approche de cette manière. Toute contribution ou conseil serait génial.

Je voudrais avoir une vue en miniature d'un chargement d'image normalement et quand un utilisateur clique sur l'image, l'image dynamique se charge en utilisant le plugin jquery colorbox.

Le problème est lorsque vous cliquez sur l'image plus petite, l'image dynamique devient la page entière. Je me rends compte que c'est à cause de l'endroit où le href pointe, mais j'ai besoin de quelques indications sur la façon correcte d'y parvenir.

<div id="gallery"> 

    <% For Each item In Model%> 

    <ul> 
     <li> 
      <a href="<%=Url.Action("CreateWM", "Image", New With {.id = item.ImageID })%>" title="Please work" rel="Test"> 
       <img src="<%=Url.Action("Create", "Image", New With {.id = item.ImageID })%>" width="300" height="300" alt="Woot" /> 
      </a> 
     </li> 
    </ul> 

    <% Next%> 

</div> 

Si quelqu'un en a besoin, c'est ImageController. Le ImageActionResult prend le flux de mémoire et de retourner l'image

Public Class ImageController 
    Inherits System.Web.Mvc.Controller 

    Public Function CreateWM(ByVal id As String) As ImageActionResult 

     Using db As New DataClasses1DataContext 
      Dim ms As New MemoryStream(db.MyImages.Single(Function(x) x.ImageID = id).ImageData.ToArray()) 
      Return New ImageActionResult(ms, "hey.jpg", True) 
     End Using 

    End Function 

    Public Function Create(ByVal id As String) As ImageActionResult 

     Using db As New DataClasses1DataContext 
      Dim ms As New MemoryStream(db.MyImages.Single(Function(x) x.ImageID = id).ImageData.ToArray()) 
      Return New ImageActionResult(ms, "hey.jpg", False) 
     End Using 

    End Function 

End Class 

Merci

Answer 1

Vous devez manipuler l'URL de l'élément d'image en utilisant javascript côté client, quelque chose comme:

<a href="#" onclick="$('#myImg')[0].src='<%=Url.Action("CreateWM", "Image", New With {.id = item.ImageID })%>'" title="Please work" rel="Test"> 
    <img id="myImg" src="<%=Url.Action("Create", "Image", New With {.id = item.ImageID })%>" width="300" height="300" alt="Woot" /> 
</a> 

Answer 2

Avec le plugin ColorBox que vous utilisez, vous pouvez spécifier la largeur/hauteur de l'image dynamique:

$('a.dynamicImage').colorbox({width: 75%, height: 75%});