Показать изображение базы данных во всплывающем диалоге

Question

В настоящее время у меня есть представление, которое содержит таблицу, выглядит примерно так:

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

Что я хотел бы сделать, так это сделать столбец идентификаторов ссылкой, по которой пользователь может щелкнуть. Как только пользователь нажимает на ссылку, рядом со ссылкой, по которой щелкнули по ссылке, отображается всплывающее диалоговое окно с изображением (для идентификатора) из базы данных. Может кто-нибудь помочь мне с примером того, как я могу сделать что-то подобное?

Спасибо

Answer 1

Я создал демонстрационную страницу с двумя примерами. Первая таблица использует всплывающие подсказки (наведите курсор на идентификатор), чтобы отобразить изображение, а вторая таблица использует модальное окно (щелкните идентификатор), чтобы показать изображение. Страница находится в этой вставке .

Примеры извлекают идентификатор из самой ячейки таблицы и включают его как часть имени файла изображения; но вы могли бы потенциально добавить атрибут в ячейку таблицы с полным URL-адресом изображения. Я сделал это просто для демонстрационных целей.

Лично мне нравится опция всплывающей подсказки, которая использует этот jQuery Tooltip сценарий.

$(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 
  })
 })
})

Но если вы предпочитаете, модальные окна - это еще один вариант:

$(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 });
  })
 })
})

Answer 2

В этом ответе должно быть много кода, поэтому давайте посмотрим, что нужно сделать, чтобы он выглядел безупречно.

1. Иметь PartialView, который принимает идентификатор как модель.
2. Частичное представление затем принимает этот идентификатор и берет изображение с база данных с использованием, возможно, техника, разработанная @ Henry_Gao.
3. Возьмите модальный диалог jQuery Popup.
4. Поместите PartialView в модель диалог и отображать диалог с кнопка закрытия.

В двух словах, это шаги, и каждый из них может быть написан отдельно и проверен как таковой.

Существует множество плагинов jQuery, которые уже создают изображения, и вы можете найти их на jQuery.com