Click here to Skip to main content
15,920,596 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello

I am trying to pass back an editable HTML table back to my controller.To do this I have wrapped my table in a form and used a serializeArray() to pass the data to the controller.

However, my data object now looks like the following

[
    {
        "name": "[0].blnApprove",
        "value": "false"
    },
    {
        "name": "[0].blnRejected",
        "value": "false"
    },
    {
        "name": "[0].RejectReason",
        "value": ""
    },
    {
        "name": "[0].autHolidayRequestID",
        "value": "61"
    },
    {
        "name": "[1].blnApprove",
        "value": "true"
    },
    {
        "name": "[1].blnRejected",
        "value": "false"
    },
    {
        "name": "[1].RejectReason",
        "value": ""
    },
    {
        "name": "[1].autHolidayRequestID",
        "value": "172"
    },
    {
        "name": "[2].blnApprove",
        "value": "false"
    },
    {
        "name": "[2].blnRejected",
        "value": "true"
    },
    {
        "name": "[2].RejectReason",
        "value": "Absences"
    },
    {
        "name": "[2].autHolidayRequestID",
        "value": "173"
    }
]


which is not usable. Ideally, id like to be able to get the data in the following format.

List<Holidays> holiday = new List<Holidays>
{
   new Holidays{ autHolidayRequestID=61, blnApprove="false", blnRejected="false", RejectReason="" },
   new Holidays{ autHolidayRequestID=172, blnApprove="true", blnRejected="false", RejectReason="" },
   new Holidays{ autHolidayRequestID=173, blnApprove="false", blnRejected="true", RejectReason="Absences" },
};


I was thinking I could use a 3-dimensional array like the below and then loop through my code however I'm not able to recreate this in javascript or jquery. I also suspect I'm starting to over complicate things ?

holidays[0][autHolidayRequestID][61]
holidays[0][blnApprove][false]
holidays[0][blnRejected][false]
holidays[0][RejectReason][""]
holidays[1][autHolidayRequestID][61]
holidays[1][blnApprove][true]
holidays[1][blnRejected][false]
holidays[1][RejectReason][""]
holidays[2][autHolidayRequestID][61]
holidays[2][blnApprove][false]
holidays[2][blnRejected][true]
holidays[2][RejectReason]["Absences"]


Could someone please offer some advice on the best way to handle this ?

What I have tried:

wrapped my table in a form and used a serializeArray() to pass the data to the controller.
Posted
Updated 23-Sep-22 2:18am

1 solution

Rather than trying to construct a JSON object to represent your data, just send it in the standard application/x-www-form-urlencoded format. The ASP.NET model binder will do all of the work for you.
JavaScript
const submitToServer = async(){
    const url = "...url to your action...";
    const formData = new FormData(document.getElementById("yourFormId"));
    
    const response = await fetch(url, {
        method: "POST",
        body: formData
    });
    
    ...
}
Using the Fetch API - Web APIs | MDN[^]
Using FormData Objects - Web APIs | MDN[^]
Model Binding To A List | You’ve Been Haacked[^]
ASP.NET Wire Format for Model Binding to Arrays, Lists, Collections, Dictionaries - Scott Hanselman's Blog[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900