Build a dynamic Form and Contoller for a Survey

Question

I need to create a 100% dynamic survey project where the user can create each question and each answer's type (multiple/text/radio).

My knowledge ends at the Controller because I have always build them based in a static View and a static model, but this time I don't know what will be submited in the form.

In the View I think the best choice will be including PartialViews based in the Survey's configuration inside the form.

I found a Database Model Schema has a first step:

What mysql database tables and relationships would support a Q&A survey with conditional questions?

but I can't find any example to start building the code.

Answer 1

Using partial views for each question type wont work easily because by default they will not prefix the form controls name attribute with the collections indexer necessary for binding when you post and you will need multiple conditional statements to determine which partial to display.

Assuming its acceptable to group the questions in the view according to their type, then using custom EditorTemplate's for each type or for loop. A basic model structure might be

public enum QuestionType
{
    YesNo,
    Text,
    MultipleChoice
}
public class Survey
{
    public int ID { get; set; }
    public string Title { get; set; }
    public List<YesNoQuestion> YesNoQuestions { get; set; }
    public List<TextQuestion> TextQuestions { get; set; }
    public List<MultipleChoiceQuestion> MultipleChoiceQuestions { get; set; }
}
public abstract class Question
{
    public int ID { get; set; }
    public string Text { get; set; }
    public QuestionType Type { get; set; }
}
public class YesNoQuestion : Question
{
    public bool Answer { get; set; }
}
public class TextQuestion : Question
{
    public string Answer { get; set; }
}
public class MultipleChoiceQuestion : Question
{
    public int Answer { get; set; }
    public List<MultipleChoiceAnswer> PossibleAnswers { get; set; }
}
public class MultipleChoiceAnswer
{
    public int ID { get; set; }
    public int QuestionID { get; set; }
    public string Text { get; set; }
}

and a simplified view (using for loops)

@model yourAssembly.Survey
@using (Html.BeginForm())
{
  <h2>@Html.DisplayFor(m => m.Title)</h2>
  <h3>Yes/No questions</h3>
  for(int i = 0; i < Model.YesNoQuestions.Count; i++)
  {
    <div>   
      @Html.CheckBoxFor(m => m.YesNoQuestions[i].Answer)
      @Html.LabelFor(m => m.YesNoQuestions[i].Answer, Model.YesNoQuestions[i].Text)
    </div>
  }
  <h3>Text questions</h3>
  for(int i = 0; i < Model.TextQuestions.Count; i++)
  {
    @Html.LabelFor(m => m.TextQuestions[i].Answer, Model.TextQuestions[i].Text)
    @Html.TextAreaFor(m => m.TextQuestions[i].Answer)
  }
  <h3>Multiple choice questions</h3>
  for(int i = 0; i < Model.MultipleChoiceQuestions.Count; i++)
  {
    <div>@Html.DisplayFor(m => m.MultipleChoiceQuestions[i].Text)</div>
    foreach(var option in Model.MultipleChoiceQuestions[i].PossibleAnswers)
    {
      var id = string.Format("option-{0}", option.ID);
      <div>
        @Html.RadioButtonFor(m => m.MultipleChoiceQuestions[i].Answer, option.ID, new { id = id })
        <label for="@id">@option.Text</label>
      </div>
    }
  }
  <input type="submit" value="Save" />
}

Answer 2

I have some experience building similar products both in server side views and also in AngularJS. Whichever approach you take, your solution will look something like:

• Create a common model for all the SurveyQuestions, define a Type argument which can be used for type-specific rendering logic
• Create a partial view for each type of survey question with the necessary logic to render it
• Create a "renderer" partial view which takes in a SurveyQuestion object, and then picks the right subview to render that component
• Call RenderPartial("Renderer", SurveyQuestion) in a loop to render each type of question
• Use controller logic to process the answers

Personally, I recommend using AngularJS (or similar) for something like this as it will simplify gluing together the different questions into a sequence; just be mindful of setting history state so users can navigate back/forward, if that's supported.

Edit - Here's a basic example of the data model and grouping logic: https://dotnetfiddle.net/4mhrxO.