Partielle Seite zurück mit MVC

Question

Ich bin ziemlich neu in MVC und hoffe, dass ich das auf die richtige Weise nähert. Jede Eingabe oder Beratung wäre großartig.

Ich möchte eine Miniaturansicht eines Bildes normal laden und wenn ein Benutzer auf das Bild klickt, lädt das dynamische Bild mit dem Colombox jquery Plugin.

Das Problem ist, wenn Sie auf das kleinere Bild klicken, wird das dynamische Bild die gesamte Seite. Ich erkenne es aufgrund dessen, wo der href hinweist, aber ich brauche ein paar Hinweise, wie man das richtig macht.

<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> 

Falls jemand es braucht, ist dies der ImageController. Die ImageActionResult nimmt den Speicherstrom und Rückführen des Bild

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 

Dank

Answer 1

Sie benötigen die URL des Bildelement mit Client-Seite JavaScript aktivieren, so etwas wie zu manipulieren:

<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

Mit dem von Ihnen verwendeten ColorBox-Plugin können Sie die Breite/Höhe des dynamischen Bildes festlegen:

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