Example to use ajax post in MVC 4

Since MVC4, it is recommended using jquery and unobtrusive javascript to post form. Here is a quick example to do it in a view to use $.ajax and $.post

   1:   

   2:  <h3>Form 1:</h3>

   3:  @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { Id="form1"}))

   4:  {

   5:      <input type="text" id="text1" name="text1" /><br />

   6:      <input type="text" id="text2" name="text2" /><br />

   7:      <input type="submit" value="submit" id="form1submit" />

   8:  }

   9:   

  10:  <h3>Form 2:</h3>

  11:  @using (Html.BeginForm("About", "Home", FormMethod.Post, new { Id = "form2" }))

  12:  {

  13:      <input type="text" id="txtName" name="txtName" value="abc" /><br />

  14:      <input type="submit" value="submit" id="form2submit" />

  15:  }

  16:   

  17:  @section scripts{

  18:      <script type="text/javascript">

  19:          $(function () {

  20:              $('#form1submit').click(function () {

  21:                  $.ajax({

  22:                      url: '/Home/About',

  23:                      type: 'POST',

  24:                      data: $('#form1').serialize(),

  25:                      success: function (data) {

  26:                          alert(data);

  27:                      }

  28:                  });

  29:   

  30:                  return false;

  31:              });

  32:   

  33:              $('#form2submit').click(function () {

  34:                  var action = $('#form2').attr('action');                

  35:                  $.post(action, $('#form2').serialize(), function (data) { alert(data); });

  36:                  return false;

  37:              });

  38:   

  39:          });

  40:          

  41:      </script>

  42:  }