title: MVC 5 Ajax form with field updates asynchronously and still supporting a Full form post
body: <p>So I have been using MVC for a while but not a lot of Ajax. 
  So the issue i have is that I have a create view where the first field of the create view is a Date picker which on change i want ajax to change the selection dropdown of another field on the form. I have the Ajax update working , but the form Post (Create button), now only calls into the Ajax method on the controller. I want the Ajax post back to call the default method Create method on the Controller. So the Create form contains 3 fields </p>
  
  <ol>
  <li>A date (which has the OnChange Ajax submit)</li>
  <li>A drop down list of id's and text</li>
  <li>other fields as required</li>
  </ol>
  
  <p>I have included the model and cshtml view files (one the partial). The controller is just simply a method taking either the datetime value or the entire model. 
  So I have the code working where, when the date changes it updates the relevant LocalIds field, but because the 'create' button is inside the Ajax.BeginForm tags, when the create button is pressed, it generates an Ajax call, and I want it to generate a Form Post. What am i missing </p>
  
  <p>CreateModel</p>
  
  <pre><code>public class IdsSelection
  {
      public string Id { get; set; }
      public List&lt;SelectListItem&gt; Selections { get; set; }
  }
  
  public class CreateModel
  {
      [Display(Name="Local Id's")]
      public IdsSelection LocalIds;
      [Display(Name="Day")]
      [Required, DataType(DataType.Date)]
      [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}",ApplyFormatInEditMode=true)]
      public DateTime Date { get; set; }
      [Required, Display(Name = "Other Value")]
      [Range(1.0, 1000000.0, ErrorMessage ="Value must be greater than zero")]
      public decimal OtherValue { get; set; }
  
      public CreateModel()
      {
          Date = DateTime.Today;
      }
  }
  </code></pre>
  
  <p>CreateView.cshtml</p>
  
  <pre><code>@Model Demo.Models.CreateModel
  ....
  @using (Ajax.BeginForm("ChangeDate", "Process", new AjaxOptions()
  {
      InsertionMode = InsertionMode.Replace,
      HttpMethod = "GET",
      UpdateTargetId = "changeid",
  }))
  {
      @Html.AntiForgeryToken()
      &lt;div class="form-horizontal"&gt;
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.Date, new
             {
                 htmlAttributes = new
                 {
                     autofocus = "autofocus",
                     @class = "form-control",
                     @Value = Model.Date.ToString("yyyy-MM-dd"),
                     onchange = "$(this.form).submit();"
                 }
             })
              @Html.ValidationMessageFor(model =&gt; model.Date, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
  
          @Html.Partial("_ShowIds", Model.LocalIds)
  
          &lt;div class="form-group"&gt;
              @Html.LabelFor(model =&gt; model.OtherValue, htmlAttributes: new { @class = "control-label col-md-2" })
              &lt;div class="col-md-10"&gt;
                  @Html.EditorFor(model =&gt; model.OtherValue, new { htmlAttributes = new { @class = "form-control" } })
                  @Html.ValidationMessageFor(model =&gt; model.OtherValue, "", new { @class = "text-danger" })
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              &lt;div class="col-md-offset-2 col-md-10"&gt;
                  &lt;input type="submit" value="Create" class="btn btn-default" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  &lt;div&gt;
      @Html.ActionLink("Back to List", "Index")
  &lt;/div&gt;
  
  @section Scripts {
      &lt;script src="~/Scripts/jquery.unobtrusive-ajax.min.js"&gt;&lt;/script&gt;
  }
  </code></pre>
  
  <p>_ShowIds.cshtml</p>
  
  <pre><code>@model Demo.Models.IdsSelection
  
  &lt;div id="changeid" class="form-group"&gt;
      @Html.Label("Local Id", htmlAttributes: new { @class = "control-label col-md-2" })
      &lt;div class="col-md-10"&gt;
  
          @if(Model.Selections.Count == 1)        // one
          {
              @Html.HiddenFor(model =&gt; model.Id)
              @Html.EditorFor(model =&gt; model.Selections[0].Text, new
              {
                  htmlAttributes = new
                  {
                      @class = "form-control",
                      @readonly = "readonly",
                  }
              })
          }
          else            // more entries so show a dropdown
          {
              @Html.DropDownListFor(model =&gt; model.Id, Model.Selections, new { @class = "form-control" })
              @Html.ValidationMessageFor(model =&gt; model, "", new { @class = "text-danger" })
          }
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>