0

ユーザーがアプリケーションにアップロードする画像のコレクションがありASP.NET MVCます。

ユーザーが画像をアップロードしたら、画像を Web UI プロジェクトの content/images フォルダーに保存し、ファイル名を List に入力してから、このオブジェクトを .xml 内のエディター テンプレートでレンダリングします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モーダルボックス

$(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(文字列ファイル) {

    //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 プロパティのものと同じではありませんでした。アクション画像を表示する必要さえありませんでした。画像ソースタグを使用しました。

4

1 に答える 1

0

私はそれを機能させました、私のエディターテンプレート、cshtmlの名前はモデルのListプロパティと同じではありませんでした。アクション画像を表示する必要さえありませんでした。画像ソースタグを使用しただけで、魅力的に機能します。次に、画像ギャラリー プラグインを使用して、サムネイルなどの優れた機能を使って全体をきれいにします。MVCはとても手触りの良い木材です。

于 2013-10-01T05:27:38.150 に答える