Pass the values from View to Controller for Dynamically populated forms

Question

I have a form in which the TextBox is dynamically populated. The user has the flexibility to add and remove TextBox which is done using JQuery. I would need to pass the value of TextBox to my Controller on Submit.

This is my View.

@using (Html.BeginForm("Controller", "Admin", FormMethod.Post, new { required = "required" }))
{
    <h4>Add new Q&A</h4>
    <div id='TextBoxesGroup'>
        <div id="TextBoxDiv1">
            <input type="text" name="Question" id="Question" required placeholder="Question 1" class="form-control" /><br />
        </div>
    </div>
            <input type="button" name="Add" id="Add" value="Add" class="btn btn-success" />
            <input type="button" name="Remove" id="Remove" value="Remove" class="btn btn-danger" /> <br /><br />
            <textarea rows="5" name="Answer" id="Answer" placeholder="Answer" required class="form-control"></textarea><br />
            @Html.DropDownList("Intent", ViewData["Intent"] as List<SelectListItem>, "Select Intent", new { @class = "form-control", required = "required" })
            <br /><input type="text" name="PrimaryEntity" id="PrimaryEntity" placeholder="Primary keyword" required class="form-control" /><br />
            <input type="text" name="SecondaryEntity" id="SecondaryEntity" placeholder="Secondary keyword (optional)" class="form-control" /><br />
            <input type="submit" name="Submit" id="Submit" class="btn btn-success" />
}

This is how my JS looks

  $(document).ready(function () {
    var counter = 2;
    $("#Add").click(function () {
        var newTextBoxDiv = $(document.createElement('div'))
             .attr("id", 'TextBoxDiv' + counter);
        newTextBoxDiv.after().html('<input type="text" name="textbox' + counter +
              '" id="Question' + counter + '" value="" class="form-control" required placeholder="Question ' + counter +
              '"> <br />');
        newTextBoxDiv.appendTo("#TextBoxesGroup");
        counter++;
    });

    $("#Remove").click(function () {
        if (counter == 2) {
            alert("No more textbox to remove");
            return false;
        }
        counter--;
        $("#TextBoxDiv" + counter).remove();
    });
});

Sorry if I sound lame. Just getting started with MVC!

Suggest you study the code in the answers [here](https://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) and [here](https://stackoverflow.com/questions/40539321/a-partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892) — , Jun 02 '17 at 06:21
@KateFernando The textbox is populated using Javascript and I would like to pass the value of those textbox to Controller. I'm clueless if this can be done and if I'm doing it the right way ? — roughblot, Jun 02 '17 at 06:26
[Please don't put tags in question titles](https://stackoverflow.com/help/tagging) — Liam, Jun 02 '17 at 08:08

score 0 · Accepted Answer · answered Jun 02 '17 at 08:07

You can create a simple model having property Questions of List<string> type and other required properties.

Then from jQuery you can add multiple TextBoxes using a simple logic:

<input type="text" name="Model.Questions[" + index + "]" id="Model_Questions_" + index />

Render using:

@for (int i = 0; i < Model.Questions.Count; i++)
{
    @Html.TextBoxFor(x => Model.Questions[i], { .... })
}

When you post your form, all values in questions textboxes will be posted to your model's Questions list.

Note: I have not written above code in VS, so there may be some errors which you can fix yourself.

Pass the values from View to Controller for Dynamically populated forms

1 Answers1