Question

我有一个Kendo Grid，其中一列实际上是一个打开弹出窗口以查看图像的链接。我能够恢复图像，但到目前为止我还没有成功。这是我到目前为止所拥有的 -

控制器 -

     public ActionResult OpenImagePopUp(int? id)
        {
            Help request2 = new Help();
            request2.id = id;
            var response = apiHelp.GetHelpRecords(request2);
            if (response.Error != null)
            {
                ErrorLogRequest errorReq = new ErrorLogRequest()
                {
                    LogDate = DateTime.Now,
                    LogMethod = "GetHelpRecords",
                    LogPage = "Canopy Help",
                    LogPerson = User.Identity.Name,
                    LogInfo = response.Error.ErrorCode + " " + response.Error.ErrorMessage + " " + response.Error.ExceptionObject.Message
                };
                apiErrorLog.InsertErrorLog(errorReq);
            }
            var helpRecords = response.data.Select(s => new Help()
            {
                Image = s.Image

            }).FirstOrDefault();

            var base64string = Convert.ToBase64String(helpRecords.Image);
            request2.ImgSrcBase64 = String.Format("data:image/gif;base64,{0}", base64string);
            return PartialView("ImagePopUp", request2);
        }

我的观点/ Javascript -

<div>
    @(Html.Kendo().Window()
        .Name("ImagePopUp")
        //.LoadContentFrom("OpenPopUpWindow", "BlueButtonView")
        .Draggable()
        .Actions(actions => actions.Close())
        .Modal(true).Visible(false)
        .HtmlAttributes(new { style = "margin: 10px" })
        .LoadContentFrom("OpenImagePopUp", "Help")
    .Draggable()
    .Resizable()
    .Width(600)
    .Actions(actions => actions.Close())
    )

</div>

function showImage(e) {
        var grid = $("#CanopyHelpGrid").getKendoGrid();
        var item = grid.dataItem($(e.target).closest("tr"));

        $("#ImagePopUp").data("kendoWindow").open().center(true);
        $.ajax({
            datatype: "image",
            type: "GET",
            url: '@Url.Action("OpenImagePopUp", "Help")',
            data: { id: item.id },
            success: function (data) {
                //$("#imgPopUp").attr('src', data);
            }
        })
    }

然后我的部分观点 -

@model OSH.Domain.Models.CanopyHelp.Help

<img id="imgPopUp" alt="Image" src='@Model.ImgSrcBase64'>

我尝试将数组转换为base64字符串，然后将其格式化为图像源，但我一直看不到图像。

Answer 1

正如斯蒂芬所建议的那样，将这个添加到我的ajax解决了这个问题！

$.ajax({
    datatype: "html",
    type: "GET",
    url: '@Url.Action("OpenImagePopUp", "Help")',
    data: { id: item.id },
    success: function (html) {

        $("#ImagePopUp").html(html);
        $("#ImagePopUp").data("kendoWindow").open().center(true);
    }
})

我还让我的控制器返回html内容，并在部分视图中删除了图像标记 -

public ActionResult OpenImagePopUp(int? id)
        {
            if (id != null)
            {
                string html = string.Empty;
                Help request2 = new Help();
                request2.id = id;
                var response = apiHelp.GetHelpRecords(request2);
                if (response.Error != null)
                {
                    ErrorLogRequest errorReq = new ErrorLogRequest()
                    {
                        LogDate = DateTime.Now,
                        LogMethod = "GetHelpRecords",
                        LogPage = "Canopy Help",
                        LogPerson = User.Identity.Name,
                        LogInfo = response.Error.ErrorCode + " " + response.Error.ErrorMessage + " " + response.Error.ExceptionObject.Message
                    };
                    apiErrorLog.InsertErrorLog(errorReq);
                }
                var helpRecords = response.data.Select(s => new Help()
                {
                    id = s.id,
                    Image = s.Image

                }).Where(w => w.id == id).FirstOrDefault();

                if (helpRecords.Image != null)
                {
                    var base64string = Convert.ToBase64String(helpRecords.Image);
                    request2.ImgSrcBase64 = string.Format("data:image/gif;base64,{0}", base64string);

                    html = string.Format("<img id='imgPopUp' src='{0}' alt='Image'/>", request2.ImgSrcBase64);

                    return Content(html, "text/html");
                }
                else
                {
                    html = "<h4>This record has no image attached!</h4>";
                    return Content(html, "text/html");
                }
            }
            else return new EmptyResult();
        }

MVC部分视图不显示图像

1 个答案: