MVC Dynamic View Data and Dynamic Views

Question

Traditionally, I have built MVC applications using view models with Data Annotations attributes, and I dynamically render the views using editor templates. Everything works gre

Answer 1

I solved a similar problem by creating a more complex model, and using a custom editor template to make the model be rendered to look like a typical editor, but using the dynamic field information:

public class SingleRowFieldAnswerForm
{
    /// <summary>
    /// The fields answers to display.
    /// This is a collection because we ask the MVC to bind parameters to it,
    /// and it could cause issues if the underlying objects were being recreated
    /// each time it got iterated over.
    /// </summary>
    public ICollection<IFieldAnswerModel> FieldAnswers { get; set; } 
}

public interface IFieldAnswerModel
{
    int FieldId { get; set; }

    string FieldTitle { get; set; }

    bool DisplayAsInput { get; }

    bool IsRequired { get; }

    bool HideSurroundingHtml { get; }
}

// sample implementation of IFieldAnswerModel
public class TextAreaFieldAnswer : FieldAnswerModelBase<TextAreaDisplayerOptions>
{
    public string Answer { get; set; }
}

EditorTemplates/SingleRowFieldAnswerForm.cshtml:

@helper DisplayerOrEditor(IFieldAnswerModel answer)
{
    var templateName = "FieldAnswers/" + answer.GetType().Name;
    var htmlFieldName = string.Format("Answers[{0}]", answer.FieldId);

    if (answer.DisplayAsInput)
    {
        @Html.EditorFor(m => answer, templateName, htmlFieldName)
        // This will display validation messages that apply to the entire answer. 
        // This typically means that the input got past client-side validation and
        // was caught on the server instead.
        // Each answer's view must also produce a validation message for
        // its individual properties if you want client-side validation to be
        // enabled.
        @Html.ValidationMessage(htmlFieldName)
    }
    else
    {
        @Html.DisplayFor(m => answer, templateName, htmlFieldName)
    }
}
<div class="form-section">
    <table class="form-table">
        <tbody>
            @{
                foreach (var answer in Model.FieldAnswers)
                {
                    if (answer.HideSurroundingHtml)
                    {
                        @DisplayerOrEditor(answer)
                    }
                    else
                    {
                        var labelClass = answer.IsRequired ? "form-label required" : "form-label";
                        <tr>
                            <td class="@labelClass">
                                @answer.FieldTitle:
                            </td>
                            <td class="form-field">
                                <div>
                                    @DisplayerOrEditor(answer)
                                </div>
                            </td>
                        </tr>
                    }
                }
            }
        </tbody>
    </table>
</div>

So I populate my SingleRowFieldAnswerForm with a series of answer models. Each answer model type has its own editor template, allowing me to customize how different types of dynamic "properties" should be displayed. For example:

// EditorTemplates/FieldAnswers/TextAreaFieldAnswer.cshtml

@model TextAreaFieldAnswer

@{
    var htmlAttributes = Html.GetUnobtrusiveValidationAttributes("Answer", ViewData.ModelMetadata);
    // add custom classes that you want to apply to your inputs.
    htmlAttributes.Add("class", "multi-line input-field");
}
@Html.TextAreaFor(m => m.Answer, Model.Options.Rows, 0, htmlAttributes)
@Html.ValidationMessage("Answer")

The next tricky part is that when you send this information to the server, it doesn't inherently know which type of IFieldAnswerModel to construct, so you can't just bind the SingleRowAnswerForm in your arguments list. Instead, you have to do something like this:

public ActionResult SaveForm(int formId)
{
    SingleRowAnswerForm form = GetForm(formId);
    foreach (var fieldAnswerModel in form.FieldAnswers.Where(a => a.DisplayAsInput))
    {
        // Updating this as a dynamic makes sure all the properties are bound regardless
        // of the runtime type (since UpdateModel relies on the generic type normally).
        this.TryUpdateModel((dynamic) fieldAnswerModel, 
            string.Format("Answers[{1}]", fieldAnswerModel.FieldId));
        }
    ...

Since you provided MVC with each dynamic "property" value to bind to, it can bind each of the properties on each answer type without any difficulty.

Obviously I've omitted a lot of details, like how to produce the answer models in the first place, but hopefully this puts you on the right track.

Answer 2

You can use The ViewData Property in your ViewModel, View and Controller, it is dynamic, so it can be resolved at runtime.