Asp.net mvc 在模式引导窗口中显示数据库中的图像

我正在使用ASP.NETMVC5和Bootstrap3 我有以下观点

@model WilhanWebsite.Models.PhotoViewModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Gallery</h2>

<p>
    @Html.ActionLink("Upload Photo", "Create")

    <br/>


    @for (var i = 0; i < Model.DownloadedImages.Count; i++)
    {
        <a data-toggle="modal" data-target="#img-thumbnail@i" class="img_modal" href="data:image/jpg;base64,@(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))">
            <img id="img-thumbnail@i"  class="img-thumbnail" src="data:image/jpg;base64,@(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))" alt="@Model.DownloadedImages[i].Description" />
        </a>
    }

    <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Title to go here</h3>
        </div>
        <div class="modal-body">
            <img id="modal_img_target">
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
    </div>

</p>

@model-WilhanWebsite.Models.PhotoViewModel
@{
ViewBag.Title=“Index”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
画廊

@ActionLink（“上传照片”、“创建”）


@对于（var i=0；i

您需要将切换和目标添加到链接：

 @model WilhanWebsite.Models.PhotoViewModel
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Gallery</h2>

<p>
    @Html.ActionLink("Upload Photo", "Create")

    <br/>


    @for (var i = 0; i < Model.DownloadedImages.Count; i++)
    {
        <a data-toggle="modal" data-target="#img-thumbnail@i" class="img_modal" href="data:image/jpg;base64,@(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))">
            <img id="img-thumbnail@i"  class="img-thumbnail" src="data:image/jpg;base64,@(Convert.ToBase64String(Model.DownloadedImages[i].ImageData))" alt="@Model.DownloadedImages[i].Description" />
        </a>
    }

    <div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Title to go here</h3>
        </div>
        <div class="modal-body">
            <img id="modal_img_target">
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        </div>
    </div>

</p>


<script type="text/javascript">
    $('.img_modal').on('click', function (e) {
        e.preventDefault();
        $("#modal_img_target").attr("src", this);
        $("#modal").removeClass("hide");
        $('#modal').modal('show');
    });
</script>

}

问题在于jquery，因为您正确获取了“#modal_img_target”src值。onClick事件正在隐藏图像

试试这个：-

<img id="img-thumbnail1" class="img-thumbnail" 

$（'.img_modal'）。在（'click'，函数（e）上{
e、 预防默认值（）；
美元（“#模态img_目标”）.attr（“src”，本）；
$（“#模态”）.removeClass（“隐藏”）；
$（'#model'）。model（'show'）；
});

将这两个答案结合在一起，我现在可以看到这个视图了。非常感谢。

<img id="img-thumbnail1" class="img-thumbnail" 

@for (var i = 0; i < Model.DownloadedImages.Count; i++)
{
    <a data-toggle="modal" data-target="#img-thumbnail@i" class="img_modal" href="data:image/jpg;base64,@(Convert.ToBase64String(photo.ImageData))">
        <img id="img-thumbnail@i"  class="img-thumbnail" src="data:image/jpg;base64,@(Convert.ToBase64String(photo.ImageData))" alt="@photo.Description" />
    </a>
}

<script type="text/javascript">
    $('.img_modal').on('click', function (e) {
        e.preventDefault();
        $("#modal_img_target").attr("src", this);
        $("#modal").removeClass("hide");
        $('#modal').modal('show');
    });
</script>