UIHint and DataAnnotations


I am trying to utilize data annotations and uihints to creat forms for my site.  I am placing my data annotations on the properties of the view model for validation purposes and they are working just fine when I render out the code in the Index.cshtml file as follows:

@Html.PropertyFor(m => m.Value)

I am also creating a custom UIHint display template to create our input boxes in the same fashion each time rather than copy the code every time in the view.  So my property looks like this.

public string FirstName {get;set;}

The issue seems to be that when using the Display Template for TextboxForm, it is not rendering out the data attributes for unobtrusive javascript correctly.  In this case, I am getting the following rendering of html.

The following is what I would expect to get it out if I didn't use the Html.PropertyFor and instead just did @Html.LabelFor and @Html.TextboxFor

Can someone provide any insight as to what could be done to pass the data annotations to the DisplayTemplate properly?

May 06, 2016 22:37

All you'd need to do is to have another partial view for strings called TextboxForm.cshtml.

Joel Abrahamsson's blog post about it should give you some ideas.

May 07, 2016 9:25

I actually do have a partial view called TextBoxForm that already exists.  I have tried to specify the model as string, and although visually it looks fine on the page, it isn't rendinering out the necessary data- attributes in the html that come from the data annotations.  When I pull the exact same code out of the partial view and into the main view, it works just fine.

May 07, 2016 14:19

Ah sorry I missed that part. That the first example says Last name and the first says first name is not relevant for this example?

When you say that you add these on the viewmodel, are you using your ContentData as viewmodel or is the viewmodel something separate?
If you're using something separate and that FirstName is not representing a Property on your Content, I would suggest that you don't use PropertyFor, as it is supposed to be used for rendering Content Properties.

With basic MVC you can reuse views into separate .cshtml files and render them using @Html.Partial or @Html.RenderPartial.

May 07, 2016 15:13

The first name / last name was just a mistake on my part in copying the fields, in essence its the same thing.  

In regards to the view model, I am not using my content data as a view model, as it is a form I am trying to post back to the controller and there is no content in it.  I have a base viewmodel class that I pass in the current page to it which is used to access any of the actual CMS features.  The view model itself is used as a mechanism of posting data back to the server, so in essence these fields are not content properties.  I will try and use partial views to see if it can accomplish what I am looking to do.  Thanks for the suggestion.

May 07, 2016 15:54

What is content of your "TextboxForm.cshtml" file?

May 08, 2016 21:03

The file looks basically like the following.

<div class="form-group">
@Html.LabelFor(m => Model)
@Html.TextboxFor(m => Model)
@Html.ValidationMessage(m => Model)
May 09, 2016 4:11

Just curious - what if you use Html.EditorFor(...) instead of Html.PropertyFor(...) ?

May 09, 2016 8:47

Valdis as he's trying to render something that isn't content properties I don't think it would be an expected behavior that PropertyFor or editfor would work

May 09, 2016 8:50

PorpertyFor is looking for Display templates, EditorFor is looking for editor templates. I speculate that unobtrusive validation shows up if you request for templates within editor context. Could be wrong..

May 09, 2016 11:37

I ended up giving up on this way of thinking.  Getting the attributes working with the display templates didn't seem to work so I dropped the display template and placed the code back into the views directly.  It may be better in the long wrong as it allows for writing out each field exactly the way you want it, but in the case of a similar looking form it just beomes redundant to have the same code all over the place.

May 22, 2016 14:46

   In the custom UIHint display template, make sure to use the correct HTML helpers to generate the input field, such as @Html.TextBoxFor or @Html.EditorFor.      These helpers should automatically generate the necessary data attributes for unobtrusive JavaScript validation based on the data annotations applied to the property.

  @Html.TextBoxFor(model => model, new { data_val = "true", data_val_required = "The field is required." })

Muhammed Riza

Subul - Impact Outsourcing Agency

Apr 22, 2023 13:15
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.