How to pass dynamically created textbox values from view to controller in MVC

Question

I want to pass all values from dynamically generated text-boxes from view to controller.

My model:

public class QuestionModel
{
    [Required(ErrorMessage = "{0} is required")]
    [Display(Name = "Question here")]
    public string Question { get; set; }
}

My view:

@using (Html.BeginForm("Add_Question", "Home", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
        {
            <div class="form-group">
                    //here I'm generating dynamic textboxes
                    @for (int i = 1; i <= numberOfQuestions; i++)
                    {
                        <div class="col-md-12">
                            @Html.LabelFor(model => model.Question, new {  })
                            @Html.TextBoxFor(model => model.Question, "", new { @required = "required", @class = "form-control" })
                            @Html.ValidationMessageFor(model => model.Question, "", new { @class = "text-danger" })
                        </div>
                    }
                </div>

                <div class="form-group">
                    <div class="col-md-12">
                        <input type="submit" value="Done" class="btn-success form-control" />
                    </div>
                </div>
        }

My controller:

public ActionResult Add_Question()
    {
         return View();
    }

    [HttpPost]
    public ActionResult Add_Question(QuestionModel model)
    {
        //Get all textbox values here
        return RedirectToAction("Home", "Home");
    }

Should I create a list of strings for this? If yes then how? Please help.

score 3 · Accepted Answer · answered Feb 14 '19 at 04:30

You can slightly modify the viewmodel property and loop inside view to contain every element from List<string> like this:

Model

[Display(Name = "Question here")]
public List<string> Question { get; set; }

View

@for (int i = 0; i < numberOfQuestions; i++)
{
    <div class="col-md-12">
    @Html.LabelFor(model => model.Question)
    @Html.TextBoxFor(model => model.Question[i], "", new { @required = "required", @class = "form-control" })
    </div>
}

Note that collection index starts from zero, hence the first question should have index of 0.

Additional note:

You may need to create custom validation attribute for List<string> as provided in this reference because default RequiredAttribute only checks for null and not total count of entire collection items (empty collection with Count = 0 is not null).

Related issue:

Asp.net razor textbox array for list items

score 0 · Answer 2 · answered Feb 14 '19 at 04:30

0

Return the view with the model:

[HttpPost]
public ActionResult Add_Question(QuestionModel model)
{
    return View(model);
}

answered Feb 14 '19 at 04:30

Jeremy Thompson

61,933
36
195
321

score 0 · Answer 3 · answered Feb 14 '19 at 09:48

you can retrieve the values using the Formcollection object, but your dynamically created text boxes should have unique id for eg:- Question1, Question2 etc.

And then you can loop through Formcollection object.

below code is just for single textbox you need to create loop and retrieve

public ActionResult AddQuestion(FormCollection form)
        {
            string question1 = form["Question1"].ToString();           
            return View();
        }

How to pass dynamically created textbox values from view to controller in MVC

3 Answers3