如何使用 ASP.NET MVC 在“編輯產品”上加載圖像？

Question

我有一個用於 ASP.NET MVC 產品的庫存 CRUD 模塊。 在數據庫中插入新產品時，我必須為每個產品加載一個圖像。

這就是我所擁有的並且效果很好：

我的問題是當我想編輯給定 Id 中的現有產品並且編輯產品時文本成功加載但圖像沒有加載。 問題是我不知道該怎么做。

這是我的代碼：

插入新產品：

@using (Html.BeginForm("NuevoProducto", "Inventario", FormMethod.Post, new { enctype = 
"multipart/form-data" }))
{
    ...
    <div class="form-group">
     <label for="exampleInputFile">Imagen</label>
      <div class="input-group">
       <div class="custom-file">
       <input type="file" id="file" name="Image" class="custom-file-input" multiple onchange="GetFileSize()" />
         <label class="custom-file-label" for="exampleInputFile">Elija Imagen</label>

       </div>
        </div>
         @Html.ValidationMessageFor(m => m.Image, "", new { @class = "text-danger" })

          <div class="col-2">
     <p>Tamaño de Imagen</p>
     </div>
    </div>

}


[HttpPost]
    public ActionResult NuevoProducto(ProductoViewModel viewModel)
    {

        string path = "";
        HttpPostedFileBase archivo = Request.Files["Image"];

        if (ModelState.IsValid)
        {

            if (archivo != null && archivo.ContentLength > 0)
            {
                path = Path.Combine(Server.MapPath("~/Images"), Path.GetFileName(archivo.FileName));
                archivo.SaveAs(path);

            }

            if (ModelState.IsValid) 
            { 
            var producto = viewModel.Producto;
            producto.FechaCreacion = DateTime.Now;
            producto.Estado = true;
            producto.Imagen = viewModel.Image.FileName;
            _productosRepository.Add(producto);
            TempData["Message"] = "¡El Producto se ha INSERTADO con éxito!";
            return RedirectToAction("Productos");
            }
        }

        viewModel.Iniciar(_productosRepository);
        return View(viewModel);

    }

public class ProductoViewModel
{

    public Producto Producto { get; set; } = new Producto();

    [Required(ErrorMessage = "*Se necesita una imagen.")]
    public HttpPostedFileBase Image { get; set; }

}

這是我用於編輯產品但圖像未加載的代碼：

public ActionResult ModificarProducto(int? id)
    {

        if (id == null)
        {
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        }

        var producto = _productosRepository.Get((int)id, incluideRelatedEntities: false);

        if (producto == null)
        {
            return HttpNotFound();
        }

        //necesito capturar los  datos y almacenarlos en viewmodel
        var viewModel = new ProductoEditViewModel()
        {
            Producto = producto
        };
        viewModel.Iniciar(_productosRepository);

        return View(viewModel);

    }

    [HttpPost]
    public ActionResult ModificarProducto(ProductoEditViewModel viewModel)
    {

        if (ModelState.IsValid)
        {
            var producto = viewModel.Producto;
            _productosRepository.ModificarProducto(producto);
            TempData["Message"] = "¡El Producto se ha MODIFICADO con éxito!";
            return RedirectToAction("DetallesProducto", "Inventario", new {viewModel.Id});

        }

        viewModel.Iniciar(_productosRepository);


        return View(viewModel);
    }

我將存儲在圖像文件夾中的圖像路徑保存在數據庫中，並使用<img src="~/Images/@producto.Imagen" height="100" />在列表中顯示圖像。 我不知道如何在編輯視圖中加載圖像並使我的客戶更容易，因為在編輯視圖中保存的圖像變為空。

Answer 1

單擊編輯按鈕后，將圖像名稱和路徑存儲在臨時數據中，並在更新期間從臨時數據中取回。

Answer 2

在您的編輯表單上添加preview div 。 下面的例子：

<div class="custom-file">
   <div class="preview-image-section">
      <img src='@Model.Image' class="preview-image" /> 
   </div>
   <input type="file" id="file" name="Image" class="custom-file-input" multiple onchange="GetFileSize()" />
     <label class="custom-file-label" for="exampleInputFile">Elija Imagen</label>

   </div>

並在您的 javascript 代碼中，如果您想通過選擇按鈕來顯示所選圖像：

function GetFileSize() {
    if (this.files && this.files[0]) {

        var FR = new FileReader();

        FR.addEventListener("load", function (e) {
            $(".preview-image").attr('src', e.target.result);
        });

        FR.readAsDataURL(this.files[0]);
    }

   //your code here
 }