ASP.NET MVC 5中使用文件系统上传图库图片的EF相关问题

Hey there, let's break down your issues one by one and fix them step by step!

1. Why GalleryImages isn't appearing in your Product database table #

The root problem here is how Entity Framework (EF) handles collection properties. EF doesn't map IEnumerable<string> (or any collection type) to a single column in your Product table—collections are treated as navigation properties for one-to-many relationships.

To fix this, you need to create a separate entity for gallery images and set up a relationship with your Product model:

Step 1: Create a GalleryImage entity class #

public class GalleryImage
{
    public int Id { get; set; }
    public string ImagePath { get; set; } // Stores the filename/path of the image
    public int ProductId { get; set; } // Foreign key linking to the Product
    public ProductModel Product { get; set; } // Navigation property back to the product
}

Step 2: Update your ProductModel #

Replace your existing IEnumerable<string> property with a collection of GalleryImage, and initialize it to an empty list to avoid null reference issues later:

public class ProductModel
{
    // ... Your existing product properties (Id, Name, Price, etc.) ...
    public ICollection<GalleryImage> GalleryImages { get; set; } = new List<GalleryImage>();
}

Step 3: Add the entity to your DbContext #

In your application's DbContext class, add a DbSet for the new entity:

public DbSet<GalleryImage> GalleryImages { get; set; }

Step 4: Update the database #

Run these commands in the Package Manager Console to create the new table and relationship:

Add-Migration AddGalleryImagesTable
Update-Database

2. Fixing the System.ArgumentNullException #

This error happens because Model.GalleryImages is null when your view tries to call Any() on it. We already fixed part of this by initializing the collection in ProductModel, but you also need to ensure EF loads the gallery images when fetching a product.

Load the navigation property in your controller #

When retrieving a product for the Edit view, use Include() to explicitly load the GalleryImages collection:

public ActionResult Edit(int id)
{
    var product = db.Products
                   .Include(p => p.GalleryImages) // Loads associated gallery images
                   .FirstOrDefault(p => p.Id == id);
                   
    if (product == null)
    {
        return HttpNotFound();
    }
    
    return View(product);
}

3. Adjust your Edit.cshtml to work with the new model #

Your current view assumes GalleryImages is a list of strings—update it to use the ImagePath property of the GalleryImage entity:

@if (!Model.GalleryImages.Any()) { 
    <h4>There are no gallery images for this product.</h4> 
}
<form action="/AdminPanel/Product/SaveGalleryImages" method="post" enctype="multipart/form-data" class="dropzone" id="dropzoneForm">
    <div class="fallback">
        <input type="file" name="file" multiple />
        <input type="submit" value="Upload" />
    </div>
</form>
<br /><br />
@foreach (var image in Model.GalleryImages) {
<div style="display: inline-block">
    <img src="/Images/Uploads/Products/@Model.Id/Gallery/Thumbs/@image.ImagePath" />
    @Html.ActionLink("delete", "DeleteImage", "Product", 
        new { id = Model.Id, imageName = image.ImagePath }, 
        new { @class = "deleteimage" })
</div>
}
<!-- Your existing CSS and script links stay the same -->

Note: I fixed the ActionLink syntax to separate route values and HTML attributes (your original code had them mixed up).

4. Quick checks for your upload/delete actions #

Make sure your SaveGalleryImages and DeleteImage actions are updated to work with the GalleryImage entity:

Example SaveGalleryImages action #

[HttpPost]
public ActionResult SaveGalleryImages(int id, IEnumerable<HttpPostedFileBase> file)
{
    var product = db.Products.Find(id);
    if (product == null) return Json(new { success = false });

    // Create directories if they don't exist
    string uploadDir = Server.MapPath($"~/Images/Uploads/Products/{id}/Gallery/");
    string thumbDir = Server.MapPath($"~/Images/Uploads/Products/{id}/Gallery/Thumbs/");
    Directory.CreateDirectory(uploadDir);
    Directory.CreateDirectory(thumbDir);

    foreach (var imageFile in file)
    {
        if (imageFile?.ContentLength > 0)
        {
            string fileName = Path.GetFileName(imageFile.FileName);
            string fullPath = Path.Combine(uploadDir, fileName);
            
            // Save original image
            imageFile.SaveAs(fullPath);
            
            // Add thumbnail generation logic here (use System.Drawing or a library like ImageSharp)
            
            // Save image record to database
            db.GalleryImages.Add(new GalleryImage
            {
                ImagePath = fileName,
                ProductId = id
            });
        }
    }

    db.SaveChanges();
    return Json(new { success = true });
}

Example DeleteImage action #

[HttpPost]
public ActionResult DeleteImage(int id, string imageName)
{
    var galleryImage = db.GalleryImages
                        .FirstOrDefault(g => g.ProductId == id && g.ImagePath == imageName);
                        
    if (galleryImage == null) return Json(new { success = false });

    // Delete files from server
    string originalPath = Server.MapPath($"~/Images/Uploads/Products/{id}/Gallery/{imageName}");
    string thumbPath = Server.MapPath($"~/Images/Uploads/Products/{id}/Gallery/Thumbs/{imageName}");
    
    if (System.IO.File.Exists(originalPath)) System.IO.File.Delete(originalPath);
    if (System.IO.File.Exists(thumbPath)) System.IO.File.Delete(thumbPath);

    // Remove record from database
    db.GalleryImages.Remove(galleryImage);
    db.SaveChanges();
    
    return Json(new { success = true });
}

内容的提问来源于stack exchange，提问作者Arya