title: Stop page from refreshing once server success message received from controller
body: <p>Code below is ready to test: MVC3</p>
  
  <p>Problem is when I enable e.preventDefault(); than individual errors not popping up infront of each control generated by ValidationMessageFor and showing up
  when e.preventDefault(); is enabled. All the errors are working properly but once code processed and Successful message returning 
  from server side make the whole page POSTBACK/REFRESH :( .</p>
  
  <p><strong>Question:</strong> <em>How I stop the whole page from Refresh/Postback if e.preventDefault(); is enable and get SUCCESS message from server?</em></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(function () {
        $("#personCreate").click(function (e) {
            //e.preventDefault(); -------&gt; Here is the problem
  
            var profile = {
                   FirstName: $("#FirstName").val(),
                   LastName: $("#LastName").val()
               };
  
  
            $.ajax({
                url: '/Test/save',
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify(profile),
                contentType: 'application/json; charset=utf-8',
  
                //beforeSend: function () { $("#saveStatus").html("Saving").show(); },
                //complete: function () { $("#saveStatus").html("Saving").hide(); },
                success: function (data) {
                    // get the result and do some magic with it
                    var message = data.Message;
                    $("#resultMessage").html(message);
                }
            });
        });
    });
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>//Controller code</strong></p>
  
  <pre><code>[HttpPost]
  public ActionResult Save(CreateViewModel userVm)
  {
      if (ModelState.IsValid)
      {
          return Json(new CreateViewModel { Message = "Passed" });
      }
      else
      {
          return Json(new CreateViewModel { Message = "Failed" });
      }
  }
  </code></pre>
  
  <p><strong>//Create.cshtml</strong> </p>
  
  <pre><code>&lt;span id="saveStatus"&gt;&lt;/span&gt;
  
  @using(Html.BeginForm())
  {
  
  
          &lt;fieldset&gt;
          &lt;legend&gt;Contact Information&lt;/legend&gt;
          &lt;div&gt;
              &lt;table class="form-spacing"&gt;                        
                  &lt;tr&gt;
                      &lt;td class="cell-one"&gt;* @Html.LabelFor(model =&gt; model.FirstName) :&lt;/td&gt;
                      &lt;td class="cell-two"&gt;@Html.TextBoxFor(model =&gt; model.FirstName, new { @class = "big-field", tabindex = "1" })&lt;/td&gt;
                      &lt;td class="cell-three" &gt;@Html.ValidationMessageFor(model =&gt; model.FirstName)&lt;/td&gt;           
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td class="cell-one"&gt;* @Html.LabelFor(model =&gt; model.LastName) :&lt;/td&gt;
                      &lt;td class="cell-two"&gt;@Html.TextBoxFor(model =&gt; model.LastName, new { @class = "big-field", tabindex = "2" })&lt;/td&gt;
                      &lt;td class="cell-three" &gt;@Html.ValidationMessageFor(model =&gt; model.LastName)&lt;/td&gt;            
                  &lt;/tr&gt;
              &lt;/table&gt;
           &lt;/div&gt;
      &lt;/fieldset&gt;
  
       &lt;p&gt;
          &lt;input type="submit" value="Save" id="personCreate" /&gt;
      &lt;/p&gt;
  
  }
  
      &lt;div&gt;
          &lt;span id="resultMessage"&gt;&lt;/span&gt;
      &lt;/div&gt;
  </code></pre>