title: Which one is better? Ajax post or page post[Controller httppost] when only one form is there in a page?
body: <p>I have a page called Bookprogram which contains 6 input controls namely, txtName, txtEmail, txtPhone, selectcat[dropdown for categories], txtDate, txtMessage. Now when am done with all the validations for the above control, I want to store the data in db. I know how to perform both in ajax as well as complete page posting.</p>
  
  <p>If it's in ajax, after validations, I would just call <code>$.ajax</code> and post the data as a string and fetch it in controller as below:</p>
  
  <pre><code>[HttpPost]
  public JsonResult BookProgram(string name, string email, string phone, string category, string date, string message)
  {
         //code to save into db
         return Json(result);
  }
  </code></pre>
  
  <p>If I have to post a whole page, after validations I would just do a <code>$(form).submit();</code> and write as below in controller: </p>
  
  <pre><code>[HttpPost] 
  public ActionResult Bookprogram(Mymodel model)
  {
       //Code to save the data 
       return View();
  }
  </code></pre>
  
  <p>I just want to know which is better, safe and good to use as I have to display a message after successful submission. I know I can take either of the ways to display message but Is postback[page refresh] really needed in this scenario and if yes what are the advantages of it over ajax post?</p>
  
  <p><strong>EDIT :</strong> </p>
  
  <p>I just went through <strong><a href="https://stackoverflow.com/questions/5980389/proper-way-to-use-ajax-post-in-jquery-to-pass-model-from-strongly-typed-mvc3-vie">this</a></strong> link and tried to implement 2nd solution of highest voted answer but for my bad luck it wasn't hitting the controller itself. I have kept breakpoint in my controller.</p>
  
  <pre><code>$(form).on("submit", function (e) {
          e.preventDefault();
          ValidateForm(form);
          var selectedVal = $(form).find('select').children(":selected").val();
          if(selectedVal=="")
          {
              $(form).find('div.bootstrap-select').children(":first").addClass('alert-danger');
              $(form).find('div.bootstrap-select').next('.text-danger').html('Please select a category!');
          }
          var formContainer = $(form + ' .text-danger');
          if ($(formContainer).text().length == 0) {
              $.ajax({
                  url: '/Home/BookProgram/',
                  type: "POST",
                  dataType: 'json',
                  contentType: "application/json; charset=utf-8",
                  data: $('#fbookprogram').serializeArray(),
                  success: function (data) {
                      if (data.result == "Success") {
                            alert('success');
                      }
                      else {
                           alert('fail');
                          return false;
                      }
                      return true;
                  }
              });
          }
          $(form).unbind('submit');
          return false;
      });
  </code></pre>
  
  <p><strong>Controller :</strong> </p>
  
  <pre><code>public ActionResult BookProgram(MyModel model)
  {
      if(ModelState.IsValid)
      {
          //code to save data
      }
      return Json(new { success = false });
  }
  </code></pre>
  
  <p>What is that I am missing here.</p>