Question

我有一组用户在我们的ASP.NET MVC应用程序中上传的图片。

用户上传图像后，我将图像保存在Web UI项目的content / images文件夹中，并将文件名填充到List中，然后在partial view内的编辑器模板中呈现此对象。

我不确定为什么图像不会渲染，但以下是我的代码：

查看

<div class="bodyContent">
    @if (Model.RunEntryImagesDisplay != null && Model.RunEntryImagesDisplay.Count() > 0)
    {
        <span class="leftContent">
            @Html.Label("Images")
        </span><span class="rightContent"><span id="ImagesChildDialogLink" class="treeViewLink">
            Click here to View Images </span>
            <br />
            <span id="ImagesDisplayy"></span></span>
    }
</div>
<div id="Imagestreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
    overflow: scroll; width: 800px; height: 450px; display: none;">
    @if (Model.RunEntryImagesDisplay != null && Model.RunEntryImagesDisplay.Count() > 0)
    {
        @Html.EditorFor(x => x.RunEntryImagesDisplay)
    }
</div>

编辑模板

@model RunLog.Domain.Entities.RunLogEntryImagesDisplay
@Html.DisplayFor(x => x.FileStoredName, new { style = "width: 200px; height: 100px;" })
@Html.HiddenFor(x => x.FileStoredName)
@Html.DisplayFor(x => x.FileName, new { style = "width: 200px; height: 100px;" })
@Html.HiddenFor(x => x.FileName)
@Html.CheckBoxFor(x => x.Checked)
@Html.HiddenFor(x => x.Checked)
@Html.DisplayFor(x => x.FileExtension, new { style = "width: 200px; height: 100px;" })
@Html.HiddenFor(x => x.FileExtension)
<img src="@Url.Action("Image", Model.FileStoredName)" alt="Image" />

JS Modal Box

$(document).ready(function () {

    $('#ImagesChildDialogLink').click(function () {

        initImagesDailog();
    });


    function initImagesDailog() {
        var PartDialog;
        PartDialog = $("#Imagestreeview").dialog({ autoOpen: true, modal: false, resizable: true, draggable: true,
            stack: false, title: 'Parsed Test Exceptions', width: 1000, height: 400, buttons: { Close: function () {
                var btnText = '';
                $('.ui-dialog-buttonpane :button').each(function () {
                    if ($(this).text() == 'Close') {
                        btnText = 'Close';
                        $(this).text('Close');
                    }
                });
                if (btnText == 'Close') {
                    PartDialog.dialog("close");
                }
            }
            }
        });

        PartDialog.closest("div.ui-dialog").appendTo("#form");
    }

});

控制器动作以渲染图像

public ActionResult Image（string file） {

    //byte[] image = 
    string loadLististFileName = file;
    string fileNamePath = loadLististFileName;
    string fileName = Path.GetFileName(fileNamePath);
    string dirName = Path.GetDirectoryName(fileNamePath);

    var fileData = IOHelper.GetFileImageData(fileName, dirName);

    return File(fileData, "image/jpg");
}



public static byte[] GetFileImageData(this string fileName, string filePath)
{
    var fullFilePath = string.Format("{0}/{1}", filePath, fileName);
    if (!File.Exists(fullFilePath))
        throw new FileNotFoundException("The file does not exist.", fullFilePath);
    return File.ReadAllBytes(fullFilePath);
}

修改

我搞定了，我的编辑器模板名称与模型List属性不同。我甚至不需要使用动作图像来显示。刚使用了图像源标签。

Answer 1

我让它工作，我的编辑器模板，cshtml的名称与模型List属性的名称不同。我甚至不需要使用动作图像来显示。只是使用了图像源标签，它就像一个魅力。现在我将使用一个图片库插件，使用缩略图和所有好东西使它完美。 MVC非常触动木材。

如何在模式框中的视图中呈现图像集合

1 个答案: