MVC3 data-val-* attributes not emitted from model editor template

Question

I have created an editor template for one of my models in my current MVC3 project. This model is calling the correct editors for the properties of the underlying mode, but they're missing the unobtrusive data-val-* attributes for validation.

How can I get MVC to emit the data-val attributes?

Here's my model

[MetadataType(typeof(FieldTripRouteMetadata))]
public partial class FieldTripRoute
{
    private class FieldTripRouteMetadata
    {
        [Required]
        [DisplayFormat(DataFormatString = "{0:d}")]
        public DateTime Date { get; set; }

        [Required]
        [DisplayName("Route")]
        public int RouteID { get; set; }

        [Required]            
        [DisplayName("Departure Time")]
        [UIHint("TimeWithPeriod")]
        [DisplayFormat(DataFormatString = "{0:h:mm tt}")]
        public DateTime DepartureTime { get; set; }

        [Required]
        [StringLength(255)]
        [DisplayName("Pickup Location")] 
        public String PickupLocation { get; set; }

        [Required]
        [StringLength(255)]
        public String Destination { get; set; }

        [Required]            
        [DisplayName("Arrival Time")]
        [UIHint("TimeWithPeriod")]
        [DisplayFormat(DataFormatString = "{0:h:mm t}")]
        public DateTime ArrivalTime { get; set; }

        public bool IsReturnRoute { get; set; }

        public int FieldTripID { get; set; }
    }

and my Editor Template:

@model FieldTripRoute

@{string routeType = (Model.IsReturnRoute ? "return" : "");}

<fieldset class="add@(routeType)Route" style="clear: both; width: 620px; margin-right: auto; margin-left: auto;">
    <legend>Add Route</legend>
    <div style="float: left; width: 275px;">
        <div>
            <div class="editor-label">@Html.LabelFor(model => model.Date)</div>
            <div class="editor-field">@Html.EditorFor(model => model.Date)</div>
            <div class="validation-error">@Html.ValidationMessageFor(model => model.Date)</div>
        </div>
        <div>
            <div class="editor-label">@Html.LabelFor(model => model.DepartureTime)</div>
            <div class="editor-field">@Html.EditorFor(model => model.DepartureTime)</div>
            <div class="validation-error">@Html.ValidationMessageFor(model => model.DepartureTime)</div>
        </div>
        <div>
            <div class="editor-label">@Html.LabelFor(model => model.ArrivalTime)</div>
            <div class="editor-field">@Html.EditorFor(model => model.ArrivalTime)</div>
            <div class="validation-error">@Html.ValidationMessageFor(model => model.ArrivalTime)</div>
        </div>
    </div>
    <div style="float: left;">
        <div>
            <div class="editor-label">@Html.LabelFor(model => model.RouteID)</div>
            <div class="editor-field">@Html.DropDownListFor(model => model.RouteID, Model.EditRouteList)</div>
            <div class="validation-error">@Html.ValidationMessageFor(model => model.RouteID)</div>
        </div>
        <div>
            <div class="editor-label">@Html.LabelFor(model => model.PickupLocation)</div>
            <div class="editor-field">@Html.TextBoxFor(model => model.PickupLocation)</div>
            <div class="validation-error">@Html.ValidationMessageFor(model => model.PickupLocation)</div>
        </div>
        <div>
            <div class="editor-label">@Html.LabelFor(model => model.Destination)</div>
            <div class="editor-field">@Html.EditorFor(model => model.Destination)</div>
            <div class="validation-error">@Html.ValidationMessageFor(model => model.Destination)</div>
        </div>          
    </div>        
    <div style="clear: both; width: 100px; margin: 20px auto 0 auto;">
        <input type="button" id="submit@(routeType)Form" name="submit@(routeType)Form" value="Add" />
    </div>
</fieldset>

And my viewModel:

public class FieldTripEditViewModel
{
    public FieldTrip Trip { get; set; }        
    public FieldTripRoute Route { get; set; }        
    public FieldTripRoute ReturnRoute { get; set; }

    public FieldTripEditViewModel(){}

    public FieldTripEditViewModel(FieldTrip trip)
    {
        this.Trip = trip;
        this.Route = new FieldTripRoute();
        this.ReturnRoute = new FieldTripRoute {IsReturnRoute = true};
    }
}

I looked at this post and all of my base editor templates correspond to the idea of leaving the name as an empty string to allow MVC to generate it. Yet I still have no validation.

Yes, that was already enabled in the web.config for the site. — Philter, Feb 13 '12 at 17:38
I was able to solve it with [this post](http://stackoverflow.com/questions/6657641/asp-net-mvc-3-client-validation-attributes-generation) I'll post a full explanation when SO allows me to. — Philter, Feb 13 '12 at 17:43

score 3 · Accepted Answer · edited May 23 '17 at 12:16

3

I was able to get it to function by adding a form tag before and after my editor template and adding this.ViewContext.FormContext = new FormContext(); at the beginning of the Editor Template.

It appears that when the control is passed to the editor template it loses the current form context. I tried just addin the ViewContext.FormContext command but without the addition of the form tags the embedded model would not validate.

So right now I have a form inside of a form and it works as intended, but it seems like there should be an easier way.

The idea for the formContext command came from here

edited May 23 '17 at 12:16

Community

1
1

answered Feb 17 '12 at 13:52

Philter

535
1
9
24

It would have been easier if you used Html.BeginForm(). Internally it would create FormContext for you instead of you declaring it manually. – Huske Feb 17 '12 at 13:56
The problem with that is it's not valid html to have multiple forms inside of each other, therefore I couldn't put a form around the nested viewmodels and still have valid HTML. – Philter Feb 21 '12 at 13:52

MVC3 data-val-* attributes not emitted from model editor template

1 Answers1