Edit method in ASP.NET Core 6 MVC - asp.net-core-mvc

Question

I am building an e-store web app using ASP.NET Core 6 MVC. I am trying to do CRUD operations with the help of some tutorial, everything went smoothly, but when I try to edit a product, it makes a copy of that edited item, instead of just replacing it.
Also, it asks me to upload a new image even though I want to set it not to ask for a new one, and there is a default (noimage.png) set if there is no image uploaded. Here is the edit method, please tell me where am going wrong.
public async Task<IActionResult> Edit(int id, Product product)
{
ViewBag.CategoryId = new SelectList(_context.Category.OrderBy(x => x.Sorting),
"Id", "Name", product.CategoryId);
// if (ModelState.IsValid)
// {
product.Slug = product.Name.ToLower().Replace(" ", "-");
var slug = await _context.Product
.Where(x => x.Id != id)
.FirstOrDefaultAsync(x => x.Slug == product.Slug);
if (slug != null)
{
ModelState.AddModelError("", "The product already exists.");
return View(product);
}
// Not mandatory to upload an image when editing
if (product.ImageUpload != null)
{
string uploadsDir = Path.Combine(webHost.WebRootPath, "media/products");
// If the image is not noimage.png then remove the existing image and upload a new one
if (!string.Equals(product.Image, "noimage.png"))
{
string oldImagePath = Path.Combine(uploadsDir, product.Image);
if (System.IO.File.Exists(oldImagePath))
{
System.IO.File.Delete(oldImagePath);
}
}
// Upload new image
string imageName = Guid.NewGuid().ToString() + "_" + product.ImageUpload.FileName;
string filePath = Path.Combine(uploadsDir, imageName);
FileStream fs = new FileStream(filePath, FileMode.Create);
await product.ImageUpload.CopyToAsync(fs);
fs.Close();
product.Image = imageName;
}
_context.Update(product);
await _context.SaveChangesAsync();
TempData["Success"] = "The product has been edited!";
return RedirectToAction("Index");
// }
// return View(product);
}
Product class
public class Product
{
public int Id { get; set; }
[Required, MinLength(2, ErrorMessage = "Minimum length 2")]
public string? Name { get; set; }
public string? Slug { get; set; }
[Column(TypeName = "decimal (18,2)")]
public decimal Price { get; set; }
[Display(Name = "Category")]
[Range(1, int.MaxValue, ErrorMessage = "You must choose a category")] //specific validation for category
public int? CategoryId { get; set; }
[Required, MinLength(2, ErrorMessage = "Minimum length 4")]
public string? Description { get; set; }
public string? Image { get; set; }
//To make the connection
[ForeignKey("CategoryId")]
public virtual Category? Category { get; set; }
[NotMapped] //to not show in the DB
[ImageExtention]
public IFormFile? ImageUpload { get; set; }
}
Edit view
#model Product
#{
ViewData["Title"] = "Edit Product";
}
<h1>Edit Product</h1>
<div class="row">
<div class="col-md-10">
<form asp-action="Edit" enctype="multipart/form-data">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
#*<input type="hidden" asp-for="Image" />*#
<div class="form-group">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Description" class="control-label"></label>
<textarea asp-for="Description" class="form-control"></textarea>
<span asp-validation-for="Description" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Price" class="control-label"></label>
<input asp-for="Price" class="form-control" />
<span asp-validation-for="Price" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CategoryId" class="control-label"></label>
<select asp-for="CategoryId" asp-items="#ViewBag.CategoryId" class="form-control">
<option value="0">Choose a category</option>
</select>
<span asp-validation-for="CategoryId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Image" class="control-label">Current Image</label>
<img src="~/media/products/#Model.Image" width="200" alt="" />
</div>
<div class="form-group">
<label asp-for="Image" class="control-label">New Product Image</label>
<input asp-for="ImageUpload" class="form-control" />
<img src="" id="imgpreview" class="pt-2" alt="" />
<span asp-validation-for="ImageUpload" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Edit" class="btn btn-primary" />
</div>
</form>
</div>
</div>
<div>
<a asp-action="Index">Back to List</a>
</div>
#section Scripts {
#{
await Html.RenderPartialAsync("_ValidationScriptsPartial");
}
<script>
$("#ImageUpload").change(function () {
readURL(this);
});
</script>
}

Answer 1

You need to make Id as Primary Key in Product
public class Product
{
[Key]
public int Id { get; set; }
//ommitted
}
You are not posting Id to Edit Method while Edit button clicked. So every time It is sending value of Id as 0. EntityFramework is considering it as new object.
Please add below code to cshtml view inside form. It will send correct value of existing product Id.
<input type="hidden" asp-for="Id" />