title: Elements in jQuery dialog not being bound to ViewModel on Post
body: <p>I have a two views (Create/Edit) which use an EditorTemplate for GET/POST of user input. The EditorTemplate has a jQuery dialog to capture some additional information. </p>
  
  <p><strong>The elements inside the dialog are not posting when I submit the form. Consequently, its messing up validation as well. The validation fires and changes the css class of the element but does not change back after editing.</strong>  </p>
  
  <p>When I pull the elements out of the dialog, the values are bound to the ViewModel and validation works as expected.</p>
  
  <p>I was previously copying the values in the dialog (using different names) to some hidden fields to bind to the ViewModel -- this works but validates the hidden fields and not the ones with the actual values.</p>
  
  <p><strong>How can I bind the elements to the ViewModel and still use the jQuery dialog?</strong></p>
  
  <p><strong>Code sample</strong>
  </p>
  
  <pre><code>@* The Create View *@
  
  @using(Html.BeginForm())
          {
              @Html.ValidationSummary(false, "Please fix these errors:");
              @Html.EditorForModel("JobRecord", Model);
              &lt;div id="button"&gt;
                  &lt;p&gt;
                      @Html.Button("Create", new Dictionary&lt;string, object&gt;() { { "id", "create" }, { "type", "submit" } })
                      @Html.Button("Cancel", new Dictionary&lt;string, object&gt;() { { "id", "cancel" }, { "type", "button" } })
                  &lt;/p&gt;
              &lt;/div&gt;
          }
  
  @* The Edit Template *@
  
  
  @model GyroviewOpsManager.UI.Models.JobRecordViewModel
  
  @{
      Html.Assets().Styles.Add("/Content/jobrecord.css");
      Html.Assets().Styles.Add("/Content/themes/base/jquery.ui.all.css");
      Html.Assets().Scripts.Add("/Scripts/jobrecord.js");
      Html.Assets().Scripts.Add("/Scripts/jquery-ui-1.8.22.min.js");
  }
  
  &lt;script src="@Url.Content("~/Scripts/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;table id="jobinfo-table"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;a id="opener" href="#"&gt;Job Number...&lt;/a&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  @Html.TextBoxFor(model =&gt; model.JobNo)
              &lt;/td&gt;
              ...
          &lt;/tr&gt;
      &lt;/table&gt;
  
  
  @* The div for the jQuery dialog *@ 
  &lt;div id="dialog" title="Job Number Editor"&gt;
       &lt;p&gt;* All fields are required&lt;/p&gt;
  &lt;table id="jobnumedit-table"&gt;
      &lt;tr&gt;
          &lt;td&gt;Job Number:&lt;/td&gt;
          &lt;td&gt;@Html.TextBoxFor(model =&gt; model.JobNo, new { id = "jobNo", @readonly = "readonly" })&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Location:&lt;/td&gt;
          &lt;td&gt;@Html.DropDownListFor(model =&gt; model.Location, new SelectList(Model.Locations, "LocnID", "Name", ViewBag.UserLocation), "-- Select --", new{id="Location"})&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          @{
              var jobNoDate = Model.JobNoDate;
              if (Model.JobNoDate == null)
              {
                  jobNoDate = DateTime.Today;
              }
          }
          &lt;td&gt;Date:&lt;/td&gt;
          &lt;td&gt;@Html.TextBoxFor(model =&gt; model.JobNoDate, new{id="JobNoDate"})&lt;/td&gt;    
      &lt;/tr&gt;
      ...
  &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  // Dialog script
  $("#dialog").dialog({
      autoOpen: false,
      height: 450,
      width: 450,
      modal: true,
      buttons: {
          "Ok": function () {
              ...
              $(this).dialog("close");
          },
          "Cancel": function () {
              $(this).dialog("close");
          }
      }
  });
  
  $("#opener").click(function () {
      ...
      return false;
  });
  &lt;/script&gt;
  </code></pre>