Question

我将图像保存到SQL数据库。我的计划是在数据库中具有3个图像字段。我想要显示图像，并且能够单击图像以在新视图中显示实际图像-实际尺寸。我想我与代码很接近，但是当我单击图像时它什么也没做。有人可以看到任何错误吗？以下是代码。恭喜 SEB

查看：

    @model PBTIntranet.Models.Swap

@{
    ViewBag.Title = "Details";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style type="text/css">
    .thumb {
        max-width: 500px;
        max-height: 500px;
        width: expression(this.width > 100 ? "500px" : true);
        height: expression(this.height > 100 ? "500px" : true);
    }
</style>

<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
     $("img").click(function () {
     var src = $(this).attr("src");
     alert("it works!");
      $.ajax({
                type: "post",
                url: "/Swap/ShowImage",
                data: { "src": src},
                datatype: "json",
                cache: false,
                success: function () {
                    window.location.href = "/Swap/ShowImage";
                },
            });
 });
});
</script>

<h2>Details</h2>

<div>
    <h4>Swap Shop</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.Item)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Item)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Description)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Description)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Price)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Price)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.ContactInfo)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.ContactInfo)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Seller)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Seller)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.ExpireDate)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.ExpireDate)
        </dd>

        <dt>
            @*@Html.DisplayNameFor(model => model.Image)*@
        </dt>

        <dd>
            @if (@Model.Image != null)
            {
                string imageBase64 = Convert.ToBase64String(Model.Image);
                string imageSrc = string.Format("data:image/png;base64,{0}", imageBase64);
                <img class="thumb" src="@imageSrc" />
            }
        </dd>

    </dl>
</div>
<p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |
    @Html.ActionLink("Back to List", "Index")
</p>

控制器：

    public ActionResult ShowImage(string src)
    {
        string imageSrc = "";
        if (src != null)
        {
            Session["src"] = src;
        }
        imageSrc = Session["src"].ToString();
        return View((object)imageSrc);
    }

ShowImage：

@model PBTIntranet.Models.Swap

@{
    ViewBag.Title = "ShowImage";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ShowImage</title>
</head>
<body>
    <div>
        <img src="@Model" />
    </div>
</body>
</html>

Answer 1

您的 ShowImage 视图需要对象交换，但是我发现在控制器操作中，您传递了（不必要地）转换为对象的字符串。因此，当您通过AJAX发布数据时，会收到500 Internal Server Error，这是jQuery的AJAX将您显示为一般错误，没有任何有用的消息。（只需在控制台中查看，您将看到错误）。您的视图应定义为：

@model string
@{
    ViewBag.Title = "ShowImage";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ShowImage</title>
</head>
<body>
    <div>
        <img src="@Model" />
    </div>
</body>
</html>

请注意，更改位于第一行：

@model string

代替

@model PBTIntranet.Models.Swap

如果这不起作用，那么您可能还会遇到其他错误。如果确实可以解决您的问题，请别忘了投票。无论如何，请让我知道。

点击图片显示实际尺寸

1 个答案: