c# - 无法将图像加载到编辑视图中的部分视图

问题描述

在我的应用程序中，以前我在将数据加载到局部视图时遇到了问题。在帮助下，我解决了这个问题。但是这里仍然存在一些问题。现在，当创建请求时，我使用这个局部视图为用户添加数据和图像。

@model Asp_PASMVC.Models.GeneralItms
@using Asp_PASMVC.Infrastructure

@{ 
    var z = Model.Attachment_Description;
    var a = Model.Attachment_Amount;
    var x = Model.Attachment;
}

<li style="padding-bottom:15px">


    @using (Html.BeginCollectionItem("GeneralItmsList"))
    {
        @Html.HiddenFor(model => model.TempID)
        <div class="form-horizontal" id="quickForm" novalidate="novalidate">

            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            <div class="row">
                <div class="col-md-5 col-sm-6">
                    <div class="form-group">
                        Select Item Description
                        <div class="col-md-10">
                            @Html.EditorFor(model => model.Attachment_Description, new { htmlAttributes = new { @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Attachment_Description, "", new { @class = "text-danger" })

                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="form-group">
                        Attachment Amount
                        <div class="col-md-10">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Rs.</span>

                                @Html.EditorFor(model => model.Attachment_Amount, new { htmlAttributes = new { @class = "form-control" } })
                            </div>
                            @Html.ValidationMessageFor(model => model.Attachment_Amount, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-sm-6">
                    <div class="form-group">
                        Attachment
                        <div class="col-md-10">
                            <input type="file" name="ImageData@(Model.TempID.ToString())" id="ImageData@(Model.TempID.ToString())" multiple="multiple" data-id="Img@(Model.TempID.ToString())" onchange="checkImage(this)" />
                            @Html.ValidationMessageFor(model => model.Attachment, "", new { @class = "text-danger" })
                        </div>
                    </div>
                    <img id="Img@(Model.TempID.ToString())" src="" alt="" width="100" height="100" class="ml-1" />
                </div>
                <button type="button" class="btn btn-danger" onclick="$(this).parent().remove();">Remove</button>
            </div>

        </div>

    }
</li>

<script type="text/javascript">

    $('.js-dropdown').select2({
        width: '100%', // need to override the changed default
    });
    function checkImage(obj) {
        var fileExtension = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
        var ResponceImgId = $(obj).data('id');
        if ($.inArray($(obj).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
            alert('error', 'Upload Error', 'Only .jpeg, .jpg, .png, .gif, .bmp formats are allowed.');
      }
        else {
            var files = obj.files;
            var reader = new FileReader();
            name = obj.value;
            reader.onload = function (e) {
                $('#' + ResponceImgId).prop('src', e.target.result);
            };
            reader.readAsDataURL(files[0]);
        }
    }

</script>

在控制器中创建请求时，我有这样的代码

if (appRequest.GeneralItmsList != null)
 {
   foreach (GeneralItms item in appRequest.GeneralItmsList)
    {
     HttpPostedFileBase file = Request.Files["ImageData" + item.TempID];
     item.Attachment = ConvertToBytes(file);
    }

  appRequest.General = new List<General>() 
    {
      new General
       {
        GeneralItms = appRequest.GeneralItmsList,

       }
    };
}

该方法会将图像转换为字节并传递给控制器以提交数据。

public ActionResult RetrieveImageG(int id)
 {
   var q = from temp in db.GeneralItms where temp.Id == id select temp.Attachment;
    byte[] cover = q.First();
     if (cover != null)
      {
        return File(cover, "image/jpg");
      }
       else
      {
        return null;
      }
 }

所以克里特岛工作正常，当在编辑视图中时，我再次调用相同的局部视图来加载编辑主视图中的数据。

它有3个字段。项目描述、金额和附件。所以它正在正确加载项目描述和数量，它不会再次加载图像。在我提出的部分观点中

@{ 
    var z = Model.Attachment_Description;
    var a = Model.Attachment_Amount;
    var x = Model.Attachment;
}

要检查的是传递给视图的数据。附件显示在 Model.Attachment 中。但它不会显示在视图中。我能得到这方面的帮助吗？

标签： c#asp.netasp.net-mvcasp.net-mvc-4

c# - 无法将图像加载到编辑视图中的部分视图

问题描述

解决方案

推荐阅读