CODEWITHSUNDEEP
c#jqueryajaxasp.net-mvcrazor
Jtaylorapps
Jtaylorapps

Reputation: 5770

Display an image in a table row using Ajax/MVC

Cutting right to the chase, I've got something like this in my Controller:

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

Which displays the image just fine in a new window using @Html.ActionLink. However, I want to populate the image directly into the table when a link is clicked. So, I tried this 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 is an object in the Model Array, this approach has two downsides. First, it displays the un-encoded bitmap as text, not an image. Second, it populates the data into the first div in the table every time.

My next strategy will be to create a PartialView and generate unique DIV ids so they can be inserted using @Ajax.ActionLink, but I have no idea if I can make it work like 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 the fact that it queries my webservice for up to 500 images all at once. I can't have that happen, I only want to retrieve the image when some arbitrary link is clicked. Is this possible? Jquery and Ajax are all fair game.

EDIT: Went with the following solution, which supports hiding the image as well. It only lacks any kind of loading text:

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

Upvotes: 0

Views: 1213

Answers (1)

Shyju
Shyju

Reputation: 218722

The problem is, your code is going to generate more than one div with id "myImage". that is not valid HTML. Id values should be unique.

I suggest you use a normal link and write your one jQuery code to handle the loading of the image when the link is clicked.

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

This will render a normal link with css class linkView and and an image tag with css class imagePreview.

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

You may use the closest() method to get a reference to the current table row (where the link belongs to ) and use find() method to get a reference to our image.

$(function(){

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

   });

});

Upvotes: 1

Related Questions