c# - Display an image in a table row using Ajax/MVC -

cutting right chase, i've got in controller:

return base.file(getsomeimagebitmap, "image/jpeg");

which displays image fine in new window using @html.actionlink. however, want populate image directly table when link clicked. so, tried approach:

@ajax.actionlink("view", "image", "controller", new { id = t.id, id2 = t.id2},                      new ajaxoptions { updatetargetid = "myimage", httpmethod = "get" } <div id="myimage"></div> 

given t object in model array, approach has 2 downsides. first, displays un-encoded bitmap text, not image. second, populates data first div in table every time.

my next strategy create partialview , generate unique div ids can inserted using @ajax.actionlink, have no idea if can make work that.

finally, i've tried:

 <img src="@url.action("image", "controller", new { id = t.id, id2 = t.id2 })" alt="some image" /> 

which works perfectly, minus fact queries webservice 500 images @ once. can't have happen, want retrieve image when arbitrary link clicked. possible? jquery , ajax fair game.

edit: went following solution, supports hiding image well. lacks kind of loading text:

<img hidden src="" alt="no image" class="imagepreview" /> <script type="text/javascript">     // handle clicking view image link     $(".linkview").click(function (e) {         e.preventdefault();         // link being clicked         var _this = $(this);         // find closest imagepreview link         var image = _this.closest("tr").find("img.imagepreview");          if (image.is(':visible')) {             // if image visible, hide             _this.text("view");             image.hide();         } else {             // if image not visible, show             _this.text("hide");             image.show();              // if image src has not been set, set link href             // not clearing src attribute, can show/hide without loading image again             if (image.attr("src") == "") {                 image.attr("src", _this.attr("href"));             }         }     }); </script> 

the problem is, code going generate more 1 div id "myimage". not valid html. id values should unique.

i suggest use normal link , write 1 jquery code handle loading of image when link clicked.

 @html.actionlink("view", "image", "home",  new { id = t.id, id2 = t.id2},                                                                   new {@class="linkview"})  <img class="imagepreview"/> 

this render normal link css class linkview , and image tag css class imagepreview.

now listen click event on these link, prevent default click behavior ( navigating href value), update image src attribute.

you may use closest() method reference current table row (where link belongs ) , use find() method reference our image.

$(function(){     $(".linkview").click(function(e){         e.preventdefault();         var _this=$(this);         _this.closest("tr").find("img.imagepreview").attr("src",_this.attr("href"));     });  });