Best Practices for DRY Data Annotation in ASP MVC ViewModels and EditorTemplates

Question

I have the following working system and looking for ways to make it DRY:

public class EMailMetaData
{
  [Display(Prompt="myemail@mydomain.com"])
  public string Data;
}
public class PhoneMetaData
{
  [Display(Prompt="+1 (123) 456-7890"])
  public string Data;
}
public class AddressMetaData
{
  [Display(Prompt="Central st. W., St Francisco, USA"])
  public string Data;
}
// 7 more metadata templates

public class ContactVM
{
  [Required]
  public string DataLabel { get; set; }

  [Required(ErrorMessage="Please fill in the data field")]
  public string Data { get; set; }
}

[MetadataType(typeof(EmailMetaData))]
EmailVM : ContactVM
{
}
[MetadataType(typeof(PhoneMetaData))]
PhoneVM : ContactVM
{
}
[MetadataType(typeof(AddressMetaData))]
AddressVM : ContactVM
{
}
// 7 more contact view models

Controller is obviously initializes them with right content and in the view I run over the foreach loop of ContactVMs having TemplateEditor for every one of contacts: EmailVM.cshtml, PhoneVM.cshtml, AddressVM.cshtml UrlVM.cshtml etc.

The main view looks (omitting all the setup and details like this:

@model ContactsVM
foreach (var contact in Model.Contacts)
{
  @Html.EditorFor(m => contact)
}

and under EditorTemplates

@model EmailVM
@Html.EditorFor(model => model.DataLabel)
@Html.EditorFor(model => model.Data)
<br />
@Html.ValidationMessageFor(model => model.DataLabel)
@Html.ValidationMessageFor(model => model.Data)

... and obviously few more editor templates for every view model I have defined.

So in simple words - very similar contact types with minor differences in watermarking, naming, validation, but essentially all strings and all have the same fields (address is one long string rather than struct, same for all of them).

My question is not specific for watermarking, it can be any of properties - name, description, prompt etc.

[Display(Name="name", Description="description", Prompt="prompt")]

Its all pretty much working and showing right labels, watermarks for each, but it seems like huge DRY violation since all the template editors are exactly the same except the model type. What I show is here simplification to concentrate on the problem at hand, main view and editor templates are significantly more complicated that what you see here, so duplication is tremendous.

Can any of you suggest better way of making it not duplicating so much code please?

Thanks!

Answer 1

To answer my own question:

It is blunt solution but much simpler than those suggested and most important requires least duplication compared to straightforward solution (although not too elegant considering we're in object oriented world):

1. Define one view with base class (or interface, however you define it) as your model.
2. In the view cast the model variable to the right class
3. In the view, use the cast variable rather than the model

So Contact.cshtml will look like this:

@model ContactVM
@* Do tons of stuff that is the same between views (not depending on data annotation) *@
@Html.Partial("_ContactDataAnnotation", Model)
@* Continue doing lots of stuff that is the same between all those classes

Calling Contact.cshtml editor template will go in the following manner (thanks Serg):

@foreach (var c in Model.Contacts)
{
  @Html.EditorFor(m => c, "Contact")
}

The partial view that is dedicated to only show the right data annotations _ContactDataAnnotation.cshtml will look like this:

@using <My Model Namespace>
@model ContactVM
@switch (Model.GetType().Name)
{
  case "EmailVM":
    EmailVM e = Model as EmailVM;
    @Html.EditorFor(model => e.DataLabel)
    @Html.EditorFor(model => e.Data)
    <br />
    @Html.ValidationMessageFor(model => e.DataLabel)
    @Html.ValidationMessageFor(model => e.Data)
    break;
  case "PhoneVM":
    PhoneVM p = Model as PhoneVM;
    @Html.EditorFor(model => p.DataLabel)
    @Html.EditorFor(model => p.Data)
    <br />
    @Html.ValidationMessageFor(model => p.DataLabel)
    @Html.ValidationMessageFor(model => p.Data)
    break;
  // same thing 7 more times for all children of ContactVM, since MVC does not applying polymorphism to data annotations UNFORTUNATELY
  default:
    @Html.EditorFor(model => model.DataLabel)
    @Html.EditorFor(model => model.Data)
    <br />
    @Html.ValidationMessageFor(model => model.DataLabel)
    @Html.ValidationMessageFor(model => model.Data)
  }

By this the duplication will only exist in places that is required, rather than having the same editor template duplicated 10 times with different names and model classes.

I know it contradicts the title of the question "best practices", but unfortunately this is the easiest and most minimalistic way to go. Other solutions, as Serg pointed out, are way too complex and require deep MVC infrastructure intervention, which I don't like spending time on, as well as having prompts and tooltips injected rather than defined in data annotation, which appears to be a standard way of decorating and validating your models.

I consider my solution to be a workaround MVC limitation of lacking polymorphism for data annotations.

Answer 2

(I am adding another answer because that's entirely different approach to the problem here)

The structure of both viewmodels and views are suggesting that we're looking at some meta-meta-meta-data, the pattern which I come to hate, sorry.

Let's at first take a straightforward approach and find out what is our model. I suppose it's something like this:

public class ContactsVM
{
    [Required]
    public string EmailLabel {get;set;}

    [Display(Prompt="myemail@mydomain.com"])
    [Required(ErrorMessage="Please fill in the data field")]
    public string Email {get;set;}

    [Required]
    public string PhoneLabel {get;set;}

    [Display(Prompt="+1 (123) 456-7890"])
    [Required(ErrorMessage="Please fill in the data field")]
    public string Phone {get;set;}

    [Required]
    public string AddressLabel {get;set;}

    [Display(Prompt="Central st. W., St Francisco, USA"])
    [Required(ErrorMessage="Please fill in the data field")]
    public string Address {get;set;}

    // 7 more property pairs
}

Plain, simple, straightforward, easy to understand. Yes, it would require some code duplication in view (meaning two EditorFors followed by ValidationMessage), but in my experience that's not a problem because in most cases one day you'll have to somehow tweak this code for one (and only one) property. If you don't like that - now, there's one more solution:

@* let's assume that props is a string[] holding meaningful property names, e.g "Email", "Phone", "Address". You can even get it dynamically from reflection
@foreach (var property in props)
{
    @Html.Editor(property + "Label") @Html.Editor(property)
    <br />
    @Html.Validation(property + "Label") @Html.Validation(property)
}

Update on dynamic models

Now, all of above won't work if we have variable number of data-items in model (which I come to hate even more now when I work with this on daily basis), so now we have to cope with that too. What we try to achieve is in fact, same view code as above, but now our model will not contain those properties. All the magic lies in two things.

1. We turn our model into something Dictionary-like, containing string keys pointing to string data. How we populate it, does not matter.
2. We provide our own ModelMetadataProvider which will override default behavior for our model class with following:
   1. given model instance, it will respond to GetProperties by enumerating over aforementioned dictionary, and creating ModelMetadata from those string
   2. each created ModelMetadata should contain ModelValue corresponding to value from our dictionary
   3. all the other properties of ModelMetadata are filled according to our wishes (we don't need DataAnnotations no more, we will inject all values in provider)

That takes a lot of work and a bit of trying, but in the end it works, I'd say from my experience. But I wouldn't recommend this overall design approach, as it requires... you've already seen amount of work and it's just a beginning.

Answer 3

You should be able to create Interface, like

public interface IContactData
{
string Data{get; set;};
.
.
.
}

The implement that interface in your classes

public class EMailMetaData : IContactData
{
  [Display(Prompt="myemail@mydomain.com"])
  public string Data{get; set;};
...
}
public class PhoneMetaData  : IContactData
{
  [Display(Prompt="+1 (123) 456-7890"])
  public string Data{get; set;};
....
}

And in your editor template(one for all) use

@model IContactData

Answer 4

(Your problem stems from the fact that your viewmodels are not specific, but a kind of "one generic solution to every problem out there".)

But still, there's an quite easy solution: create one named editor template for all your types, having ContactVM as model type, and use @Html.EditorFor(m => contact, "YourTemplateName").