title: ASP.Net MVC, submit form with JQuery.Ajax
body: <p>I want to submit a form (Html.BeginForm()) using JQuery Ajax.
  According to <a href="https://stackoverflow.com/questions/16122949/submit-form-with-jquery-ajax">this question</a>, it should work !
  I don't understand why the parameters 'email' from the action SendEmail() doesn't get values from the js.
  Can you please help me ?</p>
  
  <p>My View :</p>
  
  <pre><code>&lt;% using (Html.BeginForm("SendEmail", null, FormMethod.Post, new { @class = "form", @id = "formSendMail" }))
  { %&gt;
  &lt;fieldset&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;label for="MailFrom"&gt;
                  De...&lt;/label&gt;
              &lt;%= Html.TextBox("MailFrom", Session["email"].ToString(), new { @id = "MailFrom", @Name = "MailFrom", @readonly = "readonly" })%&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;label for="MailTo"&gt;
                  A...&lt;/label&gt;
              &lt;%= Html.TextBoxFor(m =&gt; Model.Agent.Email, new { @id = "MailTo", @Name = "MailTo" })%&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;label for="MailSubject"&gt;
                  Objet :&lt;/label&gt;
              &lt;%= Html.TextBoxFor(m =&gt; Model.MailSubject, new { @id = "MailSubject", @Name = "MailSubject" })%&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;label&gt;&amp;nbsp;&lt;/label&gt;
              &lt;%= Html.TextArea("MailBody", Model.MailBody, 5, 10, null)%&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/fieldset&gt;
  &lt;% } %&gt;
  </code></pre>
  
  <p>My controller :</p>
  
  <pre><code>[HttpPost]
  public ActionResult SendEmail(Email email)
  {
      if (email != null)
      {
          if (!string.IsNullOrEmpty(email.MailBody) &amp; !string.IsNullOrEmpty(email.Subject) &amp; !string.IsNullOrEmpty(email.To))
          {
              using (IEmailDal emailDal = new EmailDal())
              {
                  emailDal.SendEmail(email);
              }
  
              return Json("Email envoyé", JsonRequestBehavior.AllowGet);
          }
          else
              return Json("Error");
      }
      else
          return Json("Error");
  }
  </code></pre>
  
  <p>My Email class :</p>
  
  <pre><code>public class Email
  {
      public string From { get; set; }
      public string To { get; set; }
      public string Subject { get; set; }
      public string MailBody { get; set; }
  }
  </code></pre>
  
  <p>To submit my form, I simulate the submit action via a button in jquery.dialog :</p>
  
  <pre><code>$("#mail-form").dialog({
      buttons: {
          "Envoyer le mail": function () {
              $("#formSendMail").submit();
          }
      }
  });
  </code></pre>
  
  <p>And my javascript :</p>
  
  <pre><code>$('#formSendMail').submit(function (e) {
      var myEmail = {
          From: $('#MailFrom').val(),
          To: $('#MailTo').val(),
          Subject: $('#MailSubject').val(),
          MailBody: $('#MailBody').val()
      };
  
      $.ajax({
          type: "POST",
          url: '&lt;%= Url.Action("SendEmail", "Messages") %&gt;',
          data: JSON.stringify(myEmail),
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (result) {
              alert("Mail envoyé.");
          },
          error: function (result) {
              alert("Echec lors de l'envoi du mail.");
          }
      });
  
      return false;
  });
  </code></pre>
  
  <p>Thank you !</p>