0

I have a class PreventivoDS

    public class PreventivoDS
    {
        public int Id { get; set; }
        public string? CodPreventivo { get; set; }
        public string Data { get; set; }
        public int Durata { get; set; }
        public int IdCliente { get; set; }
        public string Cliente { get; set; }
        public string Descrizione { get; set; }
        public string Oggetto { get; set; }
        public int IdCondizionePagamento { get; set; }
        public string CondizionePagamento { get; set; }
        public decimal CostoSpedizione { get; set; }
        public bool? Accettazione { get; set; }
        public string? DataRisposta { get; set; }
        public IFormFile FilePreventivoAccettato { get; set; }
        public List<PreventivoArticoloDettaglioDS> PreventivoArticoloDettaglio { get; set; }
        public List<PreventivoPagamentoDS> PreventivoPagamento { get; set; }
    }

Class PreventivoArticoloDettaglioDS

    public class PreventivoArticoloDettaglioDS
    {
        //CODE HERE
    }

Class PreventivoPagamentoDS

    public class PreventivoPagamentoDS
    {
        //CODE HERE
    }

And the controller with

    [HttpPost]
    public async Task<AnagResult<PreventivoDS>> AddEditPreventivo([FromForm] PreventivoDS p)
    {
         //CODE HERE...
    }

But passing the formdata via ajax the lists PreventivoArticoloDettaglioDS and PreventivoPagamentoDS are always empty. This is my JavaScript code

        $.ajax({
            url: '/Preventivi/AddEditPreventivo',
            data: formData,
            type: "POST",
            contentType: false,
            processData: false,
            beforeSend: function (event) {
                loadingPage("Attendere!!! Salvataggio Preventivo in Corso...");
            },
            success: function (mydata) {
                .....
            },
            complete: function (event, jqXHR, ajaxOptions) {
                $.unblockUI();
            },
            error: function (xhr, ajaxOptions, thrownError) {
            }
        });
    });

I want to know why these 2 lists are always empty:

When data is passed to the back end the main object PreventivoDS always has empty lists

when ajax passes the formdata object to the backend inside the object there are all the data except the 2 lists which are always with zero records. Who can help me?

1
  • Kindly post the whole code from the Controller class with its attributes so we can figure out the correct endpoint. Mostly if MVC controller there is 'api/' + '/Preventivi/AddEditPreventivo',. Pls help to share your class controller you are consuming. Thanks. Commented Sep 18 at 10:21

1 Answer 1

0

Here is an working sample for you.

Test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preventivo Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h2>Preventivo Form</h2>
    <form id="preventivoForm">
        <label for="codPreventivo">Codice Preventivo:</label>
        <input type="text" id="codPreventivo" name="CodPreventivo"><br><br>

        <label for="data">Data:</label>
        <input type="date" id="data" name="Data"><br><br>

        <label for="durata">Durata (giorni):</label>
        <input type="number" id="durata" name="Durata" min="1"><br><br>

        <label for="idCliente">ID Cliente:</label>
        <input type="number" id="idCliente" name="IdCliente"><br><br>

        <label for="cliente">Nome Cliente:</label>
        <input type="text" id="cliente" name="Cliente"><br><br>

        <label for="descrizione">Descrizione:</label>
        <input type="text" id="descrizione" name="Descrizione"><br><br>

        <label for="oggetto">Oggetto:</label>
        <input type="text" id="oggetto" name="Oggetto"><br><br>

        <label for="condizionePagamento">Condizione di Pagamento:</label>
        <input type="text" id="condizionePagamento" name="CondizionePagamento"><br><br>

        <label for="costoSpedizione">Costo Spedizione:</label>
        <input type="number" id="costoSpedizione" name="CostoSpedizione" step="0.01"><br><br>

        <label for="accettazione">Accettazione:</label>
        <input type="checkbox" id="accettazione" name="Accettazione"><br><br>

        <label for="dataRisposta">Data Risposta:</label>
        <input type="date" id="dataRisposta" name="DataRisposta"><br><br>

        <label for="fileInput">File Preventivo Accettato:</label>
        <input type="file" id="fileInput" name="FilePreventivoAccettato"><br><br>

        <button type="button" onclick="submitForm()">Invia Preventivo</button>
    </form>

    <script>
        function submitForm() {
            var formData = new FormData();
            formData.append("CodPreventivo", $('#codPreventivo').val());
            formData.append("Data", $('#data').val());
            formData.append("Durata", $('#durata').val());
            formData.append("IdCliente", $('#idCliente').val());
            formData.append("Cliente", $('#cliente').val());
            formData.append("Descrizione", $('#descrizione').val());
            formData.append("Oggetto", $('#oggetto').val());
            formData.append("CondizionePagamento", $('#condizionePagamento').val());
            formData.append("CostoSpedizione", $('#costoSpedizione').val());
            formData.append("Accettazione", $('#accettazione').is(':checked'));
            formData.append("DataRisposta", $('#dataRisposta').val());


            var fileInput = document.querySelector("#fileInput");
            if (fileInput.files.length > 0) {
                formData.append("FilePreventivoAccettato", fileInput.files[0]);
            }
            // Mock data
            var preventivoArticoloDettaglioList = [
                { Id: 1, NomeArticolo: "Articolo 1", Prezzo: 100.50 },
                { Id: 2, NomeArticolo: "Articolo 2", Prezzo: 150.75 }
            ];
            formData.append("PreventivoArticoloDettaglio", JSON.stringify(preventivoArticoloDettaglioList));
            
            // Mock data
            var preventivoPagamentoList = [
                { Id: 1, TipoPagamento: "Carta di Credito", Importo: 200.00 },
                { Id: 2, TipoPagamento: "Bonifico Bancario", Importo: 300.00 }
            ];
            formData.append("PreventivoPagamento", JSON.stringify(preventivoPagamentoList));


            $.ajax({
                url: 'https://localhost:7091/Preventivi',
                data: formData,
                type: "POST",
                contentType: false,
                processData: false,
                beforeSend: function (event) {
                    console.log("Salvataggio in corso...");
                },
                success: function (mydata) {
                    console.log("Success:", mydata);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.error("Error:", thrownError);
                }
            });
        }
    </script>
</body>
</html>

Test Controller

using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using WebApplication1.Models;

namespace WebApplication1.Controllers
{
    [ApiController]
    [Route("[controller]")]
    public class PreventiviController : ControllerBase
    {
        [HttpPost]
        public async Task<IActionResult> AddEditPreventivo([FromForm] PreventivoDS p)
        {
            var articoloDettaglio = JsonConvert.DeserializeObject<List<PreventivoArticoloDettaglioDS>>(Request.Form["PreventivoArticoloDettaglio"]);
            var pagamentoDettaglio = JsonConvert.DeserializeObject<List<PreventivoPagamentoDS>>(Request.Form["PreventivoPagamento"]);

            p.PreventivoArticoloDettaglio = articoloDettaglio ?? new List<PreventivoArticoloDettaglioDS>();
            p.PreventivoPagamento = pagamentoDettaglio ?? new List<PreventivoPagamentoDS>();

            return Ok(new { success = true, data = p });
        }

    }
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.