Question

I am building an MVC form with a bunch of textboxes. However, my model requires a list of strings. What I’m trying to do is have it so when the user hits submit, before the form posts, it takes all of the values in the text box, adds it to a List and appends it to the model for submitting. I’m stuck at how I would be able to do this?

The reason I need to do this is that I need the form to be dynamic in that the # of fields can grow and the page adapts to that. I can’t hardcode the individual fields into the model as the model would need to adapt to the length of the form.

Here’s my code so far:

The HTML

@using (Html.BeginForm(new { id = "feedbackForm" }))
{
<fieldset>

    @foreach (Feedback_Num_Questions questionForm in FeedbackSurveyQuestions)
    {
        string textBoxID = "feedbackq";

        questionNumberTextBoxes++;

        textBoxID = textBoxID + questionNumberTextBoxes.ToString();

        <input type="text" id="@textBoxID" />
    }

    <input type="text" id="txtAdditionalComments" />

    <input type="submit" value="Create" name="btnFeedbackSubmit" id="btnSubmitFeedbackForm" />

    </fieldset>
}

The Model:

    public class PostCourseFeedbackModel
    {
        public List<string> responseList { get; set; }
        public decimal pelID { get; set; }
        public string employeeid { get; set; }
    }

Thanks for the help!

UPDATE: after getting a response from FLEM, I revised my code a bit to this. Still not quite working, but was hoping somebody could spot out the issue:

HTML:

 @using (Html.BeginForm(new { id = "feedbackForm" }))
 {
<fieldset>

    @{

    int i = 0;



    foreach (Feedback_Num_Questions questionForm in FeedbackSurveyQuestions)
    {
        i++;
        string textBoxID = "feedbackq" + i.ToString();
        @Html.TextBoxFor(m => m.responseList[i], new { @id = textBoxID });
    }



    <input type="submit" value="Create" name="btnFeedbackSubmit" id="btnSubmitFeedbackForm" />
        }
    </fieldset>
 }

The model remained unchanged…

UPDATE – As requested by flem, I am posting my action. However this is a barebones action as I have yet to code what I plan to do with the data…

    [HttpPost]
    public ActionResult PostCourseFeedback(PostCourseFeedbackModel feedback)
    {

         return RedirectToAction("FeedbackSubmitted", "Feedback", new { status = "success" });
    }

Answer 1

I would let the model binder do that hard work for you.

@using (Html.BeginForm(new { id = "feedbackForm" }))
{
    <fieldset>
    @{
        int i = 0;
        foreach (Feedback_Num_Questions questionForm in FeedbackSurveyQuestions)
        {
            @Html.EditorFor(m => m.responseList[i++])
        }
    }

        <input type="text" id="txtAdditionalComments" />

        <input type="submit" value="Create" name="btnFeedbackSubmit" id="btnSubmitFeedbackForm" />

    </fieldset>
}

Here’s a working sample:

Model and controller:

using System.Collections.Generic;
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class MyController : Controller
    {
        public ActionResult MyAction(MyModel Model)
        {
            return View(Model);
        }

    }
    public class MyModel
    {
        public List<string> TextFields { get; set; }
    }
}

View:

@model MvcApplication1.Controllers.MyModel

@using (Html.BeginForm())
{
    for (int i = 0; i < 3; i++)
    {
        string id = "txt" + i.ToString();

        @Html.TextBoxFor(m => m.TextFields[i], new { id = id })
    }

    <input type="submit" value="Post" />

    if (Model.TextFields != null)
    {
        foreach (string textField in Model.TextFields)
        { 
            <div>Posted Field: @textField</div>
        }
    }
}