Anzeige ein Bild in einer Tabellenzeile mit Ajax/MVC

Question

auf den Punkt Schneiden, ich so etwas wie dies in meinem Controller-habe:

return base.File(getSomeImageBitmap, "image/jpeg");

, das das Bild ganz gut in einem neuen Fenster angezeigt mit @Html.ActionLink. Ich möchte jedoch das Bild direkt in die Tabelle auffüllen, wenn auf eine Verknüpfung geklickt wird. Also habe ich versucht, diesen Ansatz:

@Ajax.ActionLink("View", "Image", "Controller", new { id = t.id, id2 = t.id2}, 
        new AjaxOptions { UpdateTargetId = "myImage", HttpMethod = "GET" } 
<div id="myImage"></div> 

Da t ist ein Objekt im Modell Array, ist dieser Ansatz zwei Nachteile hat. Zuerst wird die nicht codierte Bitmap als Text und nicht als Bild angezeigt. Zweitens füllt es jedes Mal die Daten in das erste Div in der Tabelle.

Meine nächste Strategie wird es sein, eine PartialView zu erstellen und eindeutige DIV-IDs zu generieren, so dass sie mit @Ajax.ActionLink eingefügt werden können, aber ich habe keine Ahnung, ob ich es so machen kann.

Schließlich habe ich versucht:

<img src="@Url.Action("Image", "Controller", new { id = t.id, id2 = t.id2 })" alt="Some Image" /> 

die einwandfrei funktioniert, abzüglich der Tatsache, dass es meine WebService fragt sofort für bis zu 500 Bilder alle. Ich kann das nicht haben, ich möchte nur das Bild abrufen, wenn ein beliebiger Link angeklickt wird. Ist das möglich? Jquery und Ajax sind alle faires Spiel.

EDIT: Ging mit der folgenden Lösung, die das Verbergen des Bildes unterstützt. Es fehlt nur jede Art von Ladetext:

<img hidden src="" alt="No Image" class="imagePreview" /> 
<script type="text/javascript"> 
    // Handle clicking the View image link 
    $(".linkView").click(function (e) { 
     e.preventDefault(); 
     // The link being clicked 
     var _this = $(this); 
     // Find the closest imagePreview to the link 
     var image = _this.closest("tr").find("img.imagePreview"); 

     if (image.is(':visible')) { 
      // If the image is visible, hide it 
      _this.text("View"); 
      image.hide(); 
     } else { 
      // If image is not visible, show it 
      _this.text("Hide"); 
      image.show(); 

      // If the image src has not been set, set it to the link href 
      // By not clearing the src attribute, we can show/hide without loading the image again 
      if (image.attr("src") == "") { 
       image.attr("src", _this.attr("href")); 
      } 
     } 
    }); 
</script> 

Answer 1

Das Problem ist, wird der Code mehr als ein div mit der ID „myImage“ erzeugen gehen. Das ist kein gültiges HTML. Id-Werte sollten eindeutig sein.

Ich schlage vor, Sie verwenden einen normalen Link und schreiben Sie Ihren einen jQuery-Code, um das Laden des Bildes zu handhaben, wenn der Link angeklickt wird.

@Html.ActionLink("View", "Image", "Home", new { id = t.id, id2 = t.id2}, 
                    new {@class="linkView"}) 
<img class="imagePreview"/> 

wird dies eine normale Verbindung mit CSS-Klasse macht linkView und und einen Image-Tag mit CSS-Klasse imagePreview.

Hören Sie sich jetzt das Ereignis click auf diesen Link an, verhindern Sie das Standardklickverhalten (navigieren Sie zum Wert href), aktualisieren Sie das Attribut image src.

Sie können die closest() Methode verwenden, um einen Verweis auf die aktuelle Tabellenzeile zu erhalten (wo die Verknüpfung gehört) und find() Methode verwenden, um einen Verweis auf unser Bild zu erhalten.

$(function(){ 

    $(".linkView").click(function(e){ 
     e.preventDefault(); 
     var _this=$(this); 
     _this.closest("tr").find("img.imagePreview").attr("src",_this.attr("href")); 

    }); 

});