Submitting form with dynamic fields to razor pages

Question

(edit at the bottom)

I'm building a questionnaire based on inputs from the user.

The questionnaire consists of n number of sections and each section can have n number of questions in it.

Each question is a type (FreeText, MultipleChoice, YesNo, Upload, etc.) used to determine behavior and which inputs to render on the page.

Some questions can have additional inputs for comments or additional info (whether or not this is the case is determined by the question type).

Having rendered the questions onto the page in javascript on a per-section basis, I'm struggling to allow capture of the answers.

The form renders dynamically when the user clicks on a section:

async function toggleSection(sectionId) {
    const contiainer = document.querySelector("section")

    // For ease, query the API to get the markup for the selected section.
    // Building the markup from the basic data items on the backend was easier.
    const sectionMarkupResult = await getSectionMarkup(sectionId)

    if (sectionMarkupResult.length) {
        container.innerHTML = sectionMarkupResult
    }
    else {
        // In dev the API function will return an error if there's a problem.
        container.innerHTML = `
            Unable to load section.
        
        ${sectionMarkupResult}`
    }

    // Hide the menu (.index) and show the section (container, above).
    container.classList.remove("d-none")
    document.querySelector(".index").classList.add("d-none")
}

The output is something like this:


  Tell us about yourself.
  Yes / no (radio buttons)
  
    
    Yes
  
  
    
    No
  

  
    
      
      Choice 1
    
    
      
      Choice 2
    
    
      
      Choice 3
    
  

  
    Name
    
  

  
    Surname
    
  

  
    Options
    
  

  
    
    Test 1
    
      
      Fee free to add any details.
    
  

  
    
    Test 2
    
      
      Fee free to add any details.
    
  
  
    
    Test 3
    
      
      Fee free to add any details.
    
  

  
    Test
    
  

  
    File 
    
    
      Files:

Because the form is dynamically rendered based on the questions captured for the selected section, it's impossible to model a POCO that I can use on the API as a method param for saving the user input so I thought about using a dynamic to represent the submitted form and figure something out from there.

This hasn't gone well, unfortunately as the param value comes back as object and I don't know what to do with it.

My API endpoint looks something like this:

[HttpPost]
public async Task SaveSection([FromForm]dynamic sectionFormData)
{
    var foo = "bar";
    return Ok();
}

Submitting to this is just posting the

:

function saveSection() {
    document.querySelector("form").submit()
}

I'm not able to discern what the form payload would be like before it gets sent to the API so I really have no idea how read this data into my API so that I can save it to my database.

How can I capture the form data from the submission (preferably without having to rebuild it in JS before it posts)?

Is there something clever I can possibly do with HttpContext to read the data as submitted?

EDIT

Evaluating HttpContext.Request.Form on the api allows me access to submitted values by looping through the FormCollection.

Unfortunately, this doesn't provide me enough information to save anything to my database as it doesn't include data about which question each key/value pair is for.

It also isn't submitting pairs for each input - seems to only be for the first one (there's only 1 item in the collection, relating to the first input in the on the page).

I will need another solution.

Submitting form with dynamic fields to razor pages

EDIT

0 Answers