title: Null model when posting data with Ajax.BeginForm
body: <p>I've created a partial view that allows a user to enter their email and get added to a subscriber list. Originally I had this working as standard post and everything worked fine.</p>
  
  <p>However now I'm trying to make this an ajax call and for some reason, even though the form is posting to the correct controller, the model is always coming through as null and I can't figure out why.</p>
  
  <p>Here are my views:</p>
  
  <p><strong>Parent view:</strong></p>
  
  <pre><code>@Html.Partial("Shared/Newsletter/NewsletterForm", new NewsletterSubscriber())
  </code></pre>
  
  <p><strong>Form partial:</strong></p>
  
  <pre><code>@using (Ajax.BeginForm("NewsletterSignUp", "Newsletter", new AjaxOptions { HttpMethod = "POST" }))
  {
      &lt;input type="text" name="EmailAddress" id="newsletter-email" class="basic-input" placeholder="Email Address"&gt;
      &lt;button id="submit-newsletter" class="basic-submit"&gt;Sign Up&lt;/button&gt;
      &lt;p id="status"&gt;&lt;/p&gt;
  }
  </code></pre>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>[HttpPost]
  public ActionResult NewsletterSignUp(NewsletterSubscriber model)
  {
      if (!ModelState.IsValid)
      {
          return Content("Please enter a valid e-mail address");
      }
  
      // Do logic...          
  }
  </code></pre>
  
  <p><strong>The model:</strong></p>
  
  <pre><code>public class NewsletterSubscriber
  {
      [Required]
      [EmailAddress]
      [StringLength(300)]
      public string EmailAddress { get; set; }
  }
  </code></pre>
  
  <p><strong>Scripts:</strong></p>
  
  <pre><code>&lt;script src="/scripts/jquery.validate.min.js"&gt;&lt;/script&gt;
      &lt;script src="/scripts/jquery.validate.unobtrusive.min.js"&gt;&lt;/script&gt;
      &lt;script src="/scripts/jquery.unobtrusive-ajax.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(function() {
  
              $('#submit-newsletter').on('click', function(e) {
                  e.preventDefault();
  
                  $.post('/umbraco/surface/Newsletter/NewsletterSignUp', function (data) {
                      console.log(data);
                      $('#status').show().text(data);
                  });
              });
  
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Like I said, when I step through the code the post is hitting the correct controller, however the model is always coming through as null.</p>
  
  <p>Where am I going wrong?</p>