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

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> 

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

Благодаря

Answer 1

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

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

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

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

Answer 2

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

Примеры извлекают идентификатор из самой ячейки таблицы и включают его как часть имени файла изображения; но вы можете добавить атрибут в ячейку таблицы с полным 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 }); 
    }) 
}) 
})