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列设置为用户可以单击的链接。用户单击链接后，将在单击的id链接旁显示带有图像（用于id）的内联弹出对话框。任何人都可以帮我一个关于如何做这样的事情的例子吗？

由于

Answer 1

我设置了一个包含两个示例的演示页面。第一个表使用工具提示（将鼠标悬停在ID上）来显示图像，第二个表使用模态窗口（单击ID）来显示图像。该页面位于this pastebin。

示例从表格单元格中提取ID，并将其作为图像文件名的一部分包含在内;但您可以使用完整图像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

在这个答案中需要有很多代码，所以让我们来看看你应该做些什么来让它看起来无缝。

拥有一个带有ID的PartialView 作为模特。
然后局部视图获取该ID 并抓住图像数据库使用可能的由@Henry_Gao开出的技术。
抓住自己的jQuery模态对话框弹出窗口。
将PartialView放入模型中对话框并显示对话框关闭按钮。

简而言之，这些是步骤，每一步都可以单独编写并进行测试。

有很多jQuery插件可以处理图像，你可以在jQuery.com找到它们

在弹出对话框中显示数据库图像

2 个答案: