title: viewmodels and unobtrusive validation mvc3
body: <p>I'm unable to get unobtrusive validation to work using custom viewModels representing abstractions of my EF generated classes.</p>
  
  <p>As try as I might, the validation is not firing on form submission for the property <code>Name</code> in my City entity. I believe it is has something to do with the different models in the views but I simply don't know enough how it all works.</p>
  
  <p>Please note. I have all the latest validation scripts and when observing the page using firebug and firequery I can see that the script is adding and removing the class valid from the input but that the input is not part of the validation collection.</p>
  
  <p>Many thanks in advance.</p>
  
  <p>My viewModel:</p>
  
  <pre><code>/// &lt;summary&gt;
  /// Represents abstraction of the City View that also serves in
  /// data binding between the City View and the City Model.
  /// &lt;/summary&gt;
  public class CityViewModel
  {
      /// &lt;summary&gt;
      /// Gets or sets the city.
      /// &lt;/summary&gt;
      /// &lt;value&gt;&lt;/value&gt;
      public City City { get; set; }
  
      /// &lt;summary&gt;
      /// Gets or sets the collection of states.
      /// &lt;/summary&gt;
      /// &lt;value&gt;&lt;/value&gt;
      public ICollection&lt;State&gt; States { get; set; }
  }
  </code></pre>
  
  <p>My CreateCity view:</p>
  
  <pre><code>@model OzFarmGuide.ViewModels.CityViewModel
  @{
      ViewBag.Title = "Create a new city";
      Layout = "~/Views/Shared/_AdminLayout.cshtml";
  }
  &lt;h2&gt;
      Create a new city&lt;/h2&gt;
  
  @using (Html.BeginForm())
  {
      @Html.EditorFor(model =&gt; model.City, new { States = Model.States })
      &lt;div class="entity-actions"&gt;
          &lt;input type="submit" value="Create" /&gt;
          |
          @Html.ActionLink("Back to List", "Cities")
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>My Editor template: (_ValidationPartial just contains the script references)</p>
  
  <pre><code>@model OzFarmGuide.Models.City
  @Html.Partial("_ValidationPartial")
  @Html.ValidationSummary(true)
  &lt;div class="editor-label"&gt;
      @Html.LabelFor(model =&gt; model.Name)
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @Html.TextBoxFor(model =&gt; model.Name)
      @Html.ValidationMessageFor(model =&gt; model.Name)
  &lt;/div&gt;
  &lt;div class="editor-label"&gt;
      @Html.LabelFor(model =&gt; model.State)
  &lt;/div&gt;
  &lt;div class="editor-field"&gt;
      @Html.DropDownList("StateId",
      new SelectList(ViewBag.States as System.Collections.IEnumerable,
      "StateId", "Name",
      Model.StateId))
  &lt;/div&gt;
  @Html.HiddenFor(model =&gt; model.CityId)
  </code></pre>
  
  <p>As requested here are the scripts I have included:</p>
  
  <pre><code>&lt;script src="@Url.Content("http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>