How do I dynamically add html elements to a page and access them in asp.net?

Question

Good day,

I have been trying for over a day now to figure out a way to dynamically add elements to a web page using visual studio and access their values. I am either over-complicating the whole thing, I'm being dumb, or there is genuinely no way in which to do what I'm trying to do haha. I am trying to create a page that should be able to generate possibly over 100 of the following html item sets: It is basically a question and answer form for creating a multiple choice test. There is an area to type a question and then additional text boxes just to add in the multiple choice. There is also a button that can add an extra 2 textboxes to the answer area (whether they are created and added to a div in the table row or hidden and then revealed when the button is pressed.)

---

[Textbox for question]

[Textbox][Textbox][Textbox][Textbox] [Button that adds additional textbox to this row (only an extra 2 at maximum)]

[Confirm button to submit the text in the textboxes]

---

[Button that adds another copy of the elements above (up to 100)]

I would love to create just a normal form (as that's probably easiest), but this needs to work on the web. I know keeping track of all of this content can be a nightmare, but I can't think of an alternative (well, I have thought of an alternative but it seems to be more complicated). I have tried the following: I tried adding a div into a table cell to add the textboxes, but I couldn't access the div afterwards. Is there a way to do this? If I could access the elements I create using the innerHtml method, I would be more or less fine, but I cannot find anything online.

QuestionContent.InnerHtml += "<table runat=\"server\" style=\"width: 100 %; \"><tr><td> Question " + _QuestionNum + " </td></tr><tr><td class=\"auto - style1\"><div id=\"divQ"+_QuestioNum+"\"></div></td></tr></table>"; 
//Might have an issue adding an element with runat=server, but this was the only way I could think of extracting a value that is created dynamically in C#.
                    ((System.Web.UI.HtmlControls.HtmlGenericControl)mainPanel.FindControl("divQ1")).InnerHtml = "<asp:TextBox ID=\"txtChoice1\" runat=\"server\">Choice1</asp:TextBox>"; 
    //Here I try to access the div created above. Unrelated: Also tried with a normal textbox, but I realise that creating an asp textbox here might cause issues.

I just cannot seem to access anything I create in C#. Is there a better way? Upon giving up on this idea, I tried creating elements using javascript. I still need to find out if I can pass values through to C# using javascript, but I am stuck with another issue now. Whenever the below code runs, the elements appear but then immediately disappear. Is this an issue with asp.net? The google results weren't very helpful.

function addQuestion() {
if (numQuestions == limit) {
    alert('Maximum question limit reached. Consider breaking this test up into multiple tests.');
}
else {
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', 'divQ' + numQuestions);
    newdiv.innerHTML = '<table><tr><td> Question' + numQuestions + '</td></tr><tr><td>';
    for(var i=0;i<6;i++){
        newdiv.innerHTML += "<input type=\"text\" name=\"textBox"+i+"\">";
    }
    newdiv.innerHTML += '</td></tr></table>';
    numQuestions++;
    document.getElementById('divQuestionContent').appendChild(newdiv);       
}

}

However, I would like to avoid using javascript if I can. Is there a better way to create this page? Have I simply done something wrong? Any help will be greatly appreciated.

Answer 1

I think you are mixin server and client side code.

1st) Create html form with your first known necesary fields

2nd) Javascript part. User add fields to the form (need to be done in Javascript, client side ), check this answer: How add new hidden input fields to the form on submit

3rd) C# part . On form request, you need to loop over all request.form items, as you can't know how many they are. This can be done with something like this:

StringBuilder s = new StringBuilder();
foreach (string key in Request.Form.Keys)
{
    s.AppendLine(key + ": " + Request.Form[key]);
}
string formData = s.ToString();