ASP MVC JsonResult renders as page instead of being captured by calling jQuery function

Question

I'm having some problems with getting a JSON response from an ASP MVC controller method to be processed within jQuery - something that I've tried before without a problem - however I've obviously done something wrong this time and I can't figure out what...

I have a spark view being rendered from ASP MVC 3, calling a controller method which is returning a JsonResult. I've stripped it down to just a success or failure message at the moment until it will actually work. I can follow the method through both paths in debug and the JSON object created looks correct.

[HttpPost]
public JsonResult AdjustmentDetail(AdjustmentPaymentModel adjustment)
{
    try
    {
        //do some other processing
        return Json(new {success = true}, "application/json");
    }
    catch(Exception e)
    {
        return Json(new { success = false, message = e.Message });
    }
}

The controller method is being called from a Spark view, using jQuery to submit the form and capture the result to return some feedback to the user and then provide them some choices from that point on. At the moment, it's just set to pop up an alert so that I can see it receive the JSON and execute the callback function. Again, some inputs on the form have been removed for readability (one plain text box and two text boxes with jQuery datepickers on that appear to be functioning correctly - hence the datepicker functions in the javascript, which I've left in case they might be interfering).

<script>
  $(document).ready(function () {
    $(".datepicker").attr('readOnly', 'true');
  });

  $(function () {
    $('.datepicker').datepicker({
      maxDate: 0,
      dateFormat: 'dd/mm/yy'
    });
  });

  $('document').ready(function () {
    $('#submit-adjustment').submit(function () {
      $('#mini-loader').show();

      $.post('${Url.Action("AdjustmentDetail", "payments")}', { adjustment: Model }, function (d) {
        alert(d);
        $('#mini-loader').hide();
      }, 'json');

      return false;
    });
  });
</script>

<form action='' id='submit-adjustment' method='post'>
  <label for="Notes">
    Notes
    <small>
      <span class="error">${Html.ValidationMessageFor(m => m.Notes)}</span>
    </small>
  </label>

  ${Html.EditorFor(m => m.Notes)}

  ${Html.HiddenFor(m => m.BankAccount)}
  ${Html.HiddenFor(m => m.IsCreditAdjustment)}

  <div style="padding-top:10px;">
    <input class="button big" name="submit-adjustment" type="submit" value="Submit Adjustment" />
    <img src="/Content/Images/mini-loader.gif" id="mini-loader" style="display: none;"/>
  </div>
</form>

In the past, the above has worked - the form posts and then the resulting JSON is processed by the jQuery callback function. In this case however (whether the controller method completes successfully or throws an exception), the JSON is rendered in the browser:

{"success":true}

And when following the Javascript execution in Chrome, the function is either not being called or the JSON render is changing the page before it gets the chance to do so. I've checked the call using Fiddler and the post is responding with a 200, and with a content type of: application/x-www-form-urlencoded

I've been googling this for a while and I'm either unable to express the problem in a google query, or I'm just missing something very simple here! Any help is much appreciated - please let me know if I need to provide any more detail.

Answer 1

It looks like the default event for the form submit is not being prevented by the return false for some reason. Instead of this, add an event argument to the submit handler and a call to event.preventDefault():

$('#submit-adjustment').submit(function (event) {
   event.preventDefault();
   ...

Answer 2

Change the submit button for a regular button

<input id="Button1" type="button" value="Test" class="btn btn-primary">

and add the jquery to submit.

<script language="javascript" type="text/javascript">
$(document).ready(function () {


    $('#Button1').click(function () {
        alert('here');
        $('#addCustomerForm').submit();
        return false;
    });

});