Display Database Image in a Popup Dialog

Question

Hi all,

I currently have a view which contains a table looks something like this:

<table> 
    <tr>
        <th>Id</th>
        <th>Name</th>
        .....
    <tr>
       <td>11233455</td>
       <td>Alex P Keaton</td>
    </tr>
    <tr>
       <td>1123455</td>
       <td>Jim Halpert</td>
    </tr>
    .....
</table>

What I would like to do is make the id column a link which a user can click. Once a user clicks on the link an inline popup dialog with an image (for the id) from the database is displayed next to the id link which was clicked. Can anyone help me with an example on how i can go about doing something like this?

Thanks

Answer 1

Here is the link to get image from.

http://forums.asp.net/p/1175131/1977241.aspx#1977241

popup tooltip link is here

http://www.walterzorn.com/tooltip/tooltip%5Fe.htm

Answer 2

There's a lot of code that needs to be in this answer so instead let's take a look at what you should do to make it look seamless.

1. Have a PartialView that takes an id as the model.
2. The partial view then takes that id and grabs the image from the database using possibly the technique outined by @Henry_Gao.
3. Grab yourself a jQuery Modal Dialog Popup.
4. Place the PartialView into the model dialog and display the dialog with a close button.

In a nutshell these are the steps and each can be written seperately and tested as such.

There are plenty of jQuery plugins that do images already and you can find them at jQuery.com

Answer 3

I set up a demo page with two examples. The first table uses tooltips (hover over the ID) to show the image and the second table uses a modal window (click the ID) to show the image. The page is in this pastebin.

The examples extract the ID from the table cell itself and include it as part of the image filename; but you could potentially add an attribute to the table cell with the full image URL. I made this simple for demo purposes.

Personally, I like the tooltip option which uses this jQuery Tooltip script.

$(document).ready(function(){
 // full URL example = http://i50.tinypic.com/9a8spk.jpg
 // The ID cell in this example would contain "50.tinypic.com/9a8spk"
 var imgPath = 'http://i';
 var fileType = '.jpg';
 $('table').find('tr').each(function(){
  var img = $(this).find('td:eq(0)');
  img.tooltip({
   bodyHandler: function() { 
    return $("<img/>").attr("src", imgPath + img.html() + fileType );
   },
   showURL: true 
  })
 })
})

But if you prefer, modal windows are another option:

$(document).ready(function(){
 var windowTitle = 'Image of user ID #';
 var windowWidth = 520;
 // full URL example = http://i50.tinypic.com/9a8spk.jpg
 // The ID cell in this example would contain "50.tinypic.com/9a8spk"
 var imgPath = 'http://i';
 var fileType = '.jpg';
 $('table').find('tr').each(function(){
  var img = $(this).find('td:eq(0)');
  img.click(function(){
   $('#dialog').remove();
   $('<div/>')
    .attr({ title: windowTitle + $(img).html(), id: 'dialog'})
    .html('<img src="' + imgPath + $(img).html() + fileType + '">')
    .appendTo('body');
   $("#dialog").dialog({ bgiframe: true, width: windowWidth });
  })
 })
})