Build an edit viewmodel based on related data

Question

I have an application to create and edit surveys. Each survey contains a set of questions and associated responses (answers). When a survey is created, the collection of questions is generated from a separate Questions table. Each year, a new survey is created for each user with the same set of questions so that responses can be compared over time.

When a survey is created, the answers to each question are saved, but a user may not have given a response to each question and now I have to build an view to edit existing responses.

Models

public class Survey
{
    public int ID { get; set; }
    public int AreaID { get; set; }
    public Status Status { get; set; }
    public DateTime AssessmentDate { get; set; }
    public virtual Area Area { get; set; }
    public virtual ICollection<Answer> Answers { get; set; }
}
public class Question
{
    public int ID { get; set; }
    public string QuestionText { get; set; }
    public virtual ICollection<Answer> Answers { get; set; }
}
public class Answer
{
    public int ID { get; set; }
    public int? Response { get; set; }
    public int QuestionID { get; set; }
    public int SurveyID { get; set; }
    public virtual Question Question { get; set; }
    public virtual Survey Survey{ get; set; }
}

Here is my viewmodel that I use to create my view for the edit screen

public class SurveyResponseViewModel
{
    public Assessment Assessment { get; set; }
    public IEnumerable<Question> Questions { get; set; }
}

and the code in the GET method is

public ActionResult Edit(int? id) 
{ 
    if (id == null) 
    { 
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest); 
    } 
    Survey survey = db.Surveys.Find(id); 
    var viewModel = new SurveyResponseViewModel 
    { 
        Survey = survey, 
        Areas = new SelectList(db.Areas, "ID", "SubLevel").ToList(), 
        Questions = db.Questions.Where(q => q.isActive) 
    }; 
    if (survey == null) 
    { 
        return HttpNotFound(); 
    } 
    return View(viewModel); 
}

This populates my view model with all questions, but each question contains a collection of answers. How do I display and edit only the answer to each question associated with this survey in the view?

@foreach (var question in Model.Questions)
{
    // Display the question
    @Html.Raw(question.QuestionText)
    // How to create an input for the associated response??
    <input  type="text" name="????" placeholder="Enter a number..." value="????" />
}

Note that the response is int? and can have a value between 0 and 5 (or null if the user has not yet given the response). Ideally I would like this to be rendered as a radio buttons to select the possible values.

Answer 1

First you will need to create a view model representing a question and its answer

public class QuestionVM
{
    public int QuestionID { get; set; }
    public string QuestionText { get; set; }
    public int? AnswerID { get; set; }
    [Range(0, 5)]
    public int? Response { get; set; }
}

and the main view model will be (note that view models should not contain properties that are data models when editing)

public class SurveyResponseVM
{
    public int ID { get; set; } // this will be bound by the route value
    [Required(ErrorMessage = "Please select an area")]
    [Display(Name = "Area")]
    public int? SelectedArea { get; set; }
    public IEnumerable<SelectListItem> AreaList { get; set; }
    .... // other properties of assessment that you need for the view
    public List<QuestionVM> Questions { get; set; }
}

so that in the view you can use

@model SurveyResponseVM
....
@using (Html.BeginForm())
{
    @Html.DropDownListFor(m => m.SelectedArea, Model.AreaList)
    ....
    for(int i = 0; i < Model.Questions.Count; i++)
    {
        <h3>@Model.Questions[i].QuestionText</h3>
        @Html.HiddenFor(m => m.Questions[i].AnswerID)
        for (int j = 0; j < 6; j++)
        {
            <label>
                @Html.RadioButtonFor(m => m.Questions[i].Resonse, j, new { id = "" })
                <span>@j</span>
            </label>
        }
    }
    <input type="submit" value="Save" />
}

which will post back to

public ActionResult Edit(SurveyResponseVM model)

For getting the values in the GET method, your 2nd query (db.Questions.Where(q => q.isActive) seems unnecessary as you already have the collection of Answer associated with the Survey (and each Answer contains the Question property. Your code can be

Survey survey = db.Surveys.Find(id);
if (survey == null) // check for null here
{ 
    return HttpNotFound(); 
} 
IEnumerable<Area> areas = db.Areas;
SurveyResponseVM model = new SurveyResponseVM()
{
    ID = survey.ID,
    SelectedArea = survey.AreaID,
    .... // other properties of Survey as required for the view
    AreaList = new SelectList(areas , "ID", "SubLevel"),
    Questions = survey.Answers.Select(x => new QuestionVM() 
    {
        QuestionText = x.Question.QuestionText, 
        AnswerID = x.ID, 
        Response = x.Response 
    }) 
};
return View(model);