Question

切入追逐，我的控制器中有这样的东西：

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

使用@Html.ActionLink在新窗口中显示图像。但是，我想在单击链接时将图像直接填充到表中。所以，我尝试了这种方法：

@Ajax.ActionLink("View", "Image", "Controller", new { id = t.id, id2 = t.id2}, 
                    new AjaxOptions { UpdateTargetId = "myImage", HttpMethod = "GET" }
<div id="myImage"></div>

鉴于t是模型数组中的一个对象，这种方法有两个缺点。首先，它将未编码的位图显示为文本，而不是图像。其次，它每次都会将数据填充到表格的第一个div中。

我的下一个策略是创建一个PartialView并生成唯一的DIV ID，以便可以使用@Ajax.ActionLink插入它们，但我不知道是否可以让它像那样工作。

最后，我试过了：

 <img src="@Url.Action("Image", "Controller", new { id = t.id, id2 = t.id2 })" alt="Some Image" />

完美无缺，减去了它一次向我的网络服务查询多达500张图像的事实。我不可能发生这种情况，我只想在点击某个任意链接时检索图像。这可能吗？ Jquery和Ajax都是公平的游戏。

编辑：使用以下解决方案，它也支持隐藏图像。它只缺少任何加载文本：

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

Answer 1

问题是，你的代码将生成多个具有id＆＃34; myImage＆＃34;的div。这不是有效的HTML。 Id值应该是唯一的。

我建议您使用普通链接编写一个jQuery代码，以便在单击链接时处理图像的加载。

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

这将呈现与css类linkView的正常链接以及带有css类imagePreview的图像标记。

现在在这些链接上收听click事件，防止默认点击行为（导航到href值），更新图像src属性。

您可以使用closest()方法获取对当前表行（链接所属的位置）的引用，并使用find()方法获取对图像的引用。

$(function(){

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

   });

});

使用Ajax / MVC在表行中显示图像

1 个答案: