Ich kann kein Array von JS über Formdata an den Controller senden (mein Viewmodel wird nicht daran gebunden) ⇐ JavaScript

[Anonymous]

meine Funktion
Ich kann auch alles senden, einschließlich Bilder, aber dieses Array kann ich nicht senden.
Die Logik ist, dass ich dadurch wissen möchte, wie viele Bilder er entfernt hat oder ob der Benutzer das Hauptbild von den vorinstallierten geändert hat, damit ich diese auch aktualisieren kann

Code: Select all

  
let featureCounter = @(Model.Features?.Count() ?? 0);
let uploadedImages = []; // { id, url, file?, isMain }

const pictures = @Html.Raw(Json.Serialize(ViewBag.Pictures ?? new List()));





function UpdateProduct() {

let data = new FormData();

// Append basic product fields
data.append('Id', $("#Id").val());
data.append('Name', $("#Name").val());
data.append('Description', $("#Description").val());
data.append('HowToUse', $("#HowToUse").val());
data.append('Price', $("#Price").val());
data.append('Stock', $("#Stock").val());
data.append('BrandId', $("#BrandId").val());
data.append('CategoryId', $("#CategoryId").val());
data.append("ExistingProductPicturesJson", JSON.stringify(uploadedImages));

// Append dynamic features
$("[name^='Features']").each(function () {
data.append($(this).attr("name"), $(this).val());
});

// Append uploaded files (correct ID)
const productImages = document.getElementById("productImages");
if (productImages && productImages.files.length > 0) {
for (let i = 0; i < productImages.files.length; i++) {
data.append("Pictures", productImages.files[i]);
}
}

$.ajax({
url: '@Url.Action("UpdateProduct", "Product", new { area = "Admin" })',
type: "POST",
data: data,
processData: false,
contentType: false,
success: function (data) {
if (data.isSuccess) {
swal.fire('موفق!', data.message, 'success')
.then(() => location.reload());
} else {
swal.fire('هشدار!', data.message, 'warning');
}
},
error: function (request) {
alert(request.responseText);
}
});
}

meine js-Datei, die die vorinstallierten Bilder füllta hier

Code: Select all

document.addEventListener('DOMContentLoaded', function () {
try {
preloadImagesFromServer();
} catch (error) {
console.error('Add product page error:', error);
}
});

// ---------- Preload Images ----------
function preloadImagesFromServer() {
const preview = document.getElementById('imagesPreview');
if (!preview) return;

uploadedImages = []; // reset before preloading
preview.innerHTML = '';

const mainPic = "@ViewBag.Main"; // optional main pic from server

pictures.forEach((url, index) => {
const isMain = url === mainPic || (!uploadedImages.some(img => img.isMain) && index === 0);
uploadedImages.push({ id: index, url: url, isMain: isMain });

const imageItem = document.createElement('div');
imageItem.className = 'image-preview-item';
imageItem.id = `image-${index}`;
imageItem.innerHTML = `
[img]${url}[/img]
×

${isMain ? '✓ اصلی' : 'انتخاب اصلی'}

`;
preview.appendChild(imageItem);
});

// Ensure one image is main
if (!uploadedImages.some(img => img.isMain) && uploadedImages.length > 0) {
setMainImage(uploadedImages[0].id);
}
}

mein Ansichtsmodell

Code: Select all

namespace PetPaw.EndPoint.Areas.Admin.Models.ViewModels.Product
{
public class NewProductViewModel
{
public long Id { get; set; }
public string Name { get; set; }
public string? Description { get; set; }
public string? HowToUse { get; set; }
public decimal Price { get; set; }
public int Stock { get; set; }
public long CategoryId { get; set; }
public long BrandId { get; set; }
public long AnimalId { get; set; }

public bool IsActive { get; set; }
public int MainPictureIndex { get; set; }
public List ExistingProductPictures { get; set; } = new List();

public List Pictures { get; set; }=new List();
public List Features { get; set; }=new List();
}
public class ExistingProductPicture
{
public long id { get; set; }
public string url { get; set; }
public bool isMain { get; set; }
}

}